Data display

Table toolbar

Sits above a data table with search, filters and actions, and switches to a bulk-action bar when rows are selected.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { TableToolbar } from "@/components/ui/table-toolbar";

Any table people search, filter or act on in bulk.
Pair with row checkboxes so selecting rows reveals bulk actions such as Export or Delete.

Search on the left, filter controls after it, actions pushed to the right.

Any selectedCount above zero shows the violet bulk-action bar. Clear selection here returns to the default state.

Controlled: it holds no state. Filtering and selection live in your component.

Prop	Type	Default	Description
search	{ value: string; onChange: (value: string) => void; placeholder?: string }	-	Shows a search input with a leading icon. The placeholder (default "Search…") is also used as its aria-label.
filters	React.ReactNode	-	Filter controls shown after the search box.
actions	React.ReactNode	-	Right-aligned actions such as Export or Invite.
selectedCount	number	0	When above zero, the toolbar switches to the selected state: a violet bar with the count and bulk actions. Search, filters and actions are hidden.
bulkActions	React.ReactNode	-	Actions shown in the selected state, after the count.
onClearSelection	() => void	-	Shows a right-aligned "Clear selection" ghost button in the selected state.
className	string	-	Extra classes for the toolbar row.

The search field is a native input type="search" labelled by its placeholder text (or "Search").
The "N selected" count is rendered with aria-live="polite".
When the toolbar switches state, the search input unmounts. Keep focus on the checkbox the person just used rather than moving it into the toolbar.