Data Table

1"use client";
2 
3import {
4  type Column,
5  type ColumnDef,
6  type ColumnFiltersState,
7  flexRender,
8  getCoreRowModel,
9  getFilteredRowModel,
10  getPaginationRowModel,
11  getSortedRowModel,
12  type SortingState,
13  useReactTable,
14  type VisibilityState,
15} from "@tanstack/react-table";
16import {
17  ChevronLeft,
18  ChevronRight,
19  ChevronsLeft,
20  ChevronsRight,
21  ChevronsUpDown,
22  EyeOff,
23  SortAsc,
24  SortDesc,
25} from "lucide-react";
26import React from "react";
27import {
28  DropdownMenu,
29  DropdownMenuCheckboxItem,
30  DropdownMenuContent,
31  DropdownMenuItem,
32  DropdownMenuSeparator,
33  DropdownMenuTrigger,
34} from "@/components/ui/dropdown-menu";
35import { Input } from "@/components/ui/input";
36import {
37  Select,
38  SelectContent,
39  SelectItem,
40  SelectTrigger,
41  SelectValue,
42} from "@/components/ui/select";
43import {
44  Table,
45  TableBody,
46  TableCell,
47  TableHead,
48  TableHeader,
49  TableRow,
50} from "@/components/ui/table";
51import { cn } from "@/lib/utils";
52import { Button } from "@/registry/new-york/components/button";
53 
54interface DataTableProps<TData, TValue> {
55  columns: ColumnDef<TData, TValue>[];
56  data: TData[];
57}
58 
59function DataTable<TData, TValue>({
60  columns,
61  data,
62}: DataTableProps<TData, TValue>) {
63  const [sorting, setSorting] = React.useState<SortingState>([]);
64  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
65    [],
66  );
67  const [columnVisibility, setColumnVisibility] =
68    React.useState<VisibilityState>({});
69  const [rowSelection, setRowSelection] = React.useState({});
70  const pageSizes: number[] = [10, 25, 50];
71 
72  const table = useReactTable({
73    data,
74    columns,
75    getCoreRowModel: getCoreRowModel(),
76    getPaginationRowModel: getPaginationRowModel(),
77    onSortingChange: setSorting,
78    getSortedRowModel: getSortedRowModel(),
79    onColumnFiltersChange: setColumnFilters,
80    getFilteredRowModel: getFilteredRowModel(),
81    onColumnVisibilityChange: setColumnVisibility,
82    onRowSelectionChange: setRowSelection,
83    state: {
84      sorting,
85      columnFilters,
86      columnVisibility,
87      rowSelection,
88    },
89  });
90 
91  return (
92    <div>
93      {/* Filters and row visibility */}
94      <div className="flex items-center py-4">
95        <Input
96          placeholder="Filter emails..."
97          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
98          onChange={(event) =>
99            table.getColumn("email")?.setFilterValue(event.target.value)
100          }
101          className="max-w-sm"
102        />
103// … truncated