Data Table

1import {
2  type ColumnDef,
3  flexRender,
4  getCoreRowModel,
5  useReactTable,
6} from "@tanstack/react-table"
7 
8import {
9  Table,
10  TableBody,
11  TableCell,
12  TableHead,
13  TableHeader,
14  TableRow,
15} from "@/registry/ui/table"
16 
17interface DataTableProps<TData, TValue> {
18  columns: ColumnDef<TData, TValue>[]
19  data: TData[]
20}
21 
22function DataTable<TData, TValue>({
23  columns,
24  data,
25}: DataTableProps<TData, TValue>) {
26  const table = useReactTable({
27    data,
28    columns,
29    getCoreRowModel: getCoreRowModel(),
30  })
31 
32  return (
33    <Table>
34      <TableHeader>
35        {table.getHeaderGroups().map((headerGroup) => (
36          <TableRow key={headerGroup.id}>
37            {headerGroup.headers.map((header) => (
38              <TableHead key={header.id}>
39                {header.isPlaceholder
40                  ? null
41                  : flexRender(
42                      header.column.columnDef.header,
43                      header.getContext(),
44                    )}
45              </TableHead>
46            ))}
47          </TableRow>
48        ))}
49      </TableHeader>
50      <TableBody>
51        {table.getRowModel().rows?.length ? (
52          table.getRowModel().rows.map((row) => (
53            <TableRow
54              key={row.id}
55              data-state={row.getIsSelected() && "selected"}
56            >
57              {row.getVisibleCells().map((cell) => (
58                <TableCell key={cell.id}>
59                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
60                </TableCell>
61              ))}
62            </TableRow>
63          ))
64        ) : (
65          <TableRow>
66            <TableCell colSpan={columns.length} className="h-24 text-center">
67              no results.
68            </TableCell>
69          </TableRow>
70        )}
71      </TableBody>
72    </Table>
73  )
74}
75 
76export { DataTable, type DataTableProps }