DataTableToolbar() — ui Function Reference

Architecture documentation for the DataTableToolbar() function in data-table-toolbar.tsx from the ui codebase.

Function tsx ApplicationExhibition TaskManagement

Entity Profile

ApplicationExhibition→ TaskManagement→ DataTableToolbar() — ui Function Reference

Dependency Diagram

graph TD
  9ec17bd6_3d6b_5d3a_d2ba_fb37d056edb4["DataTableToolbar()"]
  3f48c144_ad77_88d6_d116_724634f2678d["data-table-toolbar.tsx"]
  9ec17bd6_3d6b_5d3a_d2ba_fb37d056edb4 -->|defined in| 3f48c144_ad77_88d6_d116_724634f2678d
  style 9ec17bd6_3d6b_5d3a_d2ba_fb37d056edb4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx lines 17–64

export function DataTableToolbar<TData>({
  table,
}: DataTableToolbarProps<TData>) {
  const isFiltered = table.getState().columnFilters.length > 0

  return (
    <div className="flex items-center justify-between">
      <div className="flex flex-1 items-center gap-2">
        <Input
          placeholder="Filter tasks..."
          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("title")?.setFilterValue(event.target.value)
          }
          className="h-8 w-[150px] lg:w-[250px]"
        />
        {table.getColumn("status") && (
          <DataTableFacetedFilter
            column={table.getColumn("status")}
            title="Status"
            options={statuses}
          />
        )}
        {table.getColumn("priority") && (
          <DataTableFacetedFilter
            column={table.getColumn("priority")}
            title="Priority"
            options={priorities}
          />
        )}
        {isFiltered && (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => table.resetColumnFilters()}
          >
            Reset
            <X />
          </Button>
        )}
      </div>
      <div className="flex items-center gap-2">
        <DataTableViewOptions table={table} />
        <Button size="sm">Add Task</Button>
      </div>
    </div>
  )
}