79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Cross2Icon } from "@radix-ui/react-icons";
|
|
import { Table } from "@tanstack/react-table";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
// import { DataTableViewOptions } from "./components/data-table-view-options"
|
|
|
|
import { DataTableFacetedFilter } from "./data-table-faceted-filter";
|
|
import { DataTableViewOptions } from "./data-table-view-options";
|
|
import { userFilterLabels } from "@/constants/data";
|
|
import { Organization } from "@/types/organization";
|
|
|
|
interface DataTableToolbarProps<TData> {
|
|
table: Table<TData>;
|
|
data: Organization[];
|
|
}
|
|
|
|
export function DataTableToolbar<TData>({
|
|
table,
|
|
data,
|
|
}: DataTableToolbarProps<TData>) {
|
|
const isFiltered = table.getState().columnFilters.length > 0;
|
|
|
|
// const industryFilterOptions = Array.from(
|
|
// new Set(data.map((d) => d.industry.toLocaleLowerCase()))
|
|
// ).map((v) => ({
|
|
// label: v.slice(0, 1).toLocaleUpperCase() + v.slice(1),
|
|
// value: v.slice(0, 1).toLocaleUpperCase() + v.slice(1),
|
|
// }));
|
|
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-1 items-center gap-2 flex-wrap">
|
|
<Input
|
|
placeholder="Search email..."
|
|
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
|
|
onChange={(event: any) =>
|
|
table.getColumn("email")?.setFilterValue(event.target.value)
|
|
}
|
|
className="h-8 w-[150px] lg:w-[250px]"
|
|
/>
|
|
<Input
|
|
placeholder="Search organization..."
|
|
value={
|
|
(table.getColumn("organization")?.getFilterValue() as string) ?? ""
|
|
}
|
|
onChange={(event: any) =>
|
|
table.getColumn("organization")?.setFilterValue(event.target.value)
|
|
}
|
|
className="h-8 w-[150px] lg:w-[250px]"
|
|
/>
|
|
|
|
{/*
|
|
{table.getColumn("industry") && (
|
|
<DataTableFacetedFilter
|
|
column={table.getColumn("industry")}
|
|
title="Industry"
|
|
options={industryFilterOptions}
|
|
/>
|
|
)} */}
|
|
|
|
{/* {isFiltered && (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => table.resetColumnFilters()}
|
|
className="h-8 px-2 lg:px-3"
|
|
>
|
|
Reset
|
|
<Cross2Icon className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
)} */}
|
|
</div>
|
|
<DataTableViewOptions table={table} />
|
|
</div>
|
|
);
|
|
}
|