Shared types

Object types that are shared by top level properties.

DropdownDisplaySettings

• Type: {
       isAvailable?: boolean,
       overlayStyles?: DropdownCellOverlayStyle,
       openMethod?: { cellClick?: boolean, overlayClick?: boolean }
  }
• Default: {
       isAvailable: true,
       openMethod: { cellClick: true }
  }

Custom styling for row and column dropdowns.
isAvailable determines if the dropdown is is available/displayed.
overlayStyles property is only applicable if overlayClick is set to true and is used to style the background color for default and mouse hover states.
openMethod is used to define the method for opening the dropdown. Either by clicking a cell via cellClick or hovering over the cell and clicking on the overlay via overlayClick.

DropdownCellOverlayStyle

• Type: { default?: { backgroundColor: string }, hover?: { backgroundColor: string } }

Example

Sample code

<active-table
  rowDropdown='{"displaySettings": {
    "openMethod": {"overlayClick": true }}}'
  columnDropdown='{"displaySettings": {
    "openMethod": {"overlayClick": true }, "overlayStyles": {"default": {"backgroundColor": "grey"}, "hover": {"backgroundColor": "blue"}}}}'
></active-table>

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  rowDropdown='{"displaySettings": {
    "openMethod": {"overlayClick": true }}}'
  columnDropdown='{"displaySettings": {
    "openMethod": {"overlayClick": true }, "overlayStyles": {"default": {"backgroundColor": "grey"}, "hover": {"backgroundColor": "blue"}}}}'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>

CSSStyle

• Type: CSSStyleDeclaration

Object containing all properties defined in the CSSStyleDeclaration specification as optionals. A TypeScript example can be found in this link.

HoverableStyles

• Type: {
       default?: NoDimensionCSSStyle,
       hoverColors?: {backgroundColor?: string, color?: string}
  }
• Default: unset

Styling details for when an element is in default state and when it is hovered with a mouse. hoverColors object only accepts backgroundColor and color properties.

StatefulCSS

• Type: {default?: CSSStyle, hover?: CSSStyle, click?: CSSStyle}

Object defining styling properties for different mouse states on the element.

NoDimensionCSSStyle

• Type: { CSSStyle & !width & !minWidth & !maxWidth & !height & !minHeight & !maxHeight }

Object containing all CSSStyle properties except width, minWidth, maxWidth, height, minHeight and maxHeight.

ColumnsDetails

• Type: {
      width: number,
      typeName: string,
      cellDropdownItems?: {name: string; backgroundColor?: string}[]
  }[]

The array elements represent each column in order from left to right.
width is the column width in pixels.
typeName is the name of the currently active type on the column.
cellDropdownItems contains details about the available cell dropdown items if the active column type is using a dropdown (backgroundColor only for label types).

OuterContentPosition

• Type: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"

Position for a component either above the table (top) or below it (bottom).