table

1import type {
2  Cell,
3  Column,
4  ColumnDef,
5  Header,
6  HeaderGroup,
7  Row,
8  SortingState,
9  Table,
10} from "@tanstack/react-table";
11import {
12  flexRender,
13  getCoreRowModel,
14  getSortedRowModel,
15  useReactTable,
16} from "@tanstack/react-table";
17import { atom, useAtom } from "jotai";
18import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
19import type { HTMLAttributes, ReactNode } from "react";
20import { createContext, memo, useCallback, useContext } from "react";
21import { Button } from "@/components/ui/button";
22import {
23  DropdownMenu,
24  DropdownMenuContent,
25  DropdownMenuItem,
26  DropdownMenuTrigger,
27} from "@/components/ui/dropdown-menu";
28import {
29  TableBody as TableBodyRaw,
30  TableCell as TableCellRaw,
31  TableHeader as TableHeaderRaw,
32  TableHead as TableHeadRaw,
33  Table as TableRaw,
34  TableRow as TableRowRaw,
35} from "@/components/ui/table";
36import { cn } from "@/lib/utils";
37 
38export type { ColumnDef } from "@tanstack/react-table";
39 
40const sortingAtom = atom<SortingState>([]);
41 
42export const TableContext = createContext<{
43  data: unknown[];
44  columns: ColumnDef<unknown, unknown>[];
45  table: Table<unknown> | null;
46}>({
47  data: [],
48  columns: [],
49  table: null,
50});
51 
52export type TableProviderProps<TData, TValue> = {
53  columns: ColumnDef<TData, TValue>[];
54  data: TData[];
55  children: ReactNode;
56  className?: string;
57};
58 
59export function TableProvider<TData, TValue>({
60  columns,
61  data,
62  children,
63  className,
64}: TableProviderProps<TData, TValue>) {
65  const [sorting, setSorting] = useAtom(sortingAtom);
66  const table = useReactTable({
67    data,
68    columns,
69    getCoreRowModel: getCoreRowModel(),
70    getSortedRowModel: getSortedRowModel(),
71    onSortingChange: (updater) => {
72      // @ts-expect-error updater is a function that returns a sorting object
73      const newSorting = updater(sorting);
74 
75      setSorting(newSorting);
76    },
77    state: {
78      sorting,
79    },
80  });
81 
82  return (
83    <TableContext.Provider
84      value={{
85        data,
86        columns: columns as never,
87        table: table as never,
88      }}
89    >
90      <TableRaw className={className}>{children}</TableRaw>
91    </TableContext.Provider>
92  );
93}
94 
95export type TableHeadProps = {
96  header: Header<unknown, unknown>;
97  className?: string;
98};
99 
100export const TableHead = memo(({ header, className }: TableHeadProps) => (
101  <TableHeadRaw className={className} key={header.id}>
102    {header.isPlaceholder
103      ? null
104// … truncated