Data Table Toolbar

Global search, column filters, reset control, and custom content area for data tables.

Installation

bash

pnpm dlx shadcn@latest add @cs/data-table-toolbar

tsx

import { DataTableToolbar } from "@/components/cs/data-table-toolbar"

tsx

<DataTableToolbar table={table} disabled={false} />

Renders global search, configured column filters, and reset controls for a data table.

Name	Type	Default	Description
children	ReactNode	-	Content rendered at the end of the toolbar.
disabled *	boolean	-	Disables the search, filters, and reset control.
filters	DataTableToolbarFilter<TData>[]	-	Column filters displayed after the global search input.
table *	FilterableTable	-	Data-table interface providing filter state and update methods.
translationsRootKey	string	"table"	Namespace containing `minTwo`, `search`, `resetFilters`, `columns.<column>`, and the filter messages described by DataTableFilterProps.