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

Table column

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11525-23378&t=ftfrOGkPzlG2GaTo-1

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

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.

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

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.
• Expose stable hooks for accessibility testing: dataTestId.
• 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.