Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

  • 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

DoDon’tArticle setting(s)
Bind to a stable field path and give the column a unique handle.Rely on implicit positions or unlabeled columns.dataField, id
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.
  • 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.