You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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

Table column

Overview

  • The Table column defines one column in the table and binds it to a data field.
  • It shows a header caption with multi-language support.
  • It controls how values appear and behave, including formatting, sizing, visibility, grouping, sorting, and editing.
  • It supports template-based cell rendering (including conditional and custom types like a progress bar) and can show a footer summary.

Example Column

Specs

Tokens

Token Description
displayName Display name in structure panel.
dataField Field path in data source to bind.
id Unique identifier for programmatic reference.
captionTranslations Header caption with multi-language support.
dataType Content type affecting formatting and sorting.
width Column width in pixels.
minWidth Minimum resizable width in pixels.
allowResizing Enables user column resizing.
visibility Visibility mode: VISIBLE, COLUMN_CHOOSER, REMOVED.
groupIndex Grouping priority index.
allowSorting Enables sorting by this column.
allowEditing Controls editability of cell values.
useCellTemplate Enables template-based cell rendering.
summaryType Footer summary type (sum, min, max, avg, count).
defaultCellTemplate Default template type for cells.
columnCellTemplateRules Rules deciding which template applies.
customCellTemplate Config for custom template types.
Required Datasource Progress Bar template expects numeric values.
accuracy Progress Bar label decimal places.
useCustomScale Progress Bar uses percent or custom max.
maxValue Progress Bar custom maximum value.
dataTestId Testing hook attribute for automation.

Structure

(Configured in General Properties)

  • 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"}.

(Configured inVisual 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".
  • 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.

(Configured in 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.

Styling

(Configured in Visual Properties)

  • 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.
  • 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.

Actions & Variants

(Configured in Column Visual)

  • allowResizing — Determines whether users can resize this column. When set to true, users can adjust column width by dragging its edges.
  • 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.

Tests

(Configured in Testing)

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

Guidelines

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.

Accessibility

[NO DATA AVAILABLE]

  • No labels