(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Table column

General Properties

Table Column General Properties

  • displayName - Sets the display name of the column component shown in the structure panel. For example, setting it to "Order Date" allows for easier identification of this column's purpose in the component tree.

  • dataField - Specifies the field path in the data source to bind to this column. For example, setting it to "order.date" will display the date property inside each order object. It supports nested properties using dot notation.

  • id - Defines a unique identifier for the column that can be referenced programmatically. For example, "orderDateCol" would allow targeting this specific column for customization.

  • captionTranslations - Sets the column header text that will be displayed to users, with support for multiple languages. For example, {"en-US": "Order Date", "de-DE": "Bestelldatum"}.

Visual Properties

Table Column Visual Properties

  • dataType - Defines the data type of the column content which affects formatting and sorting behavior. Valid values include "string", "number", "date", "boolean", and "datetime".

  • width - Specifies the width of the column in pixels. For example, setting it to "150" will make the column 150 pixels wide, ensuring consistent layout.

  • minWidth - Sets the minimum width the column can be resized to in pixels. For example, "80" ensures the column doesn't become too narrow to read properly.

  • allowResizing - Determines whether users can resize this column. When set to true, users can adjust column width by dragging its edges.

  • visibility - Controls how the column appears in the table with options: "VISIBLE" (always shown), "COLUMN_CHOOSER" (initially hidden but available in column chooser), or "REMOVED" (completely removed from table).

  • groupIndex - Sets the grouping priority for this column, where "1" would make it the primary grouping field, "2" would make it secondary, etc. Empty value means no grouping.

  • allowSorting - Enables or disables the ability to sort the table based on this column's values. When true, clicking on the column header will sort the data.

  • allowEditing - Controls whether the values in this column can be edited by users. When false, the column will be read-only even if the table has editing enabled.

  • useCellTemplate - Enables the use of a custom template for rendering cell content. When true, specialized visualization can be applied to the column data.

  • summaryType - Specifies the type of summary to display for this column in the footer. Options include "sum", "min", "max", "avg", and "count". For example, setting to "sum" will show the total of all values.

Cell Template Properties

Table Column Cell Template

  • defaultCellTemplate - Defines the default template type to render cells when no conditional rules apply. For example, "date" will format the content as a date.

  • columnCellTemplateRules - Contains an array of rules that determine how cells should be rendered based on conditions. Each rule defines when to apply a specific template type.

  • customCellTemplate - Provides specific configuration for custom cell template types, such as icon configuration, date formats, or text transformation settings.

Cell Templates

Progress Bar Cell Template

Required Datasource

The cell template expects a numeric value in the column.

Properties

  • accuracy - How many decimal places the bar label should display.
  • useCustomScale - Wether the data is in percent (0-100) or uses a custom max value.
  • maxValue - If the progress bar uses a custom scale, this value determines the maximum value that the progress bar is scaled to.

Testing Properties

  • dataTestId - Sets a testing hook attribute for automated testing scripts. For example, "order-date-column" would allow test automation to reliably identify this column.
  • No labels