DataToolbar
Horizontal action strip above a data table — Search, Filters, ViewSwitcher, and Actions slots.
Interactive-mode
Examples
All slots — search, filters, view switcher, actions
Search + Actions only
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| DataToolbar | Horizontal flex strip sitting above a data table. The Search slot occupies flex-1 max-w-md on the left; Filters and ViewSwitcher sit in the middle; Actions is pinned to the trailing edge with ml-auto. Density controls padding and gap; Borders wraps the strip in a bordered rounded container. |
DataToolbar
Horizontal flex strip sitting above a data table. The Search slot occupies flex-1 max-w-md on the left; Filters and ViewSwitcher sit in the middle; Actions is pinned to the trailing edge with ml-auto. Density controls padding and gap; Borders wraps the strip in a bordered rounded container.
| Property | Type | Required | Description |
|---|---|---|---|
| Search | RenderFragment? | Left-aligned search input area (flex-1 max-w-md). | |
| Filters | RenderFragment? | Middle filter controls — typically one or more Button chips. | |
| ViewSwitcher | RenderFragment? | View toggle controls — typically icon buttons. | |
| Actions | RenderFragment? | Trailing action slot pinned to the right with ml-auto. | |
| Borders | bool | Wraps the strip in border border-border rounded-lg. Default: false. | |
| Gutters | bool | Adds density-appropriate padding to the strip. Default: true. | |
| Density | Density | Controls padding and gap. Comfortable (default) or Compact. |