Skip to main content

Column Type

Properties related to column types.

defaultColumnTypeName​

  • Type: string
  • Default: First available type to not have validation -> First available type -> "Text"

Name for the default column type.

Example​

<active-table defaultColumnTypeName="Label"></active-table>

availableDefaultColumnTypes​

  • Type: DEFAULT_COLUMN_TYPES[]
  • Default: ["Text", "Number", "Currency", "Date d-m-y", "Date m-d-y", "Checkbox", "Select", "Label"]

Used to overwrite the available default column types. If array is set to empty ([]) and there are no customColumnTypes, the default type will be automatically set to "Text".

Example​

<active-table availableDefaultColumnTypes='["Number"]'></active-table>

customColumnTypes​

An array of custom column types which are automatically appended to the availableDefaultColumnTypes types array.

Example​

<active-table
  customColumnTypes='[{
    "name": "Custom type",
    "select": {
      "options": ["Pass", "Fail"],
      "canAddMoreOptions": false
    },
    "iconSettings": {
      "reusableIconName": "select"
    }}]'
  availableDefaultColumnTypes="[]"
></active-table>

Types​

Shared object property types related to column types:

ColumnType​

Details for creating a column type.
If textValidation and customTextProcessing are both provided, customTextProcessing will be executed first.
The select, label, calendar and checkbox properties facilitate unique features and if more than one of these is provided - only the first one will be used in that order.

TextValidation​

  • Type: {
         func: (cellText: string) => boolean,
         setTextToDefaultOnFail?: boolean,
         failedStyle?: NoDimensionCSSStyle,
    }
  • Default: { setTextToDefaultOnFail: true }

Used to enforce cell text validation. This operates only in the data cells and not the header.
The func property takes a function that will be called when the text is initially placed in the cell and when it changes. The function must return true if the text is correct or false if it is incorrect. setTextToDefaultOnFail will reset the cell text to value defined inside defaultText if the function returns false.
failedStyle is used to change the cell styling if the function returns false.

Example validation for if number is higher than 20​

<active-table
  customColumnTypes='[
    {
      "name": "Custom type",
      "textValidation": {
        "func": "(cellText) => Number(cellText) > 20",
        "setTextToDefaultOnFail":false,
        "failedStyle":{"color":"red"}
  }}]'
></active-table>

CustomTextProcessing​

Augments cell after its text is changed. changeTextFunc is a function that processes cell text and returns same/new text depending on its contents. changeStyleFunc is a function that processes cell text and returns a styling object for the cell depenging on its contents.

Example processing for currency: 20 (red) < 100 (yellow) < more (green)​

<active-table
  customColumnTypes='[
  {
    "name": "Custom type",
    "customTextProcessing": {
      "changeTextFunc": "(cellText) => `$${Number(cellText.replace(/[^0-9.-]+/g,\"\"))}`",
      "changeStyleFunc": "(cellText) => {
        const moneyNumber = Number(cellText.replace(/[^0-9.-]+/g,\"\"));
        if (moneyNumber < 20) return {backgroundColor: `#ff3232`};
        if (moneyNumber < 100) return {backgroundColor: `#ffff00`};
        return {backgroundColor: `#00ac00`};
      }"
  }}]'
></active-table>

Sorting​

  • Type: {
         ascendingFunc: (cellText1: string, cellText2: string) => number,
         descendingFunc: (cellText1: string, cellText2: string) => number,
    }

Facilitates column cell sorting capabilities. The functions are executed using the standard JavaScript .sort method and are expected to return a negative value (< 0) if cellText1 is less than cellText2, zero (0) if both arguments are equal, or a positive value (> 0) if cellText1 is greater than cellText2.

Example sorting for numbers​

<active-table
  customColumnTypes='[
    {
      "name": "Custom type",
      "sorting": {
        "ascendingFunc": "(cellText1, cellText2) => Number(cellText1) - Number(cellText2)",
        "descendingFunc": "(cellText1, cellText2) => Number(cellText2) - Number(cellText1)"
  }}]'
></active-table>

IconSettings​

Defines column type icon properties.
reusableIconName allows the icon to reuse of the existing default type icons.
svgString is the full svg element string containing all DOM tags. Make sure to escape the quotes - change " to \" (An easy way to do this is to stringify it using JSON.stringify()). If the string is defined directly in HTML (attribute), you will need to escape the first less than (<) character by replacing it with &lt.
containerStyles allows the icon dimensions to be customised when displayed in the columnDropdown and in the header. By default, the columnDropdown dimension properties are also used for the header however if they don't fit the headerCorrections object can be used to change them.

Example triangle icon​

<active-table
  customColumnTypes='[
  {
    "name": "Custom type",
    "iconSettings": {
      "svgString": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"10\" width=\"16\"> <polygon points=\"9,1 3,15 15,15\" class=\"triangle\" /></svg>",
      "containerStyles": {
        "dropdown": {"marginLeft": "-2.5px", "marginRight": "4px", "marginTop": "2px"},
        "headerCorrections": {"marginTop": "-1px", "marginLeft": "-2px"}
  }}}]'
  }'
></active-table>
tip

Make sure the svg tag contains the xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" attributes. The backslash \ syntax is only used when setting customColumnTypes as an attribute (full string) to escape its quotes and is not needed when assigned as a property.

CellDropdown​

Dropdown customization properties for select and label properties in the ColumnType object.
dropdownStyle and optionStyle are used to apply specific dropdown styling aspects.
options property defines custom options within the dropdown and uses the SelectOptions type to define individual options when used for a select dropdown and LabelOptions if used for label.
canAddMoreOptions controls whether new options can be added into the dropdown. If false then column cell text that is not in the options array is automatically removed.

CellDropdownStyle​

  • Type: {
         width?: string,
         paddingTop?: string,
         paddingBottom?: string,
         marginTop?: string,
         marginLeft?: string,
         textAlign?: string,
         border?: string,
    }

Styling properties for the select and label dropdowns.

SelectOptions​

  • Type: string[]

Example for Select​

<active-table
  customColumnTypes='[
    {
      "name": "Custom select type",
      "select": {
        "dropdownStyle": {"border": "0.5px solid #00000066"},
        "optionStyle": {"textColor": "#606060"},
        "options": ["Elephant", "Tiger", "Giraffe"],
        "canAddMoreOptions": false
      }}]'
></active-table>

LabelOptions​

  • Type: {text: string; backgroundColor?: string}[]
  • Default: if backgroundColor is not provided then it is set to a random color

Example for Label​

<active-table
  customColumnTypes='[
    {
      "name": "Custom label type",
      "label": {
        "options": [{"text":"Elephant", "backgroundColor": "#4ddd3878"}, {"text":"Tiger", "backgroundColor": "#ff606082"}, {"text":"Giraffe", "backgroundColor": "#ff940f8f"}],
        "canAddMoreOptions": true
    }}]'
></active-table>

Calendar​

  • Type: {
         toYMDFunc: (cellText: string) => YMDFormat,
         fromYMDFunc: (YMD: YMDFormat) => string
    }

Adds a hoverable calendar icon element to each data cell. When a cell is focused - a date picker overlay is opened which the user can use to select the date they need.
The toYMDFunc and fromYMDFunc functions are strictly used for converting cell text into a format (YMDFormat) the calendar API accepts and back to the original format when a new date is chosen.

YMDFormat​

  • Type: [string, string, string, string?, string?, string?, string?]

Date format used by the Date Picker. The tuple contents translate to year / month / day (as digits e.g. '2022') and optionally hours / minutes / seconds / milliseconds (not used by the picker but may be required for a custom Calendar type).

Example for custom d/m/y type​

<active-table
  customColumnTypes='[
    {
      "name": "Custom d/m/y type",
      "calendar": {
        "toYMDFunc": "(cellText) => { const integerArr = cellText.match(/\\d+/g); return [integerArr[2], integerArr[1], integerArr[0]]; }",
        "fromYMDFunc": "(YMD) => { return [YMD[2], YMD[1], YMD[0]].join(`/`); }"
    }}]'
  defaultColumnTypeName="Custom d/m/y type"
></active-table>
danger

The above code serves as an example and the toYMDFunc function will break if cells do not adhere to the d/m/y format. It is advisable to always analyze the incoming cellText value format and return a default value if it is not what was expected. Additionally, it is highly recommended to supplement calendar with the use of textValidation and customTextProcessing properties to make sure cell text is always in the correct format.

Checkbox​

  • Type: boolean

Replaces cell text with a checkbox.
This type automatically comes with a predefined customTextProcessing property in the ColumnType that uses "", "0", "00" and "false" values to represent the checkbox as unchecked and all the other values as checked. You can overwite it with your own changeTextFunc function that would return a string of "true" when the checkbox should be checked and "false" when it should be unchecked.
The onCellUpdate and onDataUpdate properties will return string "true" if the checkbox is checked and "false" if unchecked.

Example​

<active-table
  customColumnTypes='[
    {
      "name": "Custom checkbox type",
      "checkbox": true
    }]'
  defaultColumnTypeName="Custom checkbox type"
></active-table>

DEFAULT_COLUMN_TYPES​

  • Type: "Text" | "Number" | "Currency" | "Date d-m-y" | "Date m-d-y" | "Checkbox" | "Select" | "Label"

Default column type names.