fix: update DataTable for xs sizing and header association (#707) - #741
Merged
Conversation
6 tasks
Contributor
📖 Docs Preview
|
…ociation - add @SiZe support to Pagination (previously hardcoded to md) - add @SiZe + role="group"/aria-label to DataTable's TableToolbar and forward @SiZe through the toolbar SearchInput to the underlying Search - automatically associate each data-table <td> with its column <th> via the headers attribute, matching upstream React's a11y fix Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
patricklx
force-pushed
the
fix-issue-707
branch
from
August 7, 2026 14:58
be6aad0 to
dda69e5
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #707
Summary
Parity-check update for DataTable against Carbon React (7 upstream commits, incl. #22509, #22322, #22347, #22268, #22169).
Investigated each recent React change:
@carbon/styles, already at 1.112.0. No component code change needed.aria-labelledbysearch landmark labeling (#22347) — already implemented in Ember'ssearch.gts, matches React exactly. No change needed.Paginationhad no@sizeargument at all. Added@size?: 'xs' | 'sm' | 'md' | 'lg'(defaults tomd, matching prior behavior).Toolbar/SearchInput(within DataTable) had no@sizesupport. Added@sizeto the toolbar section (cds--table-toolbar--{size}, plusrole="group"and a defaultaria-label="data table toolbar"), and forwarded@sizethrough the DataTable search wrapper to the already-size-capableSearchprimitive.<td>back to its<th>. Ember's table had noid/headerswiring at all. Added automaticidgeneration on each<th>and a matchingheadersattribute on each<td>rendered viatable.Column, using row-scoped positional tracking (mirrors the existing pattern already used to shareheaders/isExpandable/isCheckableonto the table instance). An explicit@headeroverride is also available for consumers who need to opt out of the automatic association.Since Ember's DataTable doesn't have React's context mechanism,
@sizeis set independently onToolbar,SearchInput,TableandPaginationrather than propagating automatically — consistent with how this component already handles other per-subcomponent args (e.g.@expandable).Changes
pagination.gts: add@sizearg + classdata-table/-toolbar.gts: add@size,role="group", defaultaria-labeldata-table/-search-input.gts: forward@sizeto the underlyingSearchdata-table/-header.gts+data-table/-column.gts+data-table/-row.gts: automaticid/headersassociation between<th>and<td>data-table.md, and a sizes example inpagination.mddata-table-test.gtscovering rendering, header/column association, toolbar sizing, and checkable rows; plus Pagination size coverageTest plan
pnpm buildsucceeds