fix(Table): preserve widths when header is hidden - #1165
Conversation
🦋 Changeset detectedLatest commit: 1169e8f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
Fixes Table layout so configured column widths remain applied even when showHeader={false}, by keeping the <colgroup> mounted independently of <thead>.
Changes:
- Extracted
<colgroup>rendering into a dedicatedColgroupcomponent and render it unconditionally within the table. - Simplified
Theadto only render header rows/cells (no longer responsible for<colgroup>). - Added unit tests verifying
colgroup/colwidths are preserved with both visible and hidden headers, plus a changeset entry.
Reviewed changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/Table/Table.tsx | Keeps <colgroup> mounted regardless of header visibility to preserve column width behavior. |
| src/components/Table/Table.test.tsx | Adds coverage ensuring configured widths are present when header is shown/hidden. |
| .changeset/fix-table-widths-without-header.md | Declares a patch release note for the width preservation fix. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
@fallintoplace please rebase from main, this will allow to run VRT, thank you! |
|
✅ Ready to be merged, but will be included in the next release after upcoming one |
Why?
When
showHeader={false}, the table used to remove<colgroup>together with<thead>. That dropped configured column widths even though column layout should not depend on whether the header is visible.What changed
showHeader={false}.NoHeadervisual snapshots.Regression coverage
The
NoHeadervisual test uses 220px, 200px, and 180px columns inside a 400px container with scrolling enabled, so it checks the actual overflow layout too.Checks
corepack yarn test --runcorepack yarn typecheckcorepack yarn lint:codecorepack yarn lint:csscorepack yarn buildNoHeader