Data Table

1"use client";
2
3import * as React from "react";
4import {
5  useReactTable,
6  getCoreRowModel,
7  getSortedRowModel,
8  getFilteredRowModel,
9  getPaginationRowModel,
10  flexRender,
11  type ColumnDef,
12  type SortingState,
13  type RowSelectionState,
14  type ColumnFiltersState,
15  type PaginationState,
16  type VisibilityState,
17  type OnChangeFn,
18  type Row,
19  type Column,
20} from "@tanstack/react-table";
21import { HugeiconsIcon } from "@hugeicons/react";
22import {
23  SortByDown01Icon,
24  SortByUp01Icon,
25  ArrowUpDownIcon,
26} from "@hugeicons/core-free-icons";
27
28import { cn } from "@/lib/utils";
29import { elevatedSurface } from "@/registry/default/lib/elevated";
30import { Checkbox } from "@/registry/default/checkbox/checkbox";
31import {
32  DataTableContext,
33  useDataTable,
34} from "@/registry/default/data-table/data-table-context";
35import {
36  Toolbar,
37  ToolbarSeparator,
38  type ToolbarProps,
39} from "@/registry/default/toolbar/toolbar";
40import {
41  Table,
42  TableHeader,
43  TableBody,
44  TableFooter,
45  TableHead,
46  TableRow,
47  TableCell,
48  type TableProps,
49} from "@/registry/default/table/table";
50import { DataTableSearch } from "@/registry/default/data-table/data-table-search";
51import { DataTableColumnToggle } from "@/registry/default/data-table/data-table-column-toggle";
52import { DataTablePagination } from "@/registry/default/data-table/data-table-pagination";
53
54export interface DataTableProps<TData, TValue> {
55  columns: ColumnDef<TData, TValue>[];
56  data: TData[];
57  children: React.ReactNode;
58  className?: string;
59
60  enableSorting?: boolean;
61  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
62  enableMultiRowSelection?: boolean;
63  enableFiltering?: boolean;
64  enablePagination?: boolean;
65
66  showSelectionColumn?: boolean;
67
68  sorting?: SortingState;
69  onSortingChange?: OnChangeFn<SortingState>;
70  rowSelection?: RowSelectionState;
71  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
72  columnFilters?: ColumnFiltersState;
73  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
74  pagination?: PaginationState;
75  onPaginationChange?: OnChangeFn<PaginationState>;
76  columnVisibility?: VisibilityState;
77  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
78  globalFilter?: string;
79  onGlobalFilterChange?: OnChangeFn<string>;
80
81  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
82}
83
84function DataTable<TData, TValue>({
85  columns: userColumns,
86  data,
87  children,
88// … truncated