Page History
(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.
...
- dataTestId — Sets the testing hook ID for automated testing. For example, setting it to "orders-table" allows test scripts to reliably locate this component.
Guidelines
Technical Documentation for Backend Developers
Getting data
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/overview
Guidelines
Technical Documentation for Backend Developers
Getting data
Component support paginable response Endpoint standard for open specification
As mentioned before specific field can be mapped to adjust response (e.g. content → data)
...
| Do | Don’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. |
...
