Page History

...

• 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

Component support paginable response Endpoint standard for open specification
As mentioned before specific field can be mapped to adjust response (e.g. content → data)

Example:

{
  "content": [
    {
      "id": "9f19d7de-d089-46c6-9814-68e8f52b6130",
      "componentName": null,
      "contentType": "BOARDLET",
      "title": "Customer Invoice",
      "createdBy": "john-doe",
      "createdOn": "2025-04-10T11:06:56.570787Z"
    }
  ],
  "totalElements": 100,
  "totalPages": 4,
  "number": 0,
  "size": 25,
  "first": true,
  "last": false,
  "empty": false
}

Create data

Table is sending to backend object based on configured columns.

Update date (standard way, without dialog)

Table is sending back whole data record which get from backend. Even if for instance id column is not visible table will send whole object with modification.

{
  "id": "9f19d7de-d089-46c6-9814-68e8f52b6130",
  "status": "completed",
  "completedDate": "2025-04-25T10:00:00Z"
}

Delete data

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

Accessibility

...

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)

Example:

{
  "content": [
    {
      "id": "9f19d7de-d089-46c6-9814-68e8f52b6130",
      "componentName": null,
      "contentType": "BOARDLET",
      "title": "Customer Invoice",
      "createdBy": "john-doe",
      "createdOn": "2025-04-10T11:06:56.570787Z"
    }
  ],
  "totalElements": 100,
  "totalPages": 4,
  "number": 0,
  "size": 25,
  "first": true,
  "last": false,
  "empty": false
}

Create data

Table is sending to backend object based on configured columns.

Update date (standard way, without dialog)

Table is sending back whole data record which get from backend. Even if for instance id column is not visible table will send whole object with modification.

{
  "id": "9f19d7de-d089-46c6-9814-68e8f52b6130",
  "status": "completed",
  "completedDate": "2025-04-25T10:00:00Z"
}

Delete data

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

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

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.