feat: add composable low-level table components (TableRoot, TableHead, TableRow, TableCell, and more) by gethinwebster · Pull Request #4977 · cloudscape-design/components

gethinwebster · 2026-09-07T13:54:35Z

What this adds

A set of low-level, composable table components — TableRoot, TableHead, TableHeaderRow, TableHeaderCell, TableBody, TableRow, and TableCell. They let a consumer assemble a table from primitives, as a lower-level alternative to the existing high-level Table component.

How they are built

Rather than reimplementing table cell and row markup and styling from scratch — which would risk drifting visually from the existing Table — these components are built on the same internal building blocks the existing Table already uses for its own cells and rows. The existing Table is refactored to compose those same building blocks.

The result is a single shared implementation of the cell/row box model and its visual states (selection, shading, dividers, spacing), instead of two implementations that could diverge over time.

Effect on the existing Table

The existing Table renders exactly as before. The refactor only changes which internal pieces it composes, not the markup or styles it produces. The new components' additional styling is keyed on markers the existing Table never sets, so the shared styles are reused (not duplicated) and stay inert for the existing Table.

Verification

The existing Table is confirmed visually unchanged across selection, striping, sticky columns, inline editing, loading/empty, footer, and grouped-header states.
The new components are checked for visual and behavioural parity with the equivalent existing-Table output — including selection-control alignment and the absence of any content shift when a row's selection is toggled.
Full build, linting, unit tests, and the generated API / test-utils / documentation artifacts all pass.

Notes for reviewers

This builds on the recently merged change that deduplicated table cell spacing and moved first/last-row edge borders to CSS, so shared spacing lives in one place.
The change is organized as two commits: one adds the new components (with demo pages and tests), and one refactors the existing Table to build on the shared internals.

codecov · 2026-09-08T16:34:24Z

Codecov Report

❌ Patch coverage is 98.97959% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.67%. Comparing base (711f084) to head (8658af9).

Files with missing lines	Patch %	Lines
src/table-root/internal.tsx	92.00%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #4977    +/-   ##
========================================
  Coverage   97.66%   97.67%            
========================================
  Files         960      985    +25     
  Lines       31368    31551   +183     
  Branches    11592    11638    +46     
========================================
+ Hits        30637    30817   +180     
- Misses        724      727     +3     
  Partials        7        7

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

🟡 Changes recommended

ARIA counts and multi-sort semantics are incorrect, capped flex sizing drops weights, and the PR title violates the required format.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Suppressed comments (2)

src/table-root/internal.tsx:43

aria-rowcount counts every row in the accessibility tree, including the header. This API describes ariaRowcount as the number of data rows, and TableRow.ariaRowindex starts data rows at 2, so forwarding the value unchanged makes the last virtualized row's index exceed the declared count (the demo declares 10,000 but reaches row index 10,001). Add the header row when emitting the attribute, as the existing Table does in src/table/table-role/table-role-helper.ts:36-40, and update the assertions accordingly.
src/table-root/use-table-root.ts:27
Supplying maxWidth silently discards a flexible column's size.flex: for example, flex weights 1 and 2 both compile to the same minmax(..., 300px) track. This contradicts the documented proportional size behavior while the public type permits the combination. Either preserve the weight in the capped-track implementation or make maxWidth and size.flex mutually exclusive in the type and documentation.

Files reviewed: 61/61 changed files
Comments generated: 2
Review effort level: Balanced

Copilot

🟡 Changes recommended

Shared context leaks into nested high-level tables, and auto-layout edge rows can shift when selection changes.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Files reviewed: 62/62 changed files
Comments generated: 3
Review effort level: Balanced

+    const { columnLayout } = useTableContext();
+    const variant = useRowVariant();
+    const isVisualRefresh = useVisualRefresh();


+    const { columnLayout } = useTableContext();
+    const isVisualRefresh = useVisualRefresh();
+    const isGrid = columnLayout.type === 'grid';
+    const mergedNativeAttributes = isGrid ? { ...nativeAttributes, role: 'columnheader' as const } : nativeAttributes;


Copilot

🟡 Changes recommended

The scroll viewport is not keyboard-accessible, and selected-row outlines are incorrect when grid tracks overflow.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Files reviewed: 62/62 changed files
Comments generated: 2
Review effort level: Balanced

Copilot

🟡 Changes recommended

Grid rows can lose column alignment, and reserved variant attributes can be overridden by consumer data attributes.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Files reviewed: 62/62 changed files
Comments generated: 3
Review effort level: Balanced

+  const selectedDataAttribute = variant === 'selected' ? { 'data-variant-selected': 'true' } : undefined;
+  const shadedDataAttribute = variant === 'shaded' ? { 'data-variant-shaded': 'true' } : undefined;


+  min-inline-size: 100%;
+  inline-size: max-content;


+  const scrollRegionProps = isScrollable
+    ? {
+        role: ariaLabel || ariaLabelledby ? ('region' as const) : undefined,
+        tabIndex: 0,
+        'aria-label': ariaLabel,


…aderCell/Body/Row/Cell) Public atomic table components built on internal substrates extracted from the existing Table, plus the shared cell-base geometry partial, demo pages, unit tests, and generated test-utils/documenter snapshots.

…ell dedup Delegate the existing Table's td/th elements to InternalTableCell/ InternalTableHeaderCell (atomic-default-on, with disableContentWrapper/ disableDivider/suppressBlock*Placeholder opt-outs for the classic path), extract shared cell geometry into the cell-base partial, migrate first/last-row edges to positional CSS, and fix atomic-grid selection-control centering. Also regenerate the generated-artifact snapshots and fix the test-utils finder pluralization for the new components.

gethinwebster deployed to dev-pages-react18 September 7, 2026 14:10 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 7, 2026 14:10 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 7, 2026 14:15 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 8, 2026 11:39 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 8, 2026 11:39 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 8, 2026 11:44 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 8, 2026 12:34 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 8, 2026 12:34 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 8, 2026 12:39 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 8, 2026 15:09 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 8, 2026 15:09 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 8, 2026 15:15 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 8, 2026 15:36 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 8, 2026 15:36 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 8, 2026 15:49 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 8, 2026 15:49 — with GitHub Actions View deployment

gethinwebster had a problem deploying to allure-report September 8, 2026 16:01 — with GitHub Actions Failure

gethinwebster deployed to dev-pages-react16 September 8, 2026 16:28 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 8, 2026 16:28 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 8, 2026 16:51 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 9, 2026 10:55 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 9, 2026 10:55 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 9, 2026 11:01 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 9, 2026 11:22 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 9, 2026 11:22 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 9, 2026 11:27 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 9, 2026 12:09 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 9, 2026 12:09 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 9, 2026 12:17 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 11, 2026 08:41 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 11, 2026 08:41 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 11, 2026 08:47 — with GitHub Actions View deployment

gethinwebster force-pushed the dev-v3-gethinw-table-cell-extract branch from 4e53624 to 7a55898 Compare September 11, 2026 08:52

gethinwebster deployed to dev-pages-react16 September 11, 2026 08:55 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 11, 2026 08:55 — with GitHub Actions View deployment

gethinwebster requested a balanced review from Copilot September 11, 2026 08:56

Copilot started reviewing on behalf of gethinwebster September 11, 2026 08:57 View session

gethinwebster deployed to allure-report September 11, 2026 09:00 — with GitHub Actions View deployment

Copilot AI reviewed Sep 11, 2026

View reviewed changes

Comment thread pages/table-root/sorting.page.tsx Outdated

Comment thread pages/table-root/selection.page.tsx Outdated

gethinwebster changed the title ~~feat(table): add composable low-level table components (TableRoot, TableHead, TableRow, TableCell, …)~~ feat: add composable low-level table components (TableRoot, TableHead, TableRow, TableCell, and more) Sep 11, 2026

gethinwebster force-pushed the dev-v3-gethinw-table-cell-extract branch from 7a55898 to f9668ba Compare September 11, 2026 09:38

gethinwebster deployed to dev-pages-react18 September 11, 2026 09:41 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 September 11, 2026 09:41 — with GitHub Actions View deployment

gethinwebster requested a balanced review from Copilot September 11, 2026 09:42

Copilot started reviewing on behalf of gethinwebster September 11, 2026 09:42 View session

gethinwebster deployed to allure-report September 11, 2026 09:46 — with GitHub Actions View deployment

Copilot AI reviewed Sep 11, 2026

View reviewed changes

gethinwebster force-pushed the dev-v3-gethinw-table-cell-extract branch from f9668ba to fe931fd Compare September 11, 2026 10:39

gethinwebster deployed to dev-pages-react16 September 11, 2026 10:41 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 11, 2026 10:41 — with GitHub Actions View deployment

gethinwebster deployed to allure-report September 11, 2026 10:46 — with GitHub Actions View deployment

gethinwebster force-pushed the dev-v3-gethinw-table-cell-extract branch from fe931fd to b811703 Compare September 11, 2026 11:02

gethinwebster deployed to dev-pages-react16 September 11, 2026 11:05 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 September 11, 2026 11:05 — with GitHub Actions View deployment

gethinwebster force-pushed the dev-v3-gethinw-table-cell-extract branch from b811703 to 7177e9b Compare September 11, 2026 11:08

Copilot AI reviewed Sep 11, 2026

View reviewed changes

Comment thread src/table-root/internal.tsx Outdated

Comment thread src/table-row/styles.scss

Copilot AI reviewed Sep 11, 2026

View reviewed changes

gethinwebster added 2 commits September 11, 2026 17:00

Navigation Menu

Uh oh!

feat: add composable low-level table components (TableRoot, TableHead, TableRow, TableCell, and more) - #4977

feat: add composable low-level table components (TableRoot, TableHead, TableRow, TableCell, and more)#4977
gethinwebster wants to merge 2 commits into
mainfrom
dev-v3-gethinw-table-cell-extract

gethinwebster commented Sep 7, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Sep 8, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const selectedDataAttribute = variant === 'selected' ? { 'data-variant-selected': 'true' } : undefined;
		const shadedDataAttribute = variant === 'shaded' ? { 'data-variant-shaded': 'true' } : undefined;

Uh oh!

Conversation

gethinwebster commented Sep 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this adds

How they are built

Effect on the existing Table

Verification

Notes for reviewers

Uh oh!

codecov Bot commented Sep 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Suppressed comments (2)

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gethinwebster commented Sep 7, 2026 •

edited

Loading

codecov Bot commented Sep 8, 2026 •

edited

Loading