skilld-admin/src/components/skills-table/data-table-toolbar.tsx

33 lines
913 B
TypeScript

"use client";
import { Table } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";
import { DataTableViewOptions } from "./data-table-view-options";
import { Skill } from "@/types/skill";
interface DataTableToolbarProps<TData> {
table: Table<TData>;
data: Skill[];
}
export function DataTableToolbar<TData>({
table,
data,
}: DataTableToolbarProps<TData>) {
return (
<div className="flex items-center justify-between">
<div className="flex flex-1 items-center gap-2 flex-wrap">
<Input
placeholder="Search name..."
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
onChange={(event: any) =>
table.getColumn("name")?.setFilterValue(event.target.value)
}
className="h-8 w-[150px] lg:w-[250px]"
/>
</div>
<DataTableViewOptions table={table} />
</div>
);
}