Page History
(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.
...
- 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)
...
| Do | Don’t | Article setting(s) | Bind to a stable field path and give the column a unique handle. | Rely on implicit positions or unlabeled columns. |
|---|---|---|
| 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 |
...
- Provide localized, concise column headers:
captionTranslations. - Ensure values are interpreted correctly by assistive tech via correct typing/formatting:
dataType, plus template-driven formatting withdefaultCellTemplate/customCellTemplatewhere 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.
