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

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

Overview

  • The Dynamic Table displays data in rows and columns.
  • It can show a header with title, subtitle, and controls.
  • Rows support selection and optional expandable details.
  • Data loading supports pagination and mapped request/response fields.
  • Optional features include search, grouping, filtering, column chooser, CRUD actions, and Excel export.

...

Table is requesting to specific endpoint with data set based on context (in this case table row).

Accessibility

...

Usage

  • Configure per-row actions directly on the table: place high-frequency actions as inline icons via columnCustomProps, and move secondary actions into the overflow menu with columnOverflowMenus.
  • Expose a stable selector for testing and monitoring by setting dataTestId.
  • Control whether typing immediately edits a cell with editOnkeyPress (enable for data entry; disable for read-first review).

Sizing & Layout

  • Keep action density readable: limit inline icons defined in columnCustomProps; route additional/low-priority actions to columnOverflowMenus.

Interactions & Events

  • Use ON_TABLE_ROW_CLICK for primary navigation or to reveal details.

Content & Localization

  • Keep action labels concise in the configurations where they are defined (inline icons in columnCustomProps, menu items in columnOverflowMenus). Tooltips are supplemental and not required by this component.

Dos & Don’ts

DoDon’t
For fast data entry, set enterKeyAction: "startEdit" (optionally with editOnkeyPress: true) so users can type immediately.Force extra clicks before typing in entry workflows.
Match focus traversal to reading order using enterKeyDirection (e.g., "row" for left→right tables).Move focus in a direction that conflicts with the layout.
Keep only primary actions as inline icons and place the rest in columnOverflowMenus.Pack rows with many small icons that compete for attention.
Configure deletes with removeElementDataSourceId and removeEntityHttpRequestParametersMap.Fire ad-hoc delete calls that ignore row context.
React to edit start/cancel/save with the table’s events to keep UI and data in sync.Ignore the edit lifecycle and risk data/UI drift.
Use ON_TABLE_ROW_CLICK for navigation or detail reveal.Hide navigation behind a tiny icon only.
Set keyboard behavior on ON_INIT for predictability.Change Enter behavior mid-session without reason.
Provide a stable selector via dataTestId.Depend on brittle DOM/text selectors.

Accessibility

  • Keyboard control can be tailored by configuring enterKeyAction and enterKeyDirection to align with reading order.
  • Reduce accidental edits by setting editOnkeyPress based on context (on for dedicated entry, off for review).
  • Maintain clear targets by limiting inline icons (columnCustomProps) and moving secondary actions to columnOverflowMenus.