BulkActionsBar

A floating bar for bulk row-selection actions — pairs with DataTable's selection model, not part of DataTable itself.

Overview

BulkActionsBar is, like DataTableHeader, deliberately not part of DataTable's own props — it only needs the selection count you already have from DataTable's selectionModel, so it lives as its own composable piece you place alongside <DataTable>:

const [selectionModel, setSelectionModel] = useState<Set<RowId>>(new Set());

<DataTable
  columns={columns}
  rows={rows}
  checkboxSelection
  selectionModel={selectionModel}
  onSelectionModelChange={setSelectionModel}
/>
<BulkActionsBar
  count={selectionModel.size}
  actions={[{ label: 'Download', icon: <DownloadIcon />, onClick: handleDownload }]}
  onCancel={() => setSelectionModel(new Set())}
/>

Import

import { BulkActionsBar } from '@unflowio/ui/components/BulkActionsBar';

Example

Renders nothing at count: 0 — select a row below to see it appear.


	INVO-2026-001	200
	INVO-2026-002	450
	INVO-2026-003	120

Props

Prop	Type	Description
`count`	`number`	Renders nothing when `0`. Shown in its own square badge, separate from `itemsLabel`.
`itemsLabel`	`string`	Plain text next to the count badge. Defaults to `"selected items"` — the count is never interpolated into it.
`actions`	`{ label, onClick?, icon?, disabled? }[]`	Rendered as plain buttons, left to right.
`onCancel` / `cancelLabel`	`() => void` / `string`	The trailing "Cancel" action — typically clears the selection.

Known scope boundaries

Positioning is sticky bottom-4 within its own render position — it doesn't reach into DataTable to render as an overlay; place it directly below (or wherever makes sense) in your own layout.
Actions are pure reports, same as DataTableHeader's — BulkActionsBar never touches your selection or row data itself.

Overview

Import

Example

Props

Known scope boundaries

On this page