Data Table

1"use client";
2 
3import * as React from "react";
4import {
5  cn,
6  Table,
7  TableBody,
8  TableRow,
9  TableCell,
10  TableHeader,
11  TableHead,
12  Button,
13  Tooltip,
14  TooltipContent,
15  TooltipProvider,
16  TooltipTrigger,
17  Accordion,
18  AccordionContent,
19  AccordionItem,
20  AccordionTrigger,
21} from "./_adapter";
22import {
23  sortData,
24  createDataTableRowKeys,
25  getDataTableMobileDescriptionId,
26} from "./utilities";
27import { renderFormattedValue } from "./formatters";
28import type {
29  DataTableProps,
30  DataTableContextValue,
31  RowData,
32  DataTableRowData,
33  ColumnKey,
34  Column,
35} from "./types";
36import type { FormatConfig } from "./formatters";
37 
38export const DEFAULT_LOCALE = "en-US" as const;
39 
40function isNumericFormat(format?: FormatConfig): boolean {
41  const kind = format?.kind;
42  return (
43    kind === "number" ||
44    kind === "currency" ||
45    kind === "percent" ||
46    kind === "delta"
47  );
48}
49 
50function getAlignmentClass(
51  align?: "left" | "right" | "center",
52): string | undefined {
53  if (align === "right") return "text-right";
54  if (align === "center") return "text-center";
55  return undefined;
56}
57 
58const DataTableContext = React.createContext<
59  // eslint-disable-next-line @typescript-eslint/no-explicit-any
60  DataTableContextValue<any> | undefined
61>(undefined);
62 
63export function useDataTable<T extends object = RowData>() {
64  const context = React.use(DataTableContext) as
65    | DataTableContextValue<T>
66    | undefined;
67  if (!context) {
68    throw new Error("useDataTable must be used within <DataTable.Provider />");
69  }
70  return context;
71}
72 
73type DataTableLayout = "auto" | "table" | "cards";
74 
75type DataTableBaseProps<T extends object = RowData> = DataTableProps<T> & {
76  layout: DataTableLayout;
77};
78 
79type DataTableProviderProps<T extends object = RowData> = Pick<
80  DataTableProps<T>,
81  | "columns"
82  | "data"
83  | "rowIdKey"
84  | "defaultSort"
85  | "sort"
86  | "onSortChange"
87  | "id"
88  | "locale"
89> & {
90  children: React.ReactNode;
91};
92 
93function DataTableProvider<T extends object = RowData>({
94  columns,
95  data: rawData,
96  rowIdKey,
97  defaultSort,
98  sort: controlledSort,
99  id,
100  onSortChange,
101  locale,
102  children,
103}: DataTableProviderProps<T>) {
104  // Default locale avoids SSR/client formatting mismatches.
105  const resolvedLocale = locale ?? DEFAULT_LOCALE;
106 
107  const [internalSortBy, setInternalSortBy] = React.useState<
108    ColumnKey<T> | undefined
109  >(defaultSort?.by);
110  const [internalSortDirection, setInternalSortDirection] = React.useState<
111    "asc" | "desc" | undefined
112// … truncated