(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.
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.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11525-23378&t=ftfrOGkPzlG2GaTo-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id6/1-data-grid/table/column-grouping
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.
Usage
- Pick the value semantics with
dataType so formatting and sort behavior are correct.
- Turn on
useCellTemplate when cells need non-default rendering.
- Surface a footer aggregate only when it adds value, by setting
summaryType per column.
Sizing & Layout
- Control width with
width and protect readability with minWidth; allow user control with allowResizing.
- Use
groupIndex only when this column should participate in grouped views; leave empty when grouping is not intended.
States & Feedback
- Sorting affordance/state is enabled per column via
allowSorting.
- Editability is governed per column via
allowEditing (editable vs. read-only).
- Cell presentation state is driven by
useCellTemplate + columnCellTemplateRules, with defaultCellTemplate as fallback.
Data-Driven / Conditional Behavior
- Define per-cell rendering rules with
columnCellTemplateRules; ensure a default via defaultCellTemplate.
- For progress-bar cells, ensure numeric input (
Required Datasource) and configure label precision with accuracy.
- When values are not percentages, set
useCustomScale: true and supply maxValue so bar length and label scale correctly.
- Add custom formatting/affordances (e.g., icon, date format, text transforms) via
customCellTemplate when supported by the template type.
Visibility & Authorization
- Control initial presence with
visibility (VISIBLE, COLUMN_CHOOSER, REMOVED) only. Role/authorization gating is not exposed by this component.
Content & Localization
- Localize the header text using
captionTranslations.
- Match display and behavior to the data by setting
dataType.
Dos & Don’ts
| Do |
Don’t |
Article setting(s) |
| Localize the header caption. |
Hard-code a single-language header. |
captionTranslations |
| Declare the correct content type to get sensible formatting/sorting. |
Leave everything as string and expect numeric/date sorting to work. |
dataType, allowSorting |
| Protect readability by setting a width and a sensible minimum; allow user resizing. |
Ship ultra-narrow columns with no resize affordance. |
width, minWidth, allowResizing |
| Keep optional columns off by default but discoverable. |
Remove optional columns entirely or flood the default view. |
visibility: COLUMN_CHOOSER, visibility: REMOVED |
| Make derived or locked data read-only. |
Allow editing on values that must not change. |
allowEditing: false |
| Provide a fallback template for unmatched cases. |
Define conditional templates with no default, causing blank cells. |
defaultCellTemplate, useCellTemplate, columnCellTemplateRules |
| Show meaningful aggregates only when helpful. |
Display footer summaries on every column without purpose. |
summaryType |
| Configure progress-bar cells with the right scale and clear numeric labels. |
Treat non-percentage data as 0–100% or omit label precision. |
Required Datasource, useCustomScale, maxValue, accuracy |
| Use grouping deliberately and only where it adds clarity. |
Assign multiple columns the same primary group or group without intent. |
groupIndex |
Accessibility
- Provide localized, concise column headers:
captionTranslations.
- Ensure values are interpreted correctly by assistive tech via correct typing/formatting:
dataType, plus template-driven formatting with defaultCellTemplate/customCellTemplate where applicable.
- Avoid color-only meaning in custom cells by including text or numeric labels (e.g., progress-bar label via
accuracy): customCellTemplate, accuracy.
- Prevent accidental edits on non-interactive data:
allowEditing: false.
- Improve readability by preventing overly narrow columns and enabling user control:
minWidth, allowResizing.
- Reduce initial clutter while keeping content discoverable:
visibility: COLUMN_CHOOSER.