Skip to main content

Data

Properties related to data cells displayed in the table.

data​

  • Type: (string|number)[][]

Header and data text to be displayed in the table. First array represents the header row, following arrays represent data rows.

Example​

<active-table
  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]]'
></active-table>

defaultText​

  • Type: string|number
  • Default: ""

Text that is displayed when a cell is empty or its type validation has failed.

Example​

<active-table defaultText="-"></active-table>

isDefaultTextRemovable​

  • Type: boolean
  • Default: true

Removes default text when a cell containg one is focused.

Example​

<active-table defaultText="Click" isDefaultTextRemovable="true"></active-table>

cellStyle​

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

Defines the default style for table cells.
This object contais all CSSStyle properties except minWidth, maxWidth, height, minHeight and maxHeight.
The width property supports px and % measurements, however when using % - the tableStyle object should have its width property set as otherwise the cells will not be able to calculate a relative width. Additionally, when cellStyle - width and tableStyle - width are defined and isColumnResizable is set to true, the cellStyle - width will be overriden to reach the set table width, hence to prevent this make sure to set isColumnResizable to false.

Example​

<active-table
  cellStyle='{"borderBottom": "1px solid black", "borderRight": "1px solid black", "backgroundColor": "#fafafa"}'
></active-table>
info

If you wish to set the header cell style please use the headerStyles property and the style of the frame components (index, add new column, new row) can be set via the frameComponentsStyles property.

rootCell​

Configuration for the default cell when there is no data inside the table.
text defines the content inside the cell.
styles is used to define the cell's appearance for various mouse states. This is particularly useful for controlling the cell width if you have set a width property inside tableStyle as the root cell will by default be stretched to match it (all documentation examples actually use width: 100% so you will notice that other examples' root cells match their original table widths). Outer styling such as border and boxShadow will need to be controlled in tableStyle.

Example​

<active-table
  rootCell='{"text": "Create", "styles": {"default": {"width": "50px"}, "hover": {"backgroundColor": "#e0f1ff"}}}'
></active-table>

isCellTextEditable​

  • Type: boolean
  • Default: true

Controls if cell text can be edited for both data and header cells. This property is superseded by isHeaderTextEditable for header cells.

Example​

<active-table isCellTextEditable="false"></active-table>

spellCheck​

  • Type: boolean
  • Default: false

Checks table text for spelling mistakes (based on the browser's language settings) and if found displays a curly red line under the errors.

Example​

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

This is a browser dependent feature that may be handled differently depending on the browser you are using.