DataTable: add selection checkboxes to collapsible groups by rickyzhangca · Pull Request #8640 · primer/react

rickyzhangca · 2026-10-29T21:36:00Z

Adds selection checkboxes to collapsible groups when rowSelection is enabled. Each checkbox selects the group's selectable rows on the current page, including collapsed members, and reflects mixed or disabled states.

Context: row selection handoff.

Before	After

Same data and viewport; before uses the current main implementation.

Changelog

Add controlled selection, selectionDisabled, and onToggleSelect props to Table.Group.
Align checkboxes and group/member labels, tighten disclosure spacing, and restore normal row height while keeping the 24px disclosure target.
Update the existing collapsible story; no additional story.

Rollout strategy

No changes needed in github/github-ui

Testing & Reviewing

92 component tests passed, including selection scope, disabled/mixed states, controlled updates, and LTR/RTL alignment at all three densities.
Keyboard/focus and axe browser test passed; TypeScript, ESLint, and formatting checks passed.
Linux visual snapshots will be updated by the repository's update snapshots workflow.
Manual screen-reader verification remains pending.

changeset-bot · 2026-10-29T21:36:05Z

🦋 Changeset detected

Latest commit: fe57443

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-29T21:36:30Z

⚠️ 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-29T21:42:10Z

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

Copilot

🟡 Changes recommended

Two tests target a primer/css checkbox in unchanged stories that still render strapi, causing both clicks to time out and preventing the tests from completing.

2 open issues

What changed in this PR

Adds group-level selection to Primer React’s collapsible DataTable groups, allowing users to select current-page members even while a group is collapsed.

Changes:

Adds group checkboxes with mixed and disabled states, plus controlled selection props for Table.Group.
Aligns group and row controls and updates the existing collapsible-groups story.
Adds selection coverage and updates accessibility guidance, API documentation, and release notes.

File	Description
`packages/react/src/DataTable/useTable.ts`	Computes group selection state and toggles selectable members.
`packages/react/src/DataTable/TableGroup.tsx`	Adds controlled group checkboxes and header structure.
`packages/react/src/DataTable/Table.module.css`	Aligns controls and labels and adjusts disclosure spacing.
`packages/react/src/DataTable/DataTable.tsx`	Connects group checkboxes to selection actions.
`packages/react/src/DataTable/DataTable.features.stories.tsx`	Updates the collapsible-groups example.
`packages/react/src/DataTable/DataTable.docs.json`	Documents group selection props and behavior.
`packages/react/src/DataTable/DataTable.accessibility.md`	Describes checkbox scope, states, and keyboard order.
`packages/react/src/DataTable/__tests__/DataTableGroupSelection.test.tsx`	Covers selection scope, disabled groups, and controlled updates.
`packages/react/src/DataTable/__tests__/DataTableExpansion.test.tsx`	Updates alignment checks across directions and densities.
`e2e/components/DataTable.test.ts`	Updates group-selection interactions and checkbox locators.
`.changeset/tidy-groups-select.md`	Records the feature as a minor release.

_{Review effort: Balanced}

jonrohan · 2026-11-02T17:22:54Z

+                indeterminate={selection === 'some'}
+                disabled={selectionDisabled}
+                aria-label={`Select ${ariaLabel ?? label}`}
+                onChange={() => onToggleSelect?.()}


Could we require onToggleSelect when selection is set, or disable the checkbox when it is missing? The current optional callback allows an enabled Table.Group checkbox that never changes.

great catch, fixed, checkbox disabled if callback missing 7bf15ca

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

primer-integration · 2026-11-04T17:25:08Z

Integration test results from github/github-ui PR:

Changes Waiting
CI Running
VRT Waiting
Projects Passed

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

DataTable: add selection to collapsible groups

cd6d33f

rickyzhangca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 29, 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 29, 2026

rickyzhangca requested a balanced review from Copilot October 29, 2026 21:37

Copilot started reviewing on behalf of rickyzhangca October 29, 2026 21:38

View session

Copilot AI reviewed Oct 29, 2026

View reviewed changes

Comment thread e2e/components/DataTable.test.ts Resolved

Comment thread e2e/components/DataTable.test.ts Resolved

rickyzhangca deployed to github-pages October 29, 2026 21:45 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8640 October 29, 2026 21:45 Inactive

test(DataTable): fix grouped story selectors and consolidate tests

c0b2e25

rickyzhangca added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Oct 29, 2026

rickyzhangca deployed to github-pages October 29, 2026 22:03 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8640 October 29, 2026 22:03 Inactive

test(vrt): update snapshots

b9081ba

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

primer Bot deployed to github-pages October 29, 2026 22:13

View deployment

github-actions Bot temporarily deployed to storybook-preview-8640 October 29, 2026 22:14 Inactive

rickyzhangca marked this pull request as ready for review October 29, 2026 22:46

rickyzhangca requested a review from a team as a code owner October 29, 2026 22:46

rickyzhangca requested a review from TylerJDev October 29, 2026 22:46

jonrohan reviewed Nov 2, 2026

View reviewed changes

fix(DataTable): disable group selection without a callback

7bf15ca

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

rickyzhangca deployed to github-pages November 3, 2026 21:26 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8640 November 3, 2026 21:26 Inactive

rickyzhangca requested a review from jonrohan November 3, 2026 21:28

jonrohan approved these changes Nov 3, 2026

View reviewed changes

rickyzhangca enabled auto-merge November 4, 2026 16:03

Merge main and resolve DataTable conflicts

5afd5f3

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

rickyzhangca deployed to github-pages November 4, 2026 17:29 — with GitHub Actions

View deployment

github-actions Bot deployed to storybook-preview-8640 November 4, 2026 17:29

View deployment

github-actions Bot added integration-tests: failing Changes in this PR 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 Nov 4, 2026

test(DataTable): update bulk action group selection snapshots

fe57443

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

Navigation Menu

Repository navigation

DataTable: add selection checkboxes to collapsible groups - #8640

DataTable: add selection checkboxes to collapsible groups#8640
rickyzhangca wants to merge 6 commits into
mainfrom
agents/datatable-collapsible-group-checkboxes

rickyzhangca commented Oct 29, 2026

Uh oh!

changeset-bot Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 29, 2026

Uh oh!

primer Bot commented Oct 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

jonrohan Nov 2, 2026

Uh oh!

rickyzhangca Nov 3, 2026

Uh oh!

primer-integration Bot commented Nov 4, 2026 •

edited

Loading

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

rickyzhangca commented Oct 29, 2026

Changelog

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Oct 29, 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 29, 2026

⚠️ Action required

Uh oh!

primer Bot commented Oct 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

jonrohan Nov 2, 2026

Choose a reason for hiding this comment

Uh oh!

rickyzhangca Nov 3, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration Bot commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Oct 29, 2026 •

edited

Loading

primer-integration Bot commented Nov 4, 2026 •

edited

Loading