Patterns
Let someone pick several records and apply one action to all of them, with a clear count and a way back.
How it works
- Give each row a checkbox and the header a select-all checkbox that shows the mixed state.
- When anything is selected, the toolbar names the count ("Actions (3 selected)") and offers the actions that apply to every selected row.
- Confirm destructive or irreversible actions in place, naming the count.
- Run long actions with progress and report the outcome in a toast, including how many failed and why.
- Keep the selection after the action unless the rows are gone.
See it built: datagrid full-screen page.
Elements
DataGrid · Toggle · Toolbar · Menu · Confirmation · Toast · Progress
Usability
Do
- Offer "Select all N results" when the header checkbox selects only the visible page.
- Disable actions that don’t apply, and say why in a tooltip.
Don’t
- Don’t clear the selection when the person scrolls or changes the page.
- Don’t hide which rows failed.
Accessibility
- Checkboxes have names that include the row’s identity ("Select invoice 1042").
- The selected count is in the toolbar text, so screen reader users hear it when they reach the toolbar.
- Space toggles the focused row’s checkbox; Shift+Space or Shift+click extends the range.
Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.