feat(data-table): bulk selection actions in the footer

[itsprade]

What this does

Adds bulk actions to DataTable (tailor-inc/platform-planning#1738). Pass selectionActions to useDataTable and, while rows are selected, DataTable.Footer becomes a bulk-action bar: the selection count, your actions, and Clear, with pagination kept alongside. When nothing is selected, the footer looks exactly as it does today.

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ ☑ V2001  Tyrell Parts SA   Raw material   C. Lindqvist   EMEA   Inactive   US$238,429.82    │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ 5 of 240 selected │ ▷ Activate (2)  ⏸ Deactivate (3)  ⤓ Export  ⋯ │ Clear   Rows per page 25  Page 1 / 10  « ‹ › » │
└─────────────────────────────────────────────────────────────────────────────────────────────┘

This PR started as the prototype and open question from 3 Sep. The direction was settled with Sean in #pf-app-shell and at the 18 Sep board planning: build it into DataTable, place it in the footer, and let the consumer control which actions appear.

API

It is one option, shaped like rowActions. There is nothing new to compose in JSX.

const table = useDataTable({
  columns,
  data,
  control,
  selectionActions: [
    {
      id: "activate",
      label: "Activate",
      icon: <Play />,
      appliesTo: (vendor) => vendor.status === "inactive", // "Activate (2)", disabled at 0
      onClick: (vendors, { clearSelection }) => {
        activate(vendors); // only the eligible rows, incl. ones selected on other pages
        clearSelection();
      },
    },
  ],
});

<DataTable.Root value={table}>
  <DataTable.Table />
  <DataTable.Footer>
    <DataTable.Pagination />
  </DataTable.Footer>
</DataTable.Root>;

SelectionAction
id, label, icon	What the button shows.
variant	"default" | "destructive". This is styling only; the app still confirms destructive actions itself (interaction/confirm).
appliesTo	Optional. Scopes the action to the selected rows it fits: it shows their count, disables the action at zero, and passes only those rows to onClick.
onClick(rows, { clearSelection })	Receives the selected rows the action applies to. The bar never clears the selection by itself.

New on the return value and context: selectedRows (each selected row as last loaded, across pages) and deselectAllRows (page-scoped). The new type is SelectionAction.

Behaviour

• Opt-in. The bar needs a non-empty selectionActions, a DataTable.Footer, and at least one selected row. selectionActions also turns on the checkbox column by itself, so onSelectionChange becomes optional.
• Overflow. Three actions stay inline. The rest move into a More actions menu, which opens upward.
• Pop-out. In <Layout fill> the footer is already pinned. On a page-scrolling table, the bar is position: sticky while rows are selected, so it rides the bottom of the viewport and settles back into place at the end of the table. There is no JS.
• Built on the generic Toolbar (feat: add generic toolbar #559). The bar is a Toolbar.Row, so it gets role="toolbar" and Arrow/Home/End navigation.
• Accessibility. A persistent polite live region announces the count from the first selection. When the bar closes while focus is inside it, focus returns to the header checkbox.
• Tone. The bar uses accent, which stays soft in all three themes and in both light and dark mode. Hover and secondary text are re-pointed so they stay legible on the tinted bar.
• Pagination. While the bar is up, Pagination hides its own "N of M row(s) selected" text and shares the line with the bar. It wraps to a second line only when there isn't room.

Compatibility

• API: additive. Tables without selectionActions render exactly as before, and a test asserts this. New context members are optional. selectedRows is required on UseDataTableReturn, like expandedIds was, so only a hand-built return value would need it.
• Behaviour change: the header checkbox is now page-scoped in both directions. Checking it used to replace the selection with the current page, and unchecking it cleared every page. That silently dropped rows picked on other pages: with 5 rows selected on page 1, "select all" on page 2 gave 25, not 30. It now adds or removes only the current page, and clearSelection still empties everything. Tables whose selection stays on one page see no difference. The fix is its own commit (dcc9e77) so it can be split out if preferred, and the changeset calls it out.
• @IzumiSy, one change to feat: add generic toolbar #559. The DataTable root goes from overflow-hidden to overflow-clip. Both clip the toolbar to the rounded frame, but hidden also makes the root a scroll container, which pinned the sticky footer inside the table. clip keeps your clipping without that side effect.

Commits

1. fix(data-table): the header checkbox keeps other pages' rows.
2. feat(data-table): selectionActions and remembered selected rows. Selection becomes an ordered map of id → row as last seen, and the current page's copy wins.
3. feat(data-table): the footer bar (selection-bar.tsx), plus the Pagination and Footer changes and en/ja labels.
4. feat(examples): /showcase/data-table-selection moves onto the real API, and /dashboard/products replaces its "Selected: …" line with bulk actions.
5. docs(data-table): docs-src sections and the SelectionAction table; interaction/multi-select is rewritten around selectionActions, since the floating bar on a raw Table.Root is gone; list/dense-scan is updated; decisions/data-table-selection-footer-actions.md is now Decided; and a minor changeset.

The earlier commits on this PR are the original prototype and a merge of main.

Worth discussing

• appliesTo(row) replaces the consumer-supplied count from the first sketch. Selection spans pages, and an app with server pagination can't count rows on other pages without its own cache. The table already sees every row the user selects.
• Overlap with refactor(core): align state ownership with React Compiler #525. It rewrites selection state and adds controlled rowSelection. With a controlled selection, rows that haven't loaded yet are counted once they load; this is documented. Whichever lands second adapts, and the row memory just goes wherever selection is written.
• Toasts. Bulk actions usually end in a toast, and the default bottom-right toast covers the footer's pagination for a few seconds.
• Narrow tables. Below roughly 1,100px of table width, the bar and pagination wrap onto two lines. Hiding "Rows per page" while the bar is up would keep them on one line.

Follow-ups (not in this PR)

• "Select all N" across pages.
• A placeable DataTable.SelectionActions for custom placement, following the "option = default placement, sub-component = custom placement" rule from tailor-inc/platform-planning#1699.
• Pending/loading state on an action.
• Tooltips explaining a disabled action.
• Escape to clear.

Try it

pnpm install && pnpm build && pnpm dev

• /showcase/data-table-selection: 240 vendors. Tick rows, page with a selection open, open ⋯ → Delete, and use the Pinned footer / Page scroll switch.
• /dashboard/products: Publish / Archive / Delete bulk actions.

Verification

• Tests: selection-bar.test.tsx (13 new), plus hook tests (cross-page selection, selectedRows, selectionActions) and a header-checkbox test. 1,842 core tests pass.
• Checks: pnpm fmt:check, pnpm exec turbo run lint test type-check check-dts (28/28), pnpm docs:check, and docs examples compile against core.
• In the browser, on the example app's theme (bloom) in light and dark mode, at 1440px and a narrower ~1000px window: the bar, counts, overflow menu, the confirm flow, Clear moving focus to the header checkbox, cross-page selection, the header checkbox, and sticky pop-out in page-scroll mode. Not yet eyeballed on the default and cream themes.

🤖 Generated with Claude Code

[github-actions]

Code Metrics Report

	main (ecc3f93)	#496 (75cb5da)	+/-
Coverage	87.1%	87.1%	0.0%
Test Execution Time	2m7s	2m3s	-4s

Details

  |                     | main (ecc3f93) | #496 (75cb5da) | +/-  |
  |---------------------|----------------|----------------|------|
  | Coverage            |          87.1% |          87.1% | 0.0% |
  |   Files             |            178 |            178 |    0 |
  |   Lines             |           5467 |           5467 |    0 |
  |   Covered           |           4764 |           4764 |    0 |
+ | Test Execution Time |           2m7s |           2m3s |  -4s |

---

Reported by octocov