139 lines
4.2 KiB
TypeScript
139 lines
4.2 KiB
TypeScript
import { Table } from "@tanstack/react-table";
|
|
|
|
//import { priorities, statuses } from './Data'
|
|
import { DataTableFilterField } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button, Input } from "@/ui";
|
|
import { CrossIcon } from "lucide-react";
|
|
import { useMemo } from "react";
|
|
import { DataTableFacetedFilter } from "../DataTableFacetedFilter";
|
|
import { DataTableColumnOptions } from "./DataTableColumnOptions";
|
|
|
|
interface DataTableToolbarProps<TData>
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
table: Table<TData>;
|
|
filterFields?: DataTableFilterField<TData>[];
|
|
}
|
|
|
|
export function DataTableToolbar<TData>({
|
|
table,
|
|
filterFields = [],
|
|
children,
|
|
className,
|
|
...props
|
|
}: DataTableToolbarProps<TData>) {
|
|
const isFiltered = table.getState().columnFilters.length > 0;
|
|
|
|
// Memoize computation of searchableColumns and filterableColumns
|
|
const { searchableColumns, filterableColumns } = useMemo(() => {
|
|
return {
|
|
searchableColumns: filterFields.filter((field) => !field.options),
|
|
filterableColumns: filterFields.filter((field) => field.options),
|
|
};
|
|
}, [filterFields]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex w-full items-center justify-between space-x-2 overflow-auto p-1",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="flex items-center flex-1 space-x-2">
|
|
{searchableColumns.length > 0 &&
|
|
searchableColumns.map(
|
|
(column) =>
|
|
table.getColumn(column.value ? String(column.value) : "") && (
|
|
<Input
|
|
key={String(column.value)}
|
|
placeholder={column.placeholder}
|
|
value={
|
|
(table
|
|
.getColumn(String(column.value))
|
|
?.getFilterValue() as string) ?? ""
|
|
}
|
|
onChange={(event) =>
|
|
table
|
|
.getColumn(String(column.value))
|
|
?.setFilterValue(event.target.value)
|
|
}
|
|
className="w-40 h-8 lg:w-64"
|
|
/>
|
|
),
|
|
)}
|
|
{filterableColumns.length > 0 &&
|
|
filterableColumns.map(
|
|
(column) =>
|
|
table.getColumn(column.value ? String(column.value) : "") && (
|
|
<DataTableFacetedFilter
|
|
key={String(column.value)}
|
|
column={table.getColumn(
|
|
column.value ? String(column.value) : "",
|
|
)}
|
|
title={column.label}
|
|
options={column.options ?? []}
|
|
/>
|
|
),
|
|
)}
|
|
{isFiltered && (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => table.resetColumnFilters()}
|
|
className="h-8 px-2 lg:px-3"
|
|
>
|
|
Reset filters
|
|
<CrossIcon className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{children}
|
|
{table.options.enableHiding && <DataTableColumnOptions table={table} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/*
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center flex-1 space-x-2">
|
|
<Input
|
|
placeholder="Filter tasks..."
|
|
value={(table.getColumn("customer")?.getFilterValue() as string) ?? ""}
|
|
onChange={(event) =>
|
|
table.getColumn("customer")?.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"
|
|
onClick={() => table.resetColumnFilters()}
|
|
className="h-8 px-2 lg:px-3"
|
|
>
|
|
Reset
|
|
<CrossIcon className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<DataTableViewOptions table={table} />
|
|
</div>
|
|
)
|
|
*/
|
|
}
|