Skip to main content

Row

Properties related to table rows.

rowHoverStyles​

  • Type: {style: CSSStyle, header?: boolean, addNewRowButton?: boolean}
  • Default: unset, but if style is set then header and addNewRowButton are true

Custom styling for row mouse hover. header property denotes if style can be applied to the header row and addNewRowButton denotes if style can be applied to the add new row button if it is displayed.

Example​

<active-table rowHoverStyles='{"style":{"backgroundColor": "#d6d6d630", "transitionDuration": "0.05s"}}'></active-table>
caution

Custom default cell styles will override this property's styling. Additionally, using this property unsets the header (if set to true) and frameComponentsStyles hover color properties.

stripedRows​

  • Type: boolean | { odd?: CSSStyle, even?: CSSStyle }
  • Default: false, but if set to true then even is {backgroundColor: ''} and odd is {backgroundColor: '#dcdcdc7a'}}

Stripe based styling for rows.

Example​

<active-table stripedRows='{"odd": {"backgroundColor": ""}, "even": {"backgroundColor": "#ebebeb7a"}}'></active-table>
info

Using this property unsets the default header and frameComponentsStyles hover color properties. If the component is set with a cellStyle property - this will be overriden.

rowDropdown​

  • Type: {
         displaySettings: DropdownDisplaySettings,
         isInsertUpAvailable?: boolean,
         isInsertDownAvailable?: boolean,
         isMoveAvailable?: boolean,
         isDeleteAvailable?: boolean,
         canEditHeaderRow?: boolean
    }
  • Default: {
         displaySettings: {isAvailable: true, openMethod: {cellClick: true}},
         isInsertUpAvailable: true,
         isInsertDownAvailable: true,
         isMoveAvailable: true,
         isDeleteAvailable: true,
         canEditHeaderRow: true
    }

Row dropdown settings. If displaySettings object's openMethod property has cellClick set to true - simply click on the left-most row cell to open the dropdown. If openMethod is overlayClick - hover over the left-most cell and click on the overlay.
The canEditHeaderRow property denotes whether this dropdown can be used to change the header row e.g. move or delete it, therefore it does not open on header row when set to false.

Example​

<active-table
  rowDropdown='{"displaySettings":{"isAvailable": true, "openMethod": {"overlayClick": true}}, "canEditHeaderRow": false}'
></active-table>

maxRows​

  • Type: number
  • Default: unset

Maximum number of rows allowed (including header row).

Example​

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

dragRows​

  • Type: boolean
  • Default: true

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

Example​

<active-table dragRows="true"></active-table>
note

Dragging rows is not available when using pagination or filter features.

displayAddNewRow​

  • Type: boolean
  • Default: true

A toggle for a clickable '+ New' row at the bottom of the table which is used to add new empty rows.
You can set the add new row style via frameComponentsStyles.

Example​

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