66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { type ReactTable, type RowData } from "@tanstack/react-table"
|
|
import { X } from "lucide-react"
|
|
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import { Input } from "@/registry/new-york-v4/ui/input"
|
|
import { DataTableViewOptions } from "@/app/(app)/examples/tasks/components/data-table-view-options"
|
|
|
|
import { priorities, statuses } from "../data/data"
|
|
import { DataTableFacetedFilter } from "./data-table-faceted-filter"
|
|
import { type TasksTableFeatures } from "./data-table-features"
|
|
|
|
interface DataTableToolbarProps<TData extends RowData> {
|
|
table: ReactTable<TasksTableFeatures, TData>
|
|
}
|
|
|
|
export function DataTableToolbar<TData extends RowData>({
|
|
table,
|
|
}: DataTableToolbarProps<TData>) {
|
|
const isFiltered = table.state.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>
|
|
)
|
|
}
|