fix: Keep sticky header cols in sync with grouped table columns by NathanZlion · Pull Request #5194 · cloudscape-design/components

NathanZlion · 2026-10-27T07:47:41Z

Description

This PR fixes two bugs in table that are related to column groups with resizable columns.

First one is the sticky header being out of line with the column widths when on wide screens. This is a reported bug. When the container is wider than the summed column widths, the last column stretches to fill it. The sticky header's widths were set once at render and never updated, so the header drifted away from the body columns. The sticky s now register through setCol and are updated in syncStickyColumnWidths, together with the sticky header cells.

Before

After

Second one is the Group resizer stopping at the wrong minimum. This was caused by a hardcoded 120px for the right most instead of just looking into it's actual min width. this means tracker stopped shrinking but the columns would keep shrinking and columns would shrink upto the correct min width. it's just that the tracker wasn't in sync after some point. Fix is to make the header use the new function getColumnMinWidth which uses the same rule updateWidths already applies and this fixed the issue.

Before

After

Related links, issue #, 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

Added two unit tests in resizable-columns.test.tsx, one per bug. Each fails without its fix and passes with it:

The group resizer's aria-valuemin equals the other column's width plus the rightmost column's minWidth.
When the column-widths container resizes, the sticky header

Checked manually in Chrome at 1280, 1920 and 2560px, with and without groups, the sticky header, selection and expandable rows. The sticky header lines up with the body columns, and the group resize tracker stays on the column edge when shrinking with the resize buttons.

You can check it out at table/column-groups page also, in a wide screen.

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-10-27T07:57:58Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.74%. Comparing base (60601ee) to head (d5912d3).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5194   +/-   ##
=======================================
  Coverage   97.73%   97.74%           
=======================================
  Files         996      998    +2     
  Lines       32226    32312   +86     
  Branches    11910    11949   +39     
=======================================
+ Hits        31497    31582   +85     
+ Misses        723      685   -38     
- Partials        6       45   +39

☔ 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.

Explicit widths let the grouped sticky header alignment fix be checked by widening the window after load, and a low minWidth on Memory lets the group resize minimum fix be checked by shrinking the Performance group.

Copilot

🟡 Changes recommended

Sticky synchronization introduces unnecessary synchronous layout reads for tables without sticky headers.

1 open issue

Avoid measuring columns when no sticky target exists · New

What changed in this PR

This PR fixes grouped, resizable table columns so sticky headers track body widths and group resize limits respect the last column’s minimum width.

Changes:

Register sticky <col> elements for width synchronization.
Share minimum-width logic between column resizing and group headers.
Add regression tests and update the demo with explicit widths.

File	Description
`src/table/use-column-widths.tsx`	Synchronizes sticky columns and exposes shared minimum-width logic.
`src/table/header-cell/group-header-cell.tsx`	Uses the last child’s minimum width for group resizing.
`src/table/column-groups/col-group.tsx`	Registers sticky and primary column elements.
`src/table/__tests__/resizable-columns.test.tsx`	Adds regression coverage for both fixes.
`src/table/__tests__/columns-width.test.tsx`	Updates context default checks.
`pages/table/column-groups.page.tsx`	Configures widths for manual verification.

_{Review effort: Balanced}

syncStickyColumnWidths measured every primary column before checking for a sticky cell or <col>, adding layout reads on resize even without a sticky header. Only measure when there is something to update.

Copilot

🟢 Approval recommended

The focused changes address both reported defects, preserve existing sizing rules, and include targeted regression coverage with no unresolved findings.

No open issues 🎉

1 resolved since last review

Avoid measuring columns when no sticky target exists

_{Review effort: Balanced}

NathanZlion · 2026-10-27T12:22:20Z

  const lastChild = childColumnIds[childColumnIds.length - 1];
  const groupMinWidth = childColumnIds.reduce<number>((sum, id) => {
    if (id === lastChild) {
-      return sum + DEFAULT_COLUMN_WIDTH;


the bug 2, this used to use the 120 default width every time. That's what made the tracker and the column edge drift apart. using the actual min width instead.

pan-kot · 2026-10-27T13:58:03Z

  const cellsRef = useRef(new Map<PropertyKey, HTMLElement>());
  const stickyCellsRef = useRef(new Map<PropertyKey, HTMLElement>());
  const colsRef = useRef(new Map<PropertyKey, HTMLElement>());
+  const stickyColsRef = useRef(new Map<PropertyKey, HTMLElement>());


How is this different from stickyCellsRef we already have?

stickyCellsRef holds the sticky header cells, and this holds the sticky s. When s exist, the browser takes column widths from them, not from the cells. We were only updating the cells, so the s kept their first-render width, and that's the bug.

we're using col for grouped ones: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col

https://github.com/cloudscape-design/components/blob/37fbce9334fcf726c6679780682a0c898b347958/src/table/column-groups/col-group.tsx

If I understand correctly, when we have grouped columns the widths measurement should be done differently - with respect to the groups. When grouping is not used - then technically stickyCellsRef and stickyColsRef should be identical. If thats the case, case we remove the stickyCellsRef then?

If we cannot do this optimisation and we have to keep both - let's add code comments to explain why is that needed.

agree, I'll add a comment. They're not quite the identical, the sticky table only renders a <colgroup> when there are column groups, one of the ways we used back then to make column groups work well with the resizing feature and all. so without groups stickyColsRef stays empty and the cells are what carry the widths.

pan-kot · 2026-10-27T14:07:49Z

      {hasSelection && (
        <col
          style={sticky && selectionColumnId ? { width: getColumnStyles(true, selectionColumnId).width } : undefined}
+          ref={sticky && selectionColumnId ? node => setCol(true, selectionColumnId, node) : undefined}


Why do we set this column only if it is sticky? Should it be:

ref={selectionColumnId ? node => setCol(sticky, selectionColumnId, node) : undefined}

Also, isn't selectionColumnId guaranteed? Can we remove the && selectionColumnId check? Otherwise, there is a potential issue possible where the column reference is stored, but then not removed if selectionColumnId gets removed.

Why do we set this column only if it is sticky?
Only the sticky one needs it. The sticky header is a separate table, so its cols have to be told the width the main table actually rendered. The main table's checkbox column already gets its 54px from its own cell, so its col never needed a ref (it didn't have one before this change either). With setCol(sticky, ...)

selectionColumnId
yeah this one is for typescript since selectionColumnId is optional. I realize now we can make selectionColumnId a required field. Will address in next commtit.

…ColumnId is always there

fix: Keep sticky header cols in sync with grouped table columns

1b80207

NathanZlion requested a review from a team as a code owner October 27, 2026 07:47

NathanZlion requested review from SpyZzey and removed request for a team October 27, 2026 07:47

NathanZlion marked this pull request as draft October 27, 2026 07:47

NathanZlion removed the request for review from SpyZzey October 27, 2026 07:47

NathanZlion deployed to dev-pages-react16 October 27, 2026 07:50 — with GitHub Actions

View deployment

NathanZlion deployed to dev-pages-react18 October 27, 2026 07:50 — with GitHub Actions

View deployment

NathanZlion deployed to allure-report October 27, 2026 07:57 — with GitHub Actions

View deployment

NathanZlion added 2 commits October 27, 2026 10:06

chore: Set column widths on column groups dev page

e6f093f

Explicit widths let the grouped sticky header alignment fix be checked by widening the window after load, and a low minWidth on Memory lets the group resize minimum fix be checked by shrinking the Performance group.

test: Cover default column min width in column widths context

995fc44

NathanZlion deployed to dev-pages-react18 October 27, 2026 09:09 — with GitHub Actions

View deployment

NathanZlion deployed to dev-pages-react16 October 27, 2026 09:09 — with GitHub Actions

View deployment

NathanZlion deployed to allure-report October 27, 2026 09:16 — with GitHub Actions

View deployment

NathanZlion requested a balanced review from Copilot October 27, 2026 09:18

Copilot started reviewing on behalf of NathanZlion October 27, 2026 09:18

View session

Copilot AI reviewed Oct 27, 2026

View reviewed changes

Comment thread src/table/use-column-widths.tsx Outdated

NathanZlion requested review from a team and pan-kot and removed request for a team October 27, 2026 09:35

perf: Skip sticky width measurement when no sticky target exists

37fbce9

syncStickyColumnWidths measured every primary column before checking for a sticky cell or <col>, adding layout reads on resize even without a sticky header. Only measure when there is something to update.

NathanZlion requested a balanced review from Copilot October 27, 2026 09:39

Copilot started reviewing on behalf of NathanZlion October 27, 2026 09:39

View session

NathanZlion deployed to dev-pages-react16 October 27, 2026 09:40 — with GitHub Actions

View deployment

NathanZlion deployed to dev-pages-react18 October 27, 2026 09:40 — with GitHub Actions

View deployment

Copilot AI reviewed Oct 27, 2026

View reviewed changes

NathanZlion deployed to allure-report October 27, 2026 09:48 — with GitHub Actions

View deployment

NathanZlion marked this pull request as ready for review October 27, 2026 09:57

NathanZlion commented Oct 27, 2026

View reviewed changes

pan-kot reviewed Oct 27, 2026

View reviewed changes

chore: Add describing comment for sticky col ref

df4a588

NathanZlion deployed to dev-pages-react16 October 28, 2026 14:26 — with GitHub Actions

View deployment

NathanZlion deployed to dev-pages-react18 October 28, 2026 14:26 — with GitHub Actions

View deployment

NathanZlion deployed to allure-report October 28, 2026 14:33 — with GitHub Actions

View deployment

fix: simplify by making optional prop to required since the selection…

d5912d3

…ColumnId is always there

NathanZlion deployed to dev-pages-react18 October 28, 2026 14:40 — with GitHub Actions

View deployment

NathanZlion deployed to dev-pages-react16 October 28, 2026 14:40 — with GitHub Actions

View deployment

NathanZlion deployed to allure-report October 28, 2026 14:48 — with GitHub Actions

View deployment

NathanZlion requested a review from pan-kot October 28, 2026 15:30

Navigation Menu

Repository navigation

fix: Keep sticky header cols in sync with grouped table columns - #5194

fix: Keep sticky header cols in sync with grouped table columns#5194
NathanZlion wants to merge 6 commits into
mainfrom
dev-v3-natidere-table-column-groups-fix

NathanZlion commented Oct 27, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Oct 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

NathanZlion Oct 27, 2026

Uh oh!

pan-kot Oct 27, 2026

Uh oh!

NathanZlion Oct 27, 2026 •

edited

Loading

Uh oh!

pan-kot Oct 27, 2026

Uh oh!

NathanZlion Oct 28, 2026 •

edited

Loading

Uh oh!

pan-kot Oct 27, 2026

Uh oh!

NathanZlion Oct 28, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

NathanZlion commented Oct 27, 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 Oct 27, 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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

NathanZlion Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

pan-kot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

NathanZlion Oct 27, 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!

pan-kot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

NathanZlion Oct 28, 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!

pan-kot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

NathanZlion Oct 28, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NathanZlion commented Oct 27, 2026 •

edited

Loading

codecov Bot commented Oct 27, 2026 •

edited

Loading

NathanZlion Oct 27, 2026 •

edited

Loading

NathanZlion Oct 28, 2026 •

edited

Loading