DataTable: Add controllable row group expansion by rickyzhangca · Pull Request #8533 · primer/react

rickyzhangca · 2026-10-13T18:05:23Z

Closes https://github.com/github/primer/issues/6721

Adds opt-in group expansion to DataTable and Table.Group. Builds on the row selection merged in #8415 and targets main; bulk actions remains an independent sibling PR.

Collapsing only changes visibility. Members stay mounted and remain in the selection model, so current-page select-all includes collapsed selectable rows. A controlled collapse restores focus to the disclosure only when it hides the focused member.

CleanShot.2026-10-14.at.5.09.31.PM.mp4

Changelog

New

DataTable: collapsibleGroups, expandedGroups, defaultExpandedGroups, onExpandedGroupsChange({expandedGroups}). Expansion sets use stable string/number group IDs.
Table.Group: collapsible, expanded, defaultExpanded, onExpandedChange({expanded}).
Config and presentational examples, API documentation, regression tests, and light/dark Linux snapshots.

Changed

Group keys distinguish string and numeric IDs. Non-collapsible groups remain expanded. Uncontrolled expansion defaults to the groups in the initial data; new IDs start collapsed, and stored IDs survive data replacement.

Removed

None.

Rollout strategy

Opt-in experimental API addition. Review/merge bulk actions before expansion; neither follow-up changes the other's implementation.

Testing & Reviewing

VITEST_FAIL_ON_CONSOLE=true npm test -- --run: passed, 2744 tests with React 18.3.1, including browser-rendered SSR and hydration without warning suppression.
VITEST_FAIL_ON_CONSOLE=true npm test -- --run packages/react/src/DataTable/__tests__: passed, 206 tests covering state, selection compatibility, focus, hydration, and disclosure size with long labels. Alignment assertions cover all three densities, LTR/RTL, and expanded/collapsed states.
npm run build, npm run type-check: passed.
npm run lint, npm run lint:css, npm run format:diff, npm run test:classname-coverage: passed.
npx markdownlint-cli2 packages/react/src/DataTable/DataTable.accessibility.md: passed.
npm run format, npm run lint:fix: passed before committing.
STORYBOOK_URL=http://localhost:6008 npx playwright test e2e/components/DataTable.test.ts --grep 'group expansion hides' --workers=1: passed; verifies keyboard activation, controlled-collapse focus recovery, hidden Tab order, selection compatibility, and axe.
Four Linux baselines were refreshed after correcting disclosure/checkbox center alignment and label spacing: generation and automatic commit passed. Latest-commit CI/VRT is tracked by the PR checks.

Manual review still needed: verify NVDA/JAWS/VoiceOver disclosure name, count, expanded state, and table navigation across collapsed groups. Automated checks do not replace assistive-technology review. Count descriptions currently use English. The implementation uses Primer's existing button/state primitives, not @github-ui/disclosure.

changeset-bot · 2026-10-13T18:05:30Z

🦋 Changeset detected

Latest commit: cc1abbf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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

github-actions · 2026-10-13T18:06:01Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

primer · 2026-10-13T18:11:48Z

🤖 Lint issues have been automatically fixed and committed to this PR.

primer · 2026-10-13T18:24:55Z

🤖 Lint issues have been automatically fixed and committed to this PR.

Copilot

🟡 Changes recommended

Callback refs break mixed-state selection, and manual screen-reader validation remains outstanding.

1 open finding

Callback refs fail to render accessible mixed checkbox state · New

What changed in this PR

Adds opt-in group expansion to experimental DataTable and Table.Group, building on current-page row selection.

Changes:

Adds controlled and uncontrolled expansion with stable group IDs.
Keeps collapsed rows mounted and selectable, with focus recovery.
Adds documentation, examples, and regression coverage.

File	Description
packages/react/src/experimental/index.ts	Exports selection types.
packages/react/src/DataTable/useTable.ts	Manages selection and expansion state.
packages/react/src/DataTable/TableGroup.tsx	Adds disclosure controls and focus recovery.
packages/react/src/DataTable/Table.tsx	Adds composable selection controls.
packages/react/src/DataTable/Table.module.css	Styles disclosures and hidden groups.
packages/react/src/DataTable/Table.features.stories.tsx	Demonstrates presentational APIs.
packages/react/src/DataTable/row.ts	Defines shared row ID type.
packages/react/src/DataTable/index.ts	Exposes selection components and types.
packages/react/src/DataTable/DataTable.types.test.tsx	Checks public API types.
packages/react/src/DataTable/DataTable.tsx	Integrates selection and expansion.
packages/react/src/DataTable/DataTable.features.stories.tsx	Adds interactive examples.
packages/react/src/DataTable/DataTable.docs.json	Documents new APIs.
packages/react/src/DataTable/DataTable.accessibility.md	Explains accessibility contracts.
packages/react/src/DataTable/__tests__/DataTableSelection.test.tsx	Tests selection behavior.
packages/react/src/DataTable/__tests__/DataTableGrouping.test.tsx	Updates typed group-key expectations.
packages/react/src/DataTable/__tests__/DataTableExpansion.test.tsx	Tests expansion, focus, and hydration.
packages/react/src/__tests__/__snapshots__/exports.test.ts.snap	Records added exports.
e2e/components/Table.test.ts	Covers composed selection interactions.
e2e/components/DataTable.test.ts	Covers expansion and selection scenarios.
.changeset/selectable-data-table-rows.md	Records selection release addition.
.changeset/datatable-group-expansion.md	Records expansion release addition.

🧠 Review effort: Balanced

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Recover focus at commit time without layout effects, preserve disclosure target size under long labels, and tighten expansion documentation and regression coverage. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Center the 24px disclosure target over the checkbox slot and derive text spacing from cell density. Cover alignment in both directions and expansion states. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Replace the arbitrary Tab loop with explicit focus destinations and retain dedicated state, selection, hydration, sizing, and alignment coverage. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Restore unrelated AvatarStack image churn from the snapshot workflow. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

primer-integration · 2026-10-14T21:24:20Z

Integration test results from github/github-ui PR:

Changes Passed
CI Passed
VRT Passed
Projects Passed

All checks passed!

Copilot

🔵 Needs a closer look

Manual NVDA, JAWS, and VoiceOver validation remains outstanding for disclosure announcements and navigation across collapsed groups.

0 open findings

1 resolved since last review

Callback refs fail to render accessible mixed checkbox state

🧠 Review effort: Balanced

rickyzhangca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 13, 2026

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 13, 2026

rickyzhangca deployed to github-pages October 13, 2026 18:15 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 13, 2026 18:15 Inactive

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 13, 2026

github-actions Bot requested a deployment to storybook-preview-8533 October 13, 2026 18:22 Abandoned

rickyzhangca deployed to github-pages October 13, 2026 18:30 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 13, 2026 18:31 Inactive

rickyzhangca deployed to github-pages October 13, 2026 19:11 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 13, 2026 19:12 Inactive

rickyzhangca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 13, 2026

rickyzhangca deployed to github-pages October 13, 2026 19:34 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 13, 2026 19:34 Inactive

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 13, 2026

primer Bot deployed to github-pages October 13, 2026 19:45

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 13, 2026 19:45 Inactive

rickyzhangca deployed to github-pages October 14, 2026 01:56 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 14, 2026 01:56 Inactive

Base automatically changed from agents/implement-row-selection-datatable to main October 14, 2026 16:06

rickyzhangca requested a balanced review from Copilot October 14, 2026 18:36

Copilot started reviewing on behalf of rickyzhangca October 14, 2026 18:44

View session

Copilot AI reviewed Oct 14, 2026

View reviewed changes

Comment thread packages/react/src/DataTable/Table.tsx Outdated

rickyzhangca and others added 4 commits October 14, 2026 15:31

feat(DataTable): add controllable group expansion

96ea7cd

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

test(vrt): update snapshots

f2494a2

test(vrt): keep snapshot updates scoped to group expansion

8be82e8

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

rickyzhangca and others added 3 commits October 14, 2026 15:31

test(vrt): update snapshots

cc6214d

test(DataTable): remove redundant expansion assertions

a0d03f4

Replace the arbitrary Tab loop with explicit focus destinations and retain dedicated state, selection, hydration, sizing, and alignment coverage. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

rickyzhangca force-pushed the rickyzhangca-datatable-group-expansion branch from 8bf43cc to a0d03f4 Compare October 14, 2026 19:35

rickyzhangca deployed to github-pages October 14, 2026 19:43 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 14, 2026 19:44 Inactive

Fix collapsed group corners and selection header refs

4fc87ff

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

rickyzhangca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 14, 2026

rickyzhangca deployed to github-pages October 14, 2026 20:15 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8533 October 14, 2026 20:15 Inactive

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 14, 2026

rickyzhangca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 14, 2026

test(vrt): update snapshots

0ca8ab9

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 14, 2026

Keep snapshot refresh scoped to DataTable

cc1abbf

Restore unrelated AvatarStack image churn from the snapshot workflow. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-8533 October 14, 2026 20:33 Abandoned

rickyzhangca deployed to github-pages October 14, 2026 20:41 — with GitHub Actions

View deployment

github-actions Bot deployed to storybook-preview-8533 October 14, 2026 20:42

View deployment

rickyzhangca marked this pull request as ready for review October 14, 2026 21:10

rickyzhangca requested a review from a team as a code owner October 14, 2026 21:10

rickyzhangca requested a review from llastflowers October 14, 2026 21:10

github-actions Bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 14, 2026

llastflowers requested a balanced review from Copilot October 15, 2026 16:39

Copilot started reviewing on behalf of llastflowers October 15, 2026 16:40

View session

llastflowers approved these changes Oct 15, 2026

View reviewed changes

Copilot AI reviewed Oct 15, 2026

View reviewed changes

Navigation Menu

Repository navigation

DataTable: Add controllable row group expansion - #8533

DataTable: Add controllable row group expansion#8533
rickyzhangca wants to merge 10 commits into
mainfrom
rickyzhangca-datatable-group-expansion

rickyzhangca commented Oct 13, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 13, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 13, 2026

Uh oh!

primer Bot commented Oct 13, 2026

Uh oh!

primer Bot commented Oct 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

primer-integration Bot commented Oct 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

rickyzhangca commented Oct 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Oct 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Oct 13, 2026

⚠️ Action required

Uh oh!

primer Bot commented Oct 13, 2026

Uh oh!

primer Bot commented Oct 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

primer-integration Bot commented Oct 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rickyzhangca commented Oct 13, 2026 •

edited

Loading

changeset-bot Bot commented Oct 13, 2026 •

edited

Loading