Skip to main content

Column

Properties related to table columns.

customColumnsSettings​

Array of custom properties for columns with header text that matches the headerName. Values for properties that are not set will automatically be inherited from the corresponding component level properties (except headerName).

Example​

<active-table
  customColumnsSettings='[
    { "headerName": "Planet", "defaultText": "Insert Planet", "cellStyle": {"width": "150px"}, "isHeaderTextEditable": false },
    { "headerName": "Number", "cellStyle": {"backgroundColor": "#fdfdfd"}, "defaultColumnTypeName": "number", "isHeaderTextEditable": false },
    { "headerName": "Shape", "cellStyle": {"backgroundColor": "#f8f8f8"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false },
    { "headerName": "Date Created", "cellStyle": {"backgroundColor": "#f1f1f1"}, "defaultColumnTypeName": "Date d-m-y", "isHeaderTextEditable": false }
  ]'
></active-table>

isColumnResizable​

  • Type: boolean
  • Default: true

Determines if columns can be resized via the use of the overlay between header cells. When width is defined in cellStyle and tableStyle properties, and this is set to true - the column width will be automatically overwritten to meet the set table width. However if this is set to false, columns will permanently hold the initially set width.

Example​

<active-table isColumnResizable="true"></active-table>

columnResizerColors​

  • Type: { hover?: string, click?: string }
  • Default: { hover: #808080, click: #4668ed }

Column width resizer overlay background color style for hover and click events.

Example​

<active-table columnResizerColors='{ "hover": "#87ddff", "click": "#369cfd" }'></active-table>

columnDropdown​

  • Type: {
        displaySettings?: DropdownDisplaySettings,
        ColumnDropdownSettings
    }
  • Default: {
         displaySettings: {isAvailable: true, openMethod: {cellClick: true}},
         isSortAvailable: true,
         isDeleteAvailable: true,
         isInsertLeftAvailable: true,
         isInsertRightAvailable: true,
         isMoveAvailable: true
    }

Settings for the column dropdown. If displaySettings object's openMethod property has cellClick set to true - open the dropdown by clicking on the header cell. If openMethod has overlayClick set to true - hover over the header cell, then click on the overlay component that will appear over it.

Example​

<active-table
  columnDropdown='{
    "displaySettings": {
      "openMethod": {"overlayClick": true}},
    "isSortAvailable": false,
    "isMoveAvailable": false
  }'
></active-table>

maxColumns​

  • Type: number
  • Default: unset

Maximum number of columns allowed (not including the index and add columns column).

Example​

<active-table maxColumns="4"></active-table>

dragColumns​

  • Type: boolean
  • Default: true

Toggles the ability to change column positions by dragging header cells or their overlays with your mouse.

Example​

<active-table dragColumns="true"></active-table>

preserveNarrowColumns​

  • Type: boolean
  • Default: true

When tableStyle is set with a width or maxWidth property to limit its size, the insertion of new columns will cause all existing column widths to automatically be reduced to make space for the new ones (except columns set with isColumnResizable as false inside cellStyle of the customColumnsSettings object). This can however become problematic when existing column widths eventually become too narrow* and their widths cannot be reduced any further.
When preserveNarrowColumns is true and column widths are too narrow*, the table width will be increased to allow new columns to be inserted.
When preserveNarrowColumns is false and column widths are too narow*, no new columns will be allowed to be inserted. set to true by default.
*Minimal column size is recognised as 33px

Example where preset table width of 300px is exceeded

<active-table
  preserveNarrowColumns="true"
  tableStyle='{"width":"300px"}'
  data='[
    ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2"],
    ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2"]]'
></active-table>
info

Please note that when tableStyle contains a width or maxWidth property with a % or vw unit and the window width is changed - if columns cannot be reduced any further the excess ones will not be removed even if preserveNarrowColumns is set to false to prevent loss of data.

displayAddNewColumn​

  • Type: boolean
  • Default: true

A toggle for a clickable '+' column on the right which is used to add new empty columns.
You can set the add new column style via frameComponentsStyles.

Example​

<active-table displayAddNewColumn="true"></active-table>

displayIndexColumn​

  • Type: boolean | {wrapIndexCellText: boolean}
  • Default: {wrapIndexCellText: false }

A toggle for the index column on the left.
When wrapIndexCellText is set to true, the index column width will be static and any overflowing digits inside its cells will be wrapped within its boundaries. This is useful in a scenario where width/maxWidth is set within tableStyle and the addition of any more columns would cause the width to be breached due to all columns having the mimimal width of 33px. Hence by keeping index column width narrow - more columns can be added without breaching the set width/maxWidth. If wrapIndexCellText is set to false and preserveNarrowColumns is set to true - if the table width is also about to be breached, wrapIndexCellText will be automatically set to true and the index width will be set back to the initial width.
You can set the index column style via frameComponentsStyles.

Example​

<active-table displayIndexColumn='{"wrapIndexCellText": false}'></active-table>
note

If dataStartsAtHeader is true, the index count will start from the header row, otherwise it will start from the first data row.

note

Please note that cell unwrapping detection is not supported and once the index column is wrapped via wrapIndexCellText it will stay in this form for the rest of the session.

Types​

Shared object property types related to columns:

ColumnDropdownSettings​

  • Type: {
        isSortAvailable?: boolean,
        isDeleteAvailable?: boolean,
        isInsertLeftAvailable?: boolean,
        isInsertRightAvailable?: boolean,
        isMoveAvailable?: boolean
    }
  • Default: {
         isSortAvailable: true,
         isDeleteAvailable: true,
         isInsertLeftAvailable: true,
         isInsertRightAvailable: true,
         isMoveAvailable: true
    }

Example​

<active-table
  columnDropdown='{
    "isSortAvailable": false,
    "isDeleteAvailable": true,
    "isInsertLeftAvailable": false,
    "isInsertRightAvailable": true
  }'
></active-table>