Data Grid

import { DataGrid } from "@/components/data-grid/data-grid";
import { DataGridKeyboardShortcuts } from "@/components/data-grid/data-grid-keyboard-shortcuts";
import { useDataGrid } from "@/hooks/use-data-grid";

export default function MyDataGrid() {
  const [data, setData] = React.useState(initialData);
  
  const columns = React.useMemo(() => [
    {
      id: "name",
      accessorKey: "name",
      header: "Name",
      meta: {
        cell: {
          variant: "short-text",
        },
      },
    },
    // ... other columns
  ], []);

  const { table, ...dataGridProps } = useDataGrid({
    data,
    columns,
    onDataChange: setData,
    getRowId: (row) => row.id,
  });

  return (
    <>
      <DataGridKeyboardShortcuts />
      <DataGrid table={table} {...dataGridProps} />
    </>
  );
}

import { DataGrid } from "@/components/data-grid/data-grid";
import { DataGridFilterMenu } from "@/components/data-grid/data-grid-filter-menu";
import { DataGridKeyboardShortcuts } from "@/components/data-grid/data-grid-keyboard-shortcuts";
import { DataGridRowHeightMenu } from "@/components/data-grid/data-grid-row-height-menu";
import { DataGridSortMenu } from "@/components/data-grid/data-grid-sort-menu";
import { DataGridViewMenu } from "@/components/data-grid/data-grid-view-menu";
import { useDataGrid } from "@/hooks/use-data-grid";

export default function DataGridToolbarDemo() {
  const { table, ...dataGridProps } = useDataGrid({
    data,
    columns,
    onDataChange: setData,
  });

  return (
    <div className="flex flex-col gap-4">
      {/* Toolbar */}
      <div role="toolbar" aria-orientation="horizontal" className="flex items-center gap-2 self-end">
        <DataGridFilterMenu table={table} />
        <DataGridSortMenu table={table} />
        <DataGridRowHeightMenu table={table} />
        <DataGridViewMenu table={table} />
      </div>
      
      <DataGridKeyboardShortcuts enableSearch={!!dataGridProps.searchState} />
      <DataGrid table={table} {...dataGridProps} />
    </div>
  );
}

const onRowAdd = React.useCallback(() => {
  setData((prev) => [...prev, { id: generateId() }]);
  
  return {
    rowIndex: data.length,
    columnId: "name", // Focus this column after creating the new row
  };
}, [data.length]);

const onRowsDelete = React.useCallback((rows, rowIndices) => {
  // rows: array of row data objects
  // rowIndices: array of row indices
  setData((prev) => prev.filter((row) => !rows.includes(row)));
}, []);

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  onDataChange: setData,
  onRowAdd,
  onRowsDelete,
  getRowId: (row) => row.id,
});

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  onDataChange: setData,
  enableSearch: true, // Enable search (Ctrl/Cmd+F)
});

// Pass search state to keyboard shortcuts for proper shortcuts display
<DataGridKeyboardShortcuts enableSearch={!!dataGridProps.searchState} />

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  onDataChange: setData,
  enablePaste: true, // Enable paste (Ctrl/Cmd+V)
  onRowsAdd: async (count) => {
    // Called when paste needs to add new rows
    // This is more performant than adding rows one by one with the `onRowAdd` prop
    const newRows = Array.from({ length: count }, () => ({ id: generateId() }));
    setData((prev) => [...prev, ...newRows]);
  },
});

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  readOnly: true, // Disable all editing
});

import { DirectionProvider } from "@radix-ui/react-direction";

return (
  <DirectionProvider dir="rtl">
    <DataGridImpl />
  </DirectionProvider>
)

function DataGridImpl() {
  const { table, ...dataGridProps } = useDataGrid({
    data,
    columns,
  });

  return (
    <DataGrid table={table} {...dataGridProps} />
  )
}

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  autoFocus: true, // Focus first navigable cell
  // Or focus a specific cell:
  // autoFocus: { rowIndex: 0, columnId: "name" },
});

<DataGrid 
  table={table} 
  {...dataGridProps} 
  height={800} // Custom height in pixels (default: 600)
  stretchColumns={true} // Stretch columns to fill available width
/>

{
  id: "name",
  accessorKey: "name",
  header: "Name",
  meta: {
    cell: {
      variant: "short-text",
    },
  },
}

{
  id: "notes",
  accessorKey: "notes",
  header: "Notes",
  meta: {
    cell: {
      variant: "long-text",
    },
  },
}

{
  id: "price",
  accessorKey: "price",
  header: "Price",
  meta: {
    cell: {
      variant: "number",
      min: 0,
      max: 1000,
      step: 0.01,
    },
  },
}

{
  id: "website",
  accessorKey: "website",
  header: "Website",
  meta: {
    cell: {
      variant: "url",
    },
  },
}

{
  id: "isActive",
  accessorKey: "isActive",
  header: "Active",
  meta: {
    cell: {
      variant: "checkbox",
    },
  },
}

{
  id: "category",
  accessorKey: "category",
  header: "Category",
  meta: {
    cell: {
      variant: "select",
      options: [
        { label: "Electronics", value: "electronics" },
        { label: "Clothing", value: "clothing" },
        { label: "Books", value: "books" },
      ],
    },
  },
}

{
  id: "skills",
  accessorKey: "skills",
  header: "Skills",
  meta: {
    cell: {
      variant: "multi-select",
      options: [
        { label: "JavaScript", value: "javascript" },
        { label: "TypeScript", value: "typescript" },
        { label: "React", value: "react" },
      ],
    },
  },
}

{
  id: "startDate",
  accessorKey: "startDate",
  header: "Start Date",
  meta: {
    cell: {
      variant: "date",
    },
  },
}

{
  id: "attachments",
  accessorKey: "attachments",
  header: "Attachments",
  meta: {
    cell: {
      variant: "file",
      maxFileSize: 10 * 1024 * 1024, // 10MB
      maxFiles: 5,
      accept: "image/*,video/*,audio/*,.pdf,.doc,.docx",
      multiple: true,
    },
  },
}

const onFilesUpload = React.useCallback(async ({ files, rowIndex, columnId }) => {
  // Upload files to your server/storage
  const formData = new FormData();
  files.forEach(file => formData.append('files', file));
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
  
  const data = await response.json();
  
  // Return array of file metadata
  return data.files.map(f => ({
    id: f.fileId,
    name: f.fileName,
    size: f.fileSize,
    type: f.fileType,
    url: f.fileUrl
  }));
}, []);

const onFilesDelete = React.useCallback(async ({ fileIds, rowIndex, columnId }) => {
  // Delete files from your server/storage
  await fetch('/api/files', {
    method: 'DELETE',
    body: JSON.stringify({ fileIds })
  });
}, []);

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  onFilesUpload,
  onFilesDelete,
});

import { Checkbox } from "@/components/ui/checkbox";

const columns = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
      />
    ),
    cell: ({ row, table }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => {
          const onRowSelect = table.options.meta?.onRowSelect;
          if (onRowSelect) {
            onRowSelect(row.index, !!value, false);
          } else {
            row.toggleSelected(!!value);
          }
        }}
        onClick={(event) => {
          if (event.shiftKey) {
            event.preventDefault();
            const onRowSelect = table.options.meta?.onRowSelect;
            if (onRowSelect) {
              onRowSelect(row.index, !row.getIsSelected(), true);
            }
          }
        }}
      />
    ),
    size: 40,
    enableSorting: false,
    enableHiding: false,
    enableResizing: false,
  },
  // ... other columns
];

// Cell composition flow
<DataGridCell cell={cell} table={table} />
  ↓
<ShortTextCell {...props} />  // Based on variant
  ↓
<DataGridCellWrapper {...props}>
  {/* Cell-specific content */}
</DataGridCellWrapper>

import { DataGridCellWrapper } from "@/components/data-grid/data-grid-cell-wrapper";
import type { DataGridCellProps } from "@/types/data-grid";

export function CustomCell<TData>({
  cell,
  tableMeta,
  rowIndex,
  columnId,
  isFocused,
  isEditing,
  isSelected,
  isSearchMatch,
  isActiveSearchMatch,
  readOnly,
}: DataGridCellProps<TData>) {
  const value = cell.getValue() as CustomCellValue;
  
  return (
    <DataGridCellWrapper
      cell={cell}
      tableMeta={tableMeta}
      rowIndex={rowIndex}
      columnId={columnId}
      isEditing={isEditing}
      isFocused={isFocused}
      isSelected={isSelected}
      isSearchMatch={isSearchMatch}
      isActiveSearchMatch={isActiveSearchMatch}
      readOnly={readOnly}
    >
      {/* Your custom cell content */}
    </DataGridCellWrapper>
  );
}

import { getFilterFn } from "@/lib/data-grid-filters";

const columns = React.useMemo(() => {
  const filterFn = getFilterFn<YourDataType>();
  
  return [
    {
      id: "name",
      accessorKey: "name",
      header: "Name",
      filterFn, // Enable filtering
      // Sorting is enabled by default
      meta: {
        label: "Name", // Label shown in filter/sort menus
        cell: {
          variant: "short-text",
        },
      },
    },
    // ... other columns
  ];
}, []);

const { table, ...dataGridProps } = useDataGrid({
  data,
  columns,
  initialState: {
    columnPinning: {
      left: ["select", "name"], // Pin to left side
      right: ["actions"], // Pin to right side
    },
  },
});

{
  id: "name",
  accessorKey: "name",
  header: "Name",
  minSize: 180, // Minimum width in pixels
  meta: {
    cell: {
      variant: "short-text",
    },
  },
}