Data Table

1import { flexRender, type Table as TanstackTable } from "@tanstack/react-table";
2import type * as React from "react";
3 
4import { DataTablePagination } from "@/components/data-table/data-table-pagination";
5import {
6  Table,
7  TableBody,
8  TableCell,
9  TableHead,
10  TableHeader,
11  TableRow,
12} from "@/components/ui/table";
13import { getColumnPinningStyle } from "@/lib/data-table";
14import { cn } from "@/lib/utils";
15 
16interface DataTableProps<TData> extends React.ComponentProps<"div"> {
17  table: TanstackTable<TData>;
18  actionBar?: React.ReactNode;
19}
20 
21export function DataTable<TData>({
22  table,
23  actionBar,
24  children,
25  className,
26  ...props
27}: DataTableProps<TData>) {
28  return (
29    <div
30      className={cn("flex w-full flex-col gap-2.5 overflow-auto", className)}
31      {...props}
32    >
33      {children}
34      <div className="overflow-hidden rounded-md border">
35        <Table>
36          <TableHeader>
37            {table.getHeaderGroups().map((headerGroup) => (
38              <TableRow key={headerGroup.id}>
39                {headerGroup.headers.map((header) => (
40                  <TableHead
41                    key={header.id}
42                    colSpan={header.colSpan}
43                    style={{
44                      ...getColumnPinningStyle({ column: header.column }),
45                    }}
46                  >
47                    {header.isPlaceholder
48                      ? null
49                      : flexRender(
50                          header.column.columnDef.header,
51                          header.getContext(),
52                        )}
53                  </TableHead>
54                ))}
55              </TableRow>
56            ))}
57          </TableHeader>
58          <TableBody>
59            {table.getRowModel().rows?.length ? (
60              table.getRowModel().rows.map((row) => (
61                <TableRow
62                  key={row.id}
63                  data-state={row.getIsSelected() && "selected"}
64                >
65                  {row.getVisibleCells().map((cell) => (
66                    <TableCell
67                      key={cell.id}
68                      style={{
69                        ...getColumnPinningStyle({ column: cell.column }),
70                      }}
71                    >
72                      {flexRender(
73                        cell.column.columnDef.cell,
74                        cell.getContext(),
75                      )}
76                    </TableCell>
77                  ))}
78                </TableRow>
79              ))
80            ) : (
81// … truncated