A composable toolbar for data tables that bundles row search, a column-visibility popover, an export action, and an animated bulk-actions bar for selected rows.
import DataTableToolbar, {
DataTableToolbarBulkActions,
DataTableToolbarClearSelection,
DataTableToolbarColumn,
DataTableToolbarColumns,
DataTableToolbarExport,
DataTableToolbarGroup,
DataTableToolbarSearch,
DataTableToolbarSelectionCount,
} from "@/components/ui/data-table-toolbar";
export default function DataTableToolbarDemo() {
return (
<div className="w-full max-w-xl">
<DataTableToolbar
defaultSearch=""
selectedCount={3}
onClearSelection={() => {}}
>
<DataTableToolbarGroup>
<DataTableToolbarSearch placeholder="Search rows..." />
<DataTableToolbarColumns defaultValue={["name", "email", "status"]}>
<DataTableToolbarColumn value="name">Name</DataTableToolbarColumn>
<DataTableToolbarColumn value="email">Email</DataTableToolbarColumn>
<DataTableToolbarColumn value="status">
Status
</DataTableToolbarColumn>
</DataTableToolbarColumns>
<DataTableToolbarExport />
</DataTableToolbarGroup>
<DataTableToolbarBulkActions>
<DataTableToolbarSelectionCount />
<DataTableToolbarClearSelection />
</DataTableToolbarBulkActions>
</DataTableToolbar>
</div>
);
}