Versions Compared

Old Version 1

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

Saved on

compared with

New Version Current

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 Selection

...

confluencePath: Data Entry/Select

Table Selection

Overview

  • The Dynamic Table Selection Component is a form control for choosing items.
  • It lets users select one or many entries from a table-based dropdown.
  • It combines a form field with a data grid to handle large or complex datasets.
  • It is used when a table view is clearer than a standard dropdown.
  • It supports single and multiple selection behaviors.

...

  • validation — Configures validation rules for the table selection control, including:
  • required — When set to true, the field must have a selection before the form can be submitted. This ensures users make a selection when the information is essential.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=4830-274143&t=2GNf1jEXqXOrnDUK-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/app-composer/table

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Prefer this control when users must pick from structured records and a table view clarifies choice. Configure visible columns with elements and uniquely identify rows with keyExpr to keep selections stable across paging and refresh.
  • Match the cardinality of the business field to the component by setting selectionMode to "single" for one value or "multiple" for sets.
  • Use readonly: true to show the current selection without permitting edits (e.g., confirmation or audit views).
  • Require a choice when the field is mandatory via validation.required: true; initialize known defaults with defaultValue.
  • For large datasets, enable server-side paging with enablePagination: true and a tuned pageSize; align API naming via paginationRequestParamsMap and paginationResponseFieldsMap.
  • Persist user progress in long flows by turning on saveInLocalStorage.
  • Make search effective by scoping it to the most discriminative fields using fieldsUsedInSearch.

Sizing & Layout

  • Show only columns that help decision-making and put the most informative ones first by ordering elements accordingly.
  • Balance scan length with paging by tuning pageSize (e.g., fewer rows for denser columns, more rows for sparse tables).

Visibility & Authorization

  • Hide the field completely when it must not appear by setting hidden: true; when it may appear but not be changeable, disable interaction with authorizationDisable.

Content & Localization

  • Name the submitted field explicitly with dataField and route it to the correct HTTP location using controlsRequestType (BODY/HEADER/PATH).
  • Provide stable automation hooks via dataTestId for tests and accessibility checks.

Dos & Don’ts

DoDon’tArticle setting(s)
Set selectionMode: "single" for single-value fields; "multiple" only when sets are valid.Leave the default and allow incorrect cardinality.selectionMode
Use a stable backend key for selection by setting keyExpr (e.g., customerId).Use a label column or non-unique field as the key.keyExpr
Show only decisive columns and order them for scanning via elements.Expose every attribute; bury key info at the end.elements
Enable paging and set a sensible pageSize for large data.Load entire collections at once.enablePagination, pageSize
Map client/server paging and data fields explicitly.Assume server names match the client’s defaults.paginationRequestParamsMap, paginationResponseFieldsMap, dataSourcePath
Persist the user’s picks across reloads in long flows.Force users to reselect after a refresh.saveInLocalStorage
Make the field required when it’s mandatory; seed a known defaultValue when appropriate.Depend on external validation alone.validation, required, defaultValue
Disable for permission gaps to explain in-place why it can’t change.Hide the control when users should see but not edit it.authorizationDisable
React immediately to changes using the value-change event.Poll for changes or delay updates.events.ON_VALUE_CHANGE
Send complex filters in the request body and normalize operators.Pack long filters into query strings with mismatched operators.useFiltersInRequestBody, filterOperatorsMap

Accessibility

  • Maintain stable, unique selection references using backend IDs via keyExpr.
  • Prevent non-functional interaction by setting readonly: true during view-only states and disabling by policy with authorizationDisable.
  • Ensure mandatory input is programmatically determinable with validation.required.
  • Reduce cognitive load by exposing only necessary columns and ordering them with elements, and by paging long lists using enablePagination and pageSize.
  • Avoid color-only meaning; convey state via explicit readonly/authorizationDisable settings and clear column labels configured in elements.
  • Improve findability with targeted search fields using fieldsUsedInSearch.