DataTable with bulk actions
An interactive grid for records people select, sort and open: a sticky header, numeric and action columns, and a selected row marked with a tint and a leading rule. BulkActionBar sits above it and acts on the selection.
- DataTable
- BulkActionBar
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, DataTable with bulk actions
1 invoice selected
| Invoice | Client | Status | Total | Actions | |
|---|---|---|---|---|---|
| INV-1042 | Northwind Traders | Paid | €1,240.00 | ||
| INV-1043 | Contoso Pharmaceuticals and Laboratory Supplies | Due | €86.50 | ||
| INV-1044 | Fabrikam | Overdue | €4,310.00 | ||
| INV-1045 | Tailspin Toys | Paid | €512.75 | ||
| INV-1046 | Wide World Importers | Due | €2,075.00 |
Dark theme, DataTable with bulk actions
1 invoice selected
| Invoice | Client | Status | Total | Actions | |
|---|---|---|---|---|---|
| INV-1042 | Northwind Traders | Paid | €1,240.00 | ||
| INV-1043 | Contoso Pharmaceuticals and Laboratory Supplies | Due | €86.50 | ||
| INV-1044 | Fabrikam | Overdue | €4,310.00 | ||
| INV-1045 | Tailspin Toys | Paid | €512.75 | ||
| INV-1046 | Wide World Importers | Due | €2,075.00 |
High contrast theme, DataTable with bulk actions
1 invoice selected
| Invoice | Client | Status | Total | Actions | |
|---|---|---|---|---|---|
| INV-1042 | Northwind Traders | Paid | €1,240.00 | ||
| INV-1043 | Contoso Pharmaceuticals and Laboratory Supplies | Due | €86.50 | ||
| INV-1044 | Fabrikam | Overdue | €4,310.00 | ||
| INV-1045 | Tailspin Toys | Paid | €512.75 | ||
| INV-1046 | Wide World Importers | Due | €2,075.00 |
UsageLink to the section Usage
import { DataTable, BulkActionBar } from '@skribly/ui/data'<BulkActionBar aria-label="Actions for selected invoices" count={count}
countLabel={(n) => `${n} selected`} onClear={clear} clearLabel="Clear selection">
<Button variant="danger" size="sm" onPress={remove}>Delete</Button>
</BulkActionBar>
<DataTable
aria-label="Invoices"
className="max-h-72"
columns={columns}
items={invoices}
rowKey={(i) => i.id}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
sortDescriptor={sort}
onSortChange={setSort}
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Tab enters the grid once; arrow keys move between cells, Space toggles a row, Enter opens it when onRowAction is set, and typing jumps to a row.
- Column headers sort with Enter and React Aria announces the new order.
- Row checkboxes are named after the row header.
- The bulk bar is a toolbar with one tab stop and arrow keys between its actions; its buttons disable while nothing is selected, and focus moves to the count when an action empties the selection.
This demo runs through axe in all three themes on every test run. See what the tests check.