Bulk row actions
View sourceRender an action toolbar above the grid as soon as one or more rows are selected. Wire the actions to applyRowPatches and ship inverse patches with showUndo for free Cmd+Z-style toast undo.
Try this
Tick checkboxes on the left, then use the toolbar that appears above the grid.
- Tick 3 rows. The toolbar shows count + actions.
- Click Mark closed — all 3 update at once. An undo toast appears for ~5s.
- Click Undo on the toast — the 3 rows revert to their original status.
- Tick rows from different pages (toggle the master checkbox in the header) — the action operates on the entire selected set.
The contract
- checkboxSelection. Pass
checkboxSelectionto mount the selection column. - bulkActions. A render prop that receives a
BcBulkActionsContextwith{ selectedRowIds, selectedRowCount, clearSelection, showUndo }. Returns React. Mounted automatically when there's at least one selection. - apiRef.current?.applyRowPatches. Apply many row updates atomically. Each patch is
{ rowId, fields }. Updates flow through the same commit pipeline as cell edits; consumers can mirror to the server in one batch. - showUndo.
ctx.showUndo({ label, inversePatches })mounts an Undo toast. Click Undo and the inverse patches flow back through the same pipeline. Toast auto-dismisses after the user-tunable timeout.
Why inverse patches
Storing inverse patches in the toast (rather than rolling back via a separate API) keeps undo decoupled from the data source. The consumer's applyRowPatches handler runs the same code for both the forward action and the undo. No bespoke "undo handler" to write per action. Clean for ERP audit-log writes too — both the forward and the undo entry point go through the same hook.