Data Table Toolbar

Component 2

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Data Table Toolbar to your project and fits it to your theme.

Code

How Data Table Toolbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}