Data Table Toolbar
The bar above a list: search, filters, column visibility and the active filters as removable chips. It holds no state of its own, so the list stays the source of truth.
bunx --bun shadcn@4.17.0 add @waimakers/data-table-toolbar- Kit dependencies
- utilsbuttonbadgeinput-groupdropdown-menu
- npm dependencies
- lucide-react@1.33.0
From the registry
Search, filters and column visibility for a list.
Examples
Search and filters
Search with a clear button, a status filter, and a chip for each active filter. Clear filters resets them all.
"notes"Running
Column visibility
Pass columns and onColumnVisibilityChange to add the Columns menu. It shows from 770px of toolbar width, where hiding columns helps.
Showing Name, Owner, Status.
Submit on enter
For server search, pass onSearchSubmit so the query runs on Enter, with a hint below the field.
No search yet.
With actions
Children sit at the end of the row, for an export or a create action.