Data Table

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import {
4  flexRender,
5  getCoreRowModel,
6  getFilteredRowModel,
7  getPaginationRowModel,
8  getSortedRowModel,
9  useReactTable,
10  type ColumnDef,
11  type ColumnFiltersState,
12  type SortingState,
13  type VisibilityState,
14  type Table as TanstackTable,
15} from '@tanstack/react-table'
16import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, Search, Settings2 } from 'lucide-react'
17import { cn } from '@/lib/utils'
18import { Button } from '@/components/ui/button'
19import { Checkbox } from '@/components/ui/checkbox'
20import { Input } from '@/components/ui/input'
21import {
22  DropdownMenu,
23  DropdownMenuCheckboxItem,
24  DropdownMenuContent,
25  DropdownMenuTrigger,
26} from '@/components/ui/dropdown-menu'
27import {
28  Select,
29  SelectContent,
30  SelectItem,
31  SelectTrigger,
32  SelectValue,
33} from '@/components/ui/select'
34import {
35  Table,
36  TableBody,
37  TableCell,
38  TableHead,
39  TableHeader,
40  TableRow,
41} from '@/components/ui/table'
42 
43// DataTable Context
44interface DataTableContextValue<TData> {
45  table: TanstackTable<TData>
46}
47 
48const DataTableContext = React.createContext<DataTableContextValue<unknown> | null>(null)
49 
50function useDataTable<TData>() {
51  const context = React.useContext(DataTableContext)
52  if (!context) {
53    throw new Error('DataTable components must be used within a <DataTable />')
54  }
55  return context as DataTableContextValue<TData>
56}
57 
58// Column Header with sorting
59interface DataTableColumnHeaderProps<TData, TValue>
60  extends React.HTMLAttributes<HTMLDivElement> {
61  column: import('@tanstack/react-table').Column<TData, TValue>
62  title: string
63}
64 
65function DataTableColumnHeader<TData, TValue>({
66  column,
67  title,
68  className,
69}: DataTableColumnHeaderProps<TData, TValue>) {
70  if (!column.getCanSort()) {
71    return <div className={cn(className)}>{title}</div>
72  }
73 
74  return (
75    <Button
76      variant="ghost"
77      size="sm"
78      className={cn('-ml-3 h-8 data-[state=open]:bg-accent', className)}
79      onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
80    >
81      <span>{title}</span>
82      {column.getIsSorted() === 'desc' ? (
83        <ArrowDown className="ml-2 h-4 w-4" />
84      ) : column.getIsSorted() === 'asc' ? (
85        <ArrowUp className="ml-2 h-4 w-4" />
86      ) : (
87        <ArrowUpDown className="ml-2 h-4 w-4" />
88      )}
89    </Button>
90  )
91}
92 
93// Toolbar
94interface DataTableToolbarProps<TData> {
95  table: TanstackTable<TData>
96  filterPlaceholder?: string
97// … truncated