Skip to main content

Table

Properties related to table container.

tableStyle​

Object containing CSS styling properties for the table element.

Example​

<active-table
  tableStyle='{
    "borderRadius": "10px",
    "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px",
    "width":"100%"
  }'
></active-table>
tip

When table width needs to inherit the parent element width, set width to 100% as displayed in the example.

note

minWidth, height, minHeight, maxHeight properties are not supported.

overflow​

  • Type: { maxWidth?: string, maxHeight?: string }
  • Default: unset

A scrollbar is introduced on the table if either of the specified dimensions are exceeded. The use of this object automatically sets stickyHeader to true which can be set back to false if required.

Example​

<active-table overflow='{"maxHeight": "298px", "maxWidth": "100%"}' tableStyle='{"width":"1000px"}'></active-table>

frameComponentsStyles​

  • Type: {
         styles?: HoverableStyles,
         inheritHeaderColors?: boolean
    }
  • Default: { inheritHeaderColors: true }

Frame components are the index column, add new column and the add new row. This property is used to set their styling.
The styles property defines components' styling for varying mouse states.
inheritHeaderColors is used to toggle whether the header cells of the index column and the add new column would inherit the header row's backgroundColor and text color.

Example​

<active-table
  frameComponentsStyles='{
    "styles": {
      "default": {"backgroundColor": "#f5f5f5"},
      "hoverColors": {"backgroundColor": "#dedede"}},
    "inheritHeaderColors": false
  }'
></active-table>

enterKeyMoveDown​

  • Type: boolean
  • Default: false

When the user presses the ENTER key, the cursor focus is moved to the cell below.

Example​

<active-table enterKeyMoveDown="true"></active-table>
caution

The autofocus does not work in the Safari browser.

auxiliaryStyle​

  • Type: string

This is primarily used to configure Webkit CSS which cannot be added through component's style properties. A great example of this is the ::-webkit-scrollbar pseudo element which affects the style of the table's scrollbar.

Example​

<active-table
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }"
></active-table>
caution

If your Webkit CSS properties affect element widths or heights, they may result in undesirable component dimensions. Please use them with caution.

danger

Webkit CSS is not standardised across all browsers, make sure to check browser support for the property you are using.