feat: Table Column Groups Table by NathanZlion · Pull Request #4482 · cloudscape-design/components

NathanZlion · 2026-04-30T13:11:59Z

Description

Add Table Column Grouping Feature support for Table Component.

Related links, issue AWSUI-9594, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-05-04T13:53:00Z

Codecov Report

❌ Patch coverage is 98.26087% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.44%. Comparing base (f493264) to head (4b20775).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
src/table/thead.tsx	95.93%	5 Missing ⚠️
src/table/header-cell/group-header-cell.tsx	91.66%	2 Missing ⚠️
src/table/sticky-scrolling.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4482      +/-   ##
==========================================
+ Coverage   97.41%   97.44%   +0.02%     
==========================================
  Files         933      940       +7     
  Lines       29595    30014     +419     
  Branches    10757    10946     +189     
==========================================
+ Hits        28831    29248     +417     
- Misses        716      759      +43     
+ Partials       48        7      -41

☔ View full report in Codecov by Sentry.
📢 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.

pan-kot · 2026-05-12T10:41:34Z

+  totalLeafColumns: number
+): GroupSplit | null {
+  if (!col.isGroup) {
+    return null;


Can we make this more generalized and always return the structure here instead of null (in that case the stickyColumns will equal 0, but then the consumer code will not have to do a null check - so one code branch less).

pan-kot · 2026-05-12T10:43:17Z

+  return useMemo(() => {
+    const visibleIds = visibleColumns
+      ? Array.from(visibleColumns)
+      : columnDefinitions.map((col, idx) => col.id || `column-${idx}`);


We already have the getColumnKey() to be used instead of a custom col.id || column-${idx}

pan-kot · 2026-05-12T10:44:08Z

+      [...columnDefinitions],
+      visibleIds,
+      [...(groupDefinitions ?? [])],
+      columnDisplay ? [...columnDisplay] : undefined


We do we copy columnDisplay here? Can we change calculateHierarchyTree to accept it as readonly instead? Same for column definitions above.

pan-kot · 2026-05-12T10:44:51Z

+  visibleColumns?: Set<string>,
+  columnDisplay?: ReadonlyArray<TableProps.ColumnDisplayProperties>
+) {
+  return useMemo(() => {


Is useMemo really needed here - do we expect calculateHierarchyTree to be heavy in computations?

pan-kot · 2026-05-12T10:46:29Z

+import { TableProps } from '../interfaces';
+import { getVisibleColumnDefinitions } from '../utils';
+
+export interface ColumnInRow<T> {


nit: should we rename it to HeaderRowColumn? Then HeaderRow and HeaderRowColumn are better symmetrical

pan-kot · 2026-05-12T10:46:52Z

+  columnDefinition?: TableProps.ColumnDefinition<T>;
+  groupDefinition?: TableProps.GroupDefinition;
+  parentGroupIds: string[];
+  rowIndex: number;


should rowIndex belong to the HeaderRow?

pan-kot · 2026-05-12T10:48:52Z

+    if (item.type === 'group') {
+      const groupNode = nodeMap.get(item.id);
+      if (!groupNode) {
+        if (isDevelopment) {


the warnOnce already checks for isDevelopment - there is no need to add a separate check

pan-kot · 2026-05-12T10:51:31Z

+        continue;
+      }
+      buildTreeFromColumnDisplay(item.children, nodeMap, groupNode);
+      if (groupNode.children.length > 0) {


I think this line deserves a code comment to explain why we check for children to be non-empty. Btw, can children array include group nodes - or only column nodes? If it can include groups - then this check is not sufficient.

Also, can groupNode.children include column nodes that are not visible with column display?

pan-kot · 2026-05-12T10:53:15Z

+  root: TableHeaderNode<T>
+): void {
+  for (const col of visibleColumns) {
+    /* istanbul ignore next */


Why do we ignore it? We once had a high-sev issue, only reproducible for cases where col.id was not set.

pan-kot · 2026-05-12T10:57:31Z

+  const nodeMap = new Map<string, TableHeaderNode<T>>();
+
+  for (const col of visibleColumns) {
+    if (col.id) {


I would add a code comment explaining why ignoring columns w/o IDs is ok

pan-kot · 2026-05-12T10:58:45Z

+    nodeMap.set(group.id, new TableHeaderNode<T>(group.id, { groupDefinition: group }));
+  }
+
+  // Build tree


nit: The comments like "Build tree" or "Compute layout" are redundant - the corresponding code (new TableHeaderNode(...), computeSubTreeHeights(root)) is clear enough.

pan-kot · 2026-05-12T11:00:18Z

+  if (columnDisplay && columnDisplay.length > 0) {
+    buildTreeFromColumnDisplay(columnDisplay, nodeMap, root);
+  } else {
+    connectFlatColumns(visibleColumns, nodeMap, root);


Why do we call this connectFlatColumns? Should we call it buildTreeFromVisibleColumns - for the symmetry with the other method? This one involves much simpler transformations, but these are transformations nevertheless.

pan-kot · 2026-05-12T11:02:13Z

+  }
+
+  const rows: HeaderRow<T>[] = Array.from(rowsMap.keys())
+    .sort((a, b) => a - b)


why do we perform sorting twice on the same array?

pan-kot · 2026-05-12T11:03:07Z

+
+import styles from './styles.css.js';
+
+export interface TableGroupHeaderCellProps {


Can we share common props with TableHeaderCellProps?

pan-kot · 2026-05-12T11:05:09Z

+  /** When true, this cell is the rightmost child within its parent group. */
+  isLastChildOfGroup?: boolean;
+  /** Determine if the cell is the right most cell of the header */
+  isRightmost?: boolean;


We should not call it isRightmost - as it will be left-most when using RTL direction. I suggest calling this isLastColumn - we already use this name inside table's code.

If the word "column" does not quite apply here semantically - maybe we can just use "isLast"

pan-kot · 2026-05-12T11:06:45Z

+  });
+
+  // Extract only the shadow classes from the boundary subscription
+  /* istanbul ignore next: requires real sticky column state */


What is real sticky column state? Does it require some browser behaviours?

pan-kot · 2026-05-12T11:08:32Z

+  columnGroupId?: string;
+  isRightmost?: boolean;
+  /** Additional className to merge (e.g. boundary shadow classes from a secondary sticky subscription). */
+  extraClassName?: string;


We should call it just className - that is commonly used when we need to attach some classes from the outside.

pan-kot · 2026-05-12T11:09:17Z

+  /** Additional className to merge (e.g. boundary shadow classes from a secondary sticky subscription). */
+  extraClassName?: string;
+  /** Additional ref for boundary sticky subscription (imperatively updates shadow classes). */
+  extraRef?: React.RefCallback<HTMLElement>;


Why is this called extraRef? Is it not just the ref we attach to the th el?

pan-kot · 2026-05-12T11:10:44Z

  stickyColumns: StickyColumnsModel;
  columnId: PropertyKey;
  getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;
+  classOnly?: boolean;


is this one used?

pan-kot · 2026-05-12T11:11:33Z

+    let targetCell =
+      allVisibleCells.length > 0
+        ? findClosestCellByAriaColIndex(allVisibleCells, targetAriaColIndex, delta.x)
+        : /* istanbul ignore next */ findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);


Why is this ignored? The keyboard nav should be testable and tested with unit tests

pan-kot · 2026-05-12T11:12:15Z

+      targetCell =
+        allVisibleCells.length > 0
+          ? findClosestCellByAriaColIndex(allVisibleCells, targetAriaColIndex, delta.x)
+          : /* istanbul ignore next */ findTableRowCellByAriaColIndex(skipRow, targetAriaColIndex, delta.x);


pan-kot · 2026-05-12T11:12:23Z

+      // Jump to the first row after this cell's span (↓) or one row before the cell's start (↑).
+      const skipToRowIndex = delta.y > 0 ? cellRowIndex + cellRowSpan : cellRowIndex - 1;
+      const skipRow = findTableRowByAriaRowIndex(this.table, skipToRowIndex, delta.y);
+      /* istanbul ignore next */ if (!skipRow) {


pan-kot · 2026-05-12T11:14:07Z

+      targetCell = findClosestCellByAriaColIndex(allVisibleCells, skipToColIndex, delta.x);
+      if (!targetCell || targetCell === cellElement) {
+        return null;
+      }


The changes in this file adds lots of complexity. What is the behaviour w/o this changes?

I think there is an opportunity to significantly simplify the code here. Theoretically, the findCell by next col/row index utils should locate the correct element to focus, and might require changes to be aware of col/row spans. It is not clear why changes in the grid nav logic are necessary.

pan-kot · 2026-05-12T11:18:57Z

+ * are only in one <tr> in the DOM but visually occupy multiple rows.
+ */
+export function getAllCellsInRow(table: null | HTMLTableElement, targetAriaRowIndex: number): HTMLTableCellElement[] {
+  /* istanbul ignore next */ if (!table) {


We should test this, not ignore

I guess the problem is that we expect table to always be there - so it is kind of hard to make it be null for this util call. In that case we might check for the table before calling the util instead.

pan-kot · 2026-05-12T11:22:13Z


 const GRID_NAVIGATION_PAGE_SIZE = 10;
-const SELECTION_COLUMN_WIDTH = 54;
+const SELECTION_COLUMN_WIDTH = 40;


Why did we change that?

pan-kot · 2026-05-12T11:22:33Z

    });

+    // Build visible column IDs set for grouping
+    const visibleColumnIds = new Set(visibleColumnDefinitions.map((col, idx) => col.id || `column-${idx}`));


We should use getColumnKey() here

pan-kot · 2026-05-12T11:24:22Z

        {...getTableRoleProps({ tableRole })}
      >
+        {hasGroupedColumns && columnDefinitions && (
+          <colgroup>


should we also use <TableColGroup /> here?

pan-kot · 2026-05-12T11:25:30Z

-    const { getColumnStyles, columnWidths, updateColumn, setCell } = useColumnWidths();
+    const { getColumnStyles, columnWidths, updateColumn, updateGroup, setCell } = useColumnWidths();
+
+    /* istanbul ignore next: resize requires real DOM measurements */


I would try to find a way and cover it with unit tests to be safe

pan-kot · 2026-05-12T11:25:48Z

+    const handleSplitGroupResize = (leafIds: string[], newWidth: number) => {
+      const lastLeaf = leafIds[leafIds.length - 1];
+      if (lastLeaf) {
+        const currentHalfWidth = leafIds.reduce((sum, id) => sum + (columnWidths.get(id) || 120), 0);


What is 120?

NathanZlion changed the title ~~chore: Add test page and interface change for table~~ feat: Table Column Groups Table May 3, 2026

NathanZlion force-pushed the dev-v3-natidere-table-group branch from 40c20ee to 84451af Compare May 4, 2026 13:42

NathanZlion deployed to dev-pages-react16 May 4, 2026 13:53 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 4, 2026 13:53 — with GitHub Actions View deployment

NathanZlion force-pushed the dev-v3-natidere-table-group branch from 84451af to e9f4fd0 Compare May 4, 2026 15:59

NathanZlion deployed to dev-pages-react18 May 4, 2026 16:29 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 4, 2026 16:29 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 04:40 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 04:40 — with GitHub Actions View deployment

NathanZlion force-pushed the dev-v3-natidere-table-group branch from d6a98cb to 5cec8c8 Compare May 5, 2026 14:22

NathanZlion deployed to dev-pages-react18 May 5, 2026 16:12 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 16:12 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 18:22 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 18:22 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 21:25 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 21:25 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 22:04 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 22:04 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 22:56 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 22:56 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 23:26 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 23:26 — with GitHub Actions View deployment

NathanZlion marked this pull request as ready for review May 6, 2026 08:36

NathanZlion requested a review from a team as a code owner May 6, 2026 08:36

NathanZlion requested review from georgylobko and removed request for a team and georgylobko May 6, 2026 08:36

NathanZlion marked this pull request as draft May 6, 2026 11:40

NathanZlion force-pushed the dev-v3-natidere-table-group branch from 8da3b07 to 227f21b Compare May 8, 2026 00:37

pan-kot reviewed May 12, 2026

View reviewed changes

fix: Remove div for dir wrapper and move configuration to settings slot

4b20775

NathanZlion deployed to dev-pages-react16 May 13, 2026 05:16 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 13, 2026 05:16 — with GitHub Actions View deployment


		import styles from './styles.css.js';

		export interface TableGroupHeaderCellProps {

Conversation

NathanZlion commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

NathanZlion commented Apr 30, 2026 •

edited

Loading

codecov Bot commented May 4, 2026 •

edited

Loading

pan-kot May 12, 2026 •

edited

Loading

pan-kot May 12, 2026 •

edited

Loading

pan-kot May 12, 2026 •

edited

Loading