Data Table

1"use client";
2 
3import {
4  type Column,
5  type ColumnDef,
6  flexRender,
7  getCoreRowModel,
8  getSortedRowModel,
9  type SortingState,
10  useReactTable,
11} from "@tanstack/react-table";
12import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
13import { useState } from "react";
14import { cn } from "@/lib/utils";
15import { Button } from "@/components/ui/button";
16import {
17  Table,
18  TableBody,
19  TableCell,
20  TableHead,
21  TableHeader,
22  TableRow,
23} from "@/components/ui/table";
24 
25export interface DataTableProps<TData, TValue> {
26  columns: ColumnDef<TData, TValue>[];
27  data: TData[];
28  className?: string;
29  /** Enable client-side sorting for sortable columns */
30  enableSorting?: boolean;
31}
32 
33export function DataTable<TData, TValue>({
34  columns,
35  data,
36  className,
37  enableSorting = true,
38}: DataTableProps<TData, TValue>) {
39  const [sorting, setSorting] = useState<SortingState>([]);
40 
41  const table = useReactTable({
42    data,
43    columns,
44    state: enableSorting ? { sorting } : undefined,
45    onSortingChange: enableSorting ? setSorting : undefined,
46    getCoreRowModel: getCoreRowModel(),
47    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
48  });
49 
50  return (
51    <div className={cn("w-full space-y-4", className)}>
52      <Table>
53        <TableHeader>
54          {table.getHeaderGroups().map((headerGroup) => (
55            <TableRow key={headerGroup.id}>
56              {headerGroup.headers.map((header) => (
57                <TableHead key={header.id} className="whitespace-nowrap">
58                  {header.isPlaceholder
59                    ? null
60                    : flexRender(
61                        header.column.columnDef.header,
62                        header.getContext(),
63                      )}
64                </TableHead>
65              ))}
66            </TableRow>
67          ))}
68        </TableHeader>
69        <TableBody>
70          {table.getRowModel().rows.length ? (
71            table.getRowModel().rows.map((row) => (
72              <TableRow
73                key={row.id}
74                data-state={row.getIsSelected() && "selected"}
75              >
76                {row.getVisibleCells().map((cell) => (
77                  <TableCell key={cell.id}>
78                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
79                  </TableCell>
80                ))}
81              </TableRow>
82            ))
83          ) : (
84            <TableRow>
85              <TableCell
86                colSpan={columns.length}
87// … truncated