DataToolbar
Search, filters, density and actions above a data view, without tying them to a table engine.
5 of 5 projects
| Project | Owner | Status |
|---|---|---|
| Marketing site | Ana Ruiz | Active |
| Billing API | Luis Gómez | Active |
| Mobile app | Sara Kim | Paused |
| Data pipeline | Ana Ruiz | Active |
| Design system | Omar Haddad | Paused |
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add data-toolbarDependencies
What add data-toolbar installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils@zuno/toggle-group
Examples
2 examples · 1 component5 of 5 projects
| Project | Owner | Status |
|---|---|---|
| Marketing site | Ana Ruiz | Active |
| Billing API | Luis Gómez | Active |
| Mobile app | Sara Kim | Paused |
| Data pipeline | Ana Ruiz | Active |
| Design system | Omar Haddad | Paused |
Search, filter and density
The toolbar drives a Table: the search and status filter narrow the rows, density changes the row height and the count is announced.
- Status: Active
- Owner: Ana Ruiz
- Updated: last 7 days
Active filters
Each applied filter can be removed on its own; Clear all resets them.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
DataToolbarA role="group" row that wraps on narrow screens. Name it with aria-label ("Projects"). | div | — |
DataToolbarFiltersGrows to fill the row: search, selects and other filter controls. | div | — |
DataToolbarActionsView and data actions: density, columns, export, create. | div | — |
DataToolbarDensityA two-option ToggleGroup with the same values as Table density. labels names each option for screen readers. | { value: "comfortable" | "compact"; onValueChange; labels? } | — |
DataToolbarCountA role="status" result count, announced when the filters change. Keep it mounted, even at zero. | p | — |
DataToolbarFilterListThe row of active filters, under the controls. | ul | — |
DataToolbarFilterOne active filter with its remove button. Name the button after the filter ("Remove status: Active"). | li & { onRemove: () => void; removeLabel?: string } | removeLabel: "Remove filter" |
Accessibility
A labelled role="group", not role="toolbar": a toolbar takes over the arrow keys, which text inputs and selects need for themselves. Each control stays a normal Tab stop.
DataToolbarCount is a polite live region, so typing in the search announces the new count without moving focus. Render it from the start; a region inserted later is often not announced.
Density is a ToggleGroup with a name ("Row density") and one labelled option per value; the arrow keys move between them.
Removing a filter moves focus to the next filter, or the previous one, instead of dropping it to the page. When you remove the last one, move focus to the search or the filter control yourself.
It only lays out controls: filtering, sorting and fetching belong to your data layer, whether that is local state, a server query or a table engine.