Data Grid

1"use client";
2 
3import { Plus } from "lucide-react";
4import * as React from "react";
5import { DataGridColumnHeader } from "@/components/data-grid/data-grid-column-header";
6import { DataGridContextMenu } from "@/components/data-grid/data-grid-context-menu";
7import { DataGridPasteDialog } from "@/components/data-grid/data-grid-paste-dialog";
8import { DataGridRow } from "@/components/data-grid/data-grid-row";
9import { DataGridSearch } from "@/components/data-grid/data-grid-search";
10import { useAsRef } from "@/hooks/use-as-ref";
11import type { useDataGrid } from "@/hooks/use-data-grid";
12import {
13  flexRender,
14  getColumnBorderVisibility,
15  getColumnPinningStyle,
16} from "@/lib/data-grid";
17import { cn } from "@/lib/utils";
18import type { Direction } from "@/types/data-grid";
19 
20const EMPTY_CELL_SELECTION_SET = new Set<string>();
21 
22interface DataGridProps<TData>
23  extends Omit<ReturnType<typeof useDataGrid<TData>>, "dir">,
24    Omit<React.ComponentProps<"div">, "contextMenu"> {
25  dir?: Direction;
26  height?: number;
27  stretchColumns?: boolean;
28}
29 
30export function DataGrid<TData>({
31  dataGridRef,
32  headerRef,
33  rowMapRef,
34  footerRef,
35  dir = "ltr",
36  table,
37  tableMeta,
38  virtualTotalSize,
39  virtualItems,
40  measureElement,
41  columns,
42  columnSizeVars,
43  searchState,
44  searchMatchesByRow,
45  activeSearchMatch,
46  cellSelectionMap,
47  focusedCell,
48  editingCell,
49  rowHeight,
50  contextMenu,
51  pasteDialog,
52  onRowAdd: onRowAddProp,
53  height = 600,
54  stretchColumns = false,
55  adjustLayout = false,
56  className,
57  ...props
58}: DataGridProps<TData>) {
59  const rows = table.getRowModel().rows;
60  const readOnly = tableMeta?.readOnly ?? false;
61  const columnVisibility = table.getState().columnVisibility;
62  const columnPinning = table.getState().columnPinning;
63 
64  const onRowAddRef = useAsRef(onRowAddProp);
65 
66  const onRowAdd = React.useCallback(
67    (event: React.MouseEvent<HTMLDivElement>) => {
68      onRowAddRef.current?.(event);
69    },
70    [onRowAddRef],
71  );
72 
73  const onDataGridContextMenu = React.useCallback(
74    (event: React.MouseEvent<HTMLDivElement>) => {
75      event.preventDefault();
76    },
77    [],
78  );
79 
80  const onFooterCellKeyDown = React.useCallback(
81    (event: React.KeyboardEvent<HTMLDivElement>) => {
82      if (!onRowAddRef.current) return;
83 
84      if (event.key === "Enter" || event.key === " ") {
85        event.preventDefault();
86        onRowAddRef.current();
87      }
88    },
89    [onRowAddRef],
90  );
91 
92  return (
93    <div
94      data-slot="grid-wrapper"
95      dir={dir}
96// … truncated