Installation
npx sdaia-ui@latest add table-bulk-actions-bar
Usage
import { TableBulkActionsBar } from '@/components/ui/TableBulkActionsBar';<TableBulkActionsBar
selectedCount={selected.length}
totalCount={rows.length}
onSelectAllChange={(all) => setSelected(all ? rows.map((r) => r.id) : [])}
onClearSelection={() => setSelected([])}
onClose={() => setSelected([])}
actions={<Button size="sm">Export</Button>}
/>
<Table selectable selectedRowKeys={selected} onSelectionChange={setSelected} … />RTL
Everything mirrors for right-to-left.
Loading demo: table-bulk-actions-bar-rtl
Examples
Inline
Sits above the table header. Clear the selection to hide it.
Loading demo: table-bulk-actions-bar-default
With a table
Wired to the Table's row selection; the bar replaces the table toolbar while rows are selected.
Loading demo: table-bulk-actions-bar-with-table
Floating
Sticks to the bottom while a long table scrolls, and settles after the table so it never covers the pagination.
Loading demo: table-bulk-actions-bar-floating
Fewer actions
Without the clear link and with a single action.
Loading demo: table-bulk-actions-bar-fewer-actions
When to use
- Tables where users act on several rows at once
- Approving, exporting or deleting a selection
- Showing how many rows are selected
- Letting users clear the selection quickly