Skip to main content

Header

Properties related to the header cells.

headerStyles​

Styling details for the header elements in default and mouse hover states. To prevent the frame component (index and add new column) from inheriting the header style, set inheritHeaderColors property in frameComponentsStyles to false.

Example​

<active-table
  headerStyles='{
    "default": {
      "backgroundColor": "#efefef",
      "borderBottom": "unset",
      "fontWeight": "700",
      "fontSize": "15px"
    },
    "hoverColors": {
      "backgroundColor": "#d2d2d2"
    }
  }'
></active-table>

isHeaderTextEditable​

  • Type: boolean
  • Default: true

Controls if cell text can be edited for header cells.

Example​

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

allowDuplicateHeaders​

  • Type: boolean
  • Default: true

Allows multiple columns to have the same header text. If set to false and a duplicate is found the header text is defaulted to the value inside defaultText.

Example for false​

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

displayHeaderIcons​

  • Type: boolean
  • Default: true

Displays an icon beside header text that represents the column type.

Example for false​

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

headerIconStyle​

  • Type: {
         filterColor?: string,
         scale?: {x?: number, y?: number}
    }
  • Default: {
         iconFilterColor: 'brightness(0) saturate(100%) invert(34%) sepia(0%) saturate(1075%) hue-rotate(211deg) brightness(96%) contrast(90%)',
         scale: {x: 1.1, y: 1.1}
    }

Styling details for the column header icons. The color is set by using the filterColor property which requires a filter string (the reason for this is because the icon is an SVG element) that can be retrieved using the cssfilterconverter tool . Use scale to resize the icon dimensions.

Example​

<active-table
  headerIconStyle='{
    "filterColor": "brightness(0) saturate(100%) invert(16%) sepia(85%) saturate(1892%) hue-rotate(210deg) brightness(88%) contrast(103%)",
    "scale": {"x": 1.5, "y": 1.5}
  }'
></active-table>
  • Type: boolean
  • Default: false or if overflow property is defined set to true

Header row will remain at the top of the table when there is overflow in the table or a parent element.

Example​

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

The scrollbar in this example is located on the parent div element, however when using the overflow property it would be placed directly on the actual table component.

dataStartsAtHeader​

  • Type: boolean
  • Default: false

Starts the index column count at header row and if pagination is used the header row will not be displayed in pages after the first.

Example​

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