TableToolbar

Add search, sort, filter, bulk actions, and selection status to DataTable.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use TableToolbar with DataTable for search, sorting, filtering, and bulk actions. It is not a standalone toolbar for a plain Table. Use the built-in controls or replace them through public as roles. Application callbacks perform the actual copy and delete operations.

TableToolbar requires DataTable state. search, sort, and filter control the built-in tools; sortOptions sets the available sort fields explicitly.
Use as="search", "bulk", "sort", or "filter" directly to replace the corresponding region. Implement onCopy and onDelete for application behavior.

Import

import { TableToolbar } from '@snowui-design-system/components';

Usage

Hidden-field sorting

Search control

Bulk Actions Enabled

Sort

Filter

Show Clear Action

Show Copy Action

Show Delete Action

API Reference

Property	Type	Default	Example	Description
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible name of the toolbar role. Defaults to a LocaleProvider message; give distinct names to multiple toolbars.
`search`	`boolean`	`true`	`search`	Show the built-in SearchInput and write its value to the DataTable query. An explicit as="search" item can replace it.
`bulkActionsEnabled`	`boolean`	`true`	`bulkActionsEnabled`	Show the selected count and bulk action area when rows are selected. Disabling it does not clear the selection.
`sort`	`boolean`	`true`	`sort`	Show the built-in sort picker using sortOptions or sortable table headers.
`sortOptions`	`TableToolbarSortOption[]`	`—`	`sortOptions={sortOptions}`	Sort menu fields and order, including fields not displayed as columns. An explicit list replaces automatic header options; an empty list leaves only Default sort. Omit to use sortable headers.
`filter`	`boolean`	`true`	`filter`	Show the built-in filter picker. Actual filtering requires filterKey and filterOptions.
`searchPlaceholder`	`string`	`—`	`searchPlaceholder="Search…"`	Placeholder of the built-in search input. Defaults to a LocaleProvider message.
`searchAriaLabel`	`string`	`—`	`searchAriaLabel="Example"`	Accessible name of the built-in search input. Defaults to a LocaleProvider message.
`sortLabel`	`string`	`—`	`sortLabel="Example"`	Accessible name and tooltip of the sort picker. Defaults to a LocaleProvider message.
`filterLabel`	`string`	`—`	`filterLabel="Example"`	Accessible name and tooltip of the filter picker. Defaults to a LocaleProvider message.
`filterKey`	`string`	`—`	`filterKey="Example"`	Field name written to DataTable filters. Without it, choosing a filter does not change the data filtering condition.
`filterOptions`	`TableToolbarFilterOption[]`	`[]`	`filterOptions={filterOptions}`	Filter choices with label and value. The value may be a string, number, or undefined. Selection matches its string representation, then writes back the original value.
`selectedCount`	`number`	`—`	`selectedCount={42}`	Explicit selected count. If omitted, reads the number of selected DataTable row IDs. It changes only the display and callback argument, not the selected set.
`showClearAction`	`boolean`	`true`	`showClearAction`	Show the Clear selection button in the bulk action area.
`showCopyAction`	`boolean`	`true`	`showCopyAction`	Show the built-in CopyButton in the bulk action area. onCopy performs the actual copy.
`showDeleteAction`	`boolean`	`true`	`showDeleteAction`	Show the Delete button in the bulk action area. onDelete performs the actual deletion.
`clearLabel`	`string`	`—`	`clearLabel="Example"`	Text of the Clear selection button. Defaults to a LocaleProvider message.
`copyLabel`	`string`	`—`	`copyLabel="Example"`	Accessible name and tooltip of the Copy action. Defaults to a LocaleProvider message.
`deleteLabel`	`string`	`—`	`deleteLabel="Example"`	Accessible name and tooltip of the Delete action. Defaults to a LocaleProvider message.
`selectionLabel`	`(count: number) => string`	`—`	`selectionLabel={(value) => { /* handle value */ }}`	Returns display text from the selected count. Defaults to a LocaleProvider message.
`onClearSelection`	`(count: number) => void`	`—`	`onClearSelection={(value) => { /* handle value */ }}`	Receives the selected count when Clear is clicked. Overrides the default clearSelection behavior, so the caller must clear the selection.
`onCopy`	`(count: number) => void \| Promise<void>`	`—`	`onCopy={(value) => { /* handle value */ }}`	Receives the selected count and may return a Promise. Its callback performs the copy; pending work prevents repeated bulk actions.
`onDelete`	`(count: number) => void \| Promise<void>`	`—`	`onDelete={(value) => { /* handle value */ }}`	Receives the selected count and may return a Promise. Its callback performs the delete; pending work shows loading feedback and prevents repeated bulk actions.
`bulkActions`	`Snippet<[number]>`	`—`	`bulkActions={bulkActionsContent}`	Additional bulk actions receiving the selected count. Shown only with a selection when bulk actions are enabled; temporarily inert during a built-in action.
`children`	`Snippet`	`—`	`<TableToolbar>Content</TableToolbar>`	Explicit toolbar content without arguments. as="search", "bulk", "sort", and "filter" replace their built-in regions; other content becomes additional actions.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Separator: typeof Separator; Spinner: typeof Spinner; SearchInput: typeof SearchInput; Select: typeof Select; Listbox: typeof Listbox; MenuItem: typeof MenuItem; }>`	`—`	`parts={partsOptions}`	Configure the toolbar-owned Button, Separator, Spinner, SearchInput, Select, Listbox, and MenuItem instances. Explicit child components are not taken over recursively.