create-emsgrid 0.1.0

package/src/components/Grid/core/createTable.ts

@@ -0,0 +1,152 @@
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import type { ColumnDef, ExpandedState, Table } from '@tanstack/react-table';
+import type { GridSettings } from './types';
+import { updateSettings } from './settings';
+
+type CreateTableArgs<TData> = {
+  data: TData[];
+  columns: ColumnDef<TData, any>[];
+  settings: GridSettings;
+  onSettingsChange: (next: GridSettings) => void;
+  showFilters: boolean;
+  getSubRows?: (row: TData) => TData[] | undefined;
+  expandedStateOverride?: GridSettings['expanded'];
+  rowCount?: number;
+};
+
+function normalizeColumnOrder(order: string[]) {
+  if (!order.length) return order;
+  const next = order.filter((id) => id !== 'select');
+  return ['select', ...next];
+}
+
+function isExpandedEqual(a: ExpandedState, b: ExpandedState) {
+  if (a === b) return true;
+  if (typeof a === 'boolean' || typeof b === 'boolean') return a === b;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
+export function useGridTable<TData>(args: CreateTableArgs<TData>): Table<TData> {
+  const {
+    data,
+    columns,
+    settings,
+    onSettingsChange,
+    showFilters,
+    getSubRows,
+    expandedStateOverride,
+    rowCount,
+  } = args;
+  const columnOrder = normalizeColumnOrder(settings.columnOrder);
+  const isGroupMode = settings.mode === 'group';
+  const isExpandableMode = settings.mode !== 'flat';
+  const currentExpanded = expandedStateOverride ?? settings.expanded;
+  const safeRowCount = Number.isFinite(rowCount) ? Math.max(rowCount ?? 0, 0) : undefined;
+  const pageCount =
+    safeRowCount !== undefined
+      ? Math.max(1, Math.ceil(safeRowCount / Math.max(settings.pagination.pageSize, 1)))
+      : undefined;
+
+  return useReactTable({
+    data,
+    columns,
+    getRowId: (row) => String((row as any).id),
+    state: {
+      sorting: settings.sorting,
+      columnVisibility: settings.columnVisibility,
+      columnSizing: settings.columnSizing,
+      columnOrder,
+      rowSelection: settings.rowSelection,
+      columnFilters: settings.columnFilters,
+      expanded: isExpandableMode ? currentExpanded : {},
+      grouping: isGroupMode ? settings.grouping : [],
+      pagination: settings.pagination,
+    },
+    manualPagination: true,
+    pageCount,
+    rowCount: safeRowCount,
+    enableColumnFilters: showFilters,
+    enableColumnResizing: true,
+    enableGrouping: true,
+    groupedColumnMode: false,
+    enableMultiSort: true,
+    autoResetAll: false,
+    autoResetExpanded: false,
+    filterFromLeafRows: true,
+    maxLeafRowFilterDepth: 99,
+    isMultiSortEvent: (e) => {
+      if (!e || typeof e !== 'object') return false;
+      return 'ctrlKey' in e && Boolean((e as MouseEvent).ctrlKey);
+    },
+    enableRowSelection: true,
+    onSortingChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.sorting) : updater;
+      onSettingsChange(updateSettings(settings, { sorting: next }));
+    },
+    onColumnVisibilityChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.columnVisibility) : updater;
+      onSettingsChange(updateSettings(settings, { columnVisibility: next }));
+    },
+    onColumnSizingChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.columnSizing) : updater;
+      onSettingsChange(updateSettings(settings, { columnSizing: next }));
+    },
+    onColumnOrderChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.columnOrder) : updater;
+      onSettingsChange(updateSettings(settings, { columnOrder: normalizeColumnOrder(next) }));
+    },
+    onRowSelectionChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.rowSelection) : updater;
+      onSettingsChange(updateSettings(settings, { rowSelection: next }));
+    },
+    onColumnFiltersChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.columnFilters) : updater;
+      onSettingsChange(updateSettings(settings, { columnFilters: next }));
+    },
+    onGroupingChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.grouping) : updater;
+      onSettingsChange(
+        updateSettings(settings, {
+          grouping: next,
+          pagination: { ...settings.pagination, pageIndex: 0 },
+        })
+      );
+    },
+    onExpandedChange: isExpandableMode
+      ? (updater) => {
+          const next = typeof updater === 'function' ? updater(currentExpanded) : updater;
+          if (isExpandedEqual(next, currentExpanded)) return;
+          onSettingsChange(
+            updateSettings(settings, {
+              expanded: next,
+              pagination: { ...settings.pagination, pageIndex: 0 },
+            })
+          );
+        }
+      : undefined,
+    onPaginationChange: (updater) => {
+      const next = typeof updater === 'function' ? updater(settings.pagination) : updater;
+      onSettingsChange(updateSettings(settings, { pagination: next }));
+    },
+    columnResizeMode: 'onChange',
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: isExpandableMode ? getExpandedRowModel() : undefined,
+    getFilteredRowModel: getFilteredRowModel(),
+    getGroupedRowModel: getGroupedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getSubRows,
+  });
+}

package/src/components/Grid/core/settings.ts

@@ -0,0 +1,5 @@
+import type { GridSettings } from './types';
+
+export function updateSettings(settings: GridSettings, patch: Partial<GridSettings>): GridSettings {
+  return { ...settings, ...patch };
+}

package/src/components/Grid/core/types.ts

@@ -0,0 +1,56 @@
+import type {
+  ColumnDef,
+  SortingState,
+  VisibilityState,
+  ColumnSizingState,
+  RowSelectionState,
+  ColumnOrderState,
+  ColumnFiltersState,
+  ExpandedState,
+  GroupingState,
+  PaginationState,
+  Cell as TableCell,
+  Table,
+  Row,
+} from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+
+export type GridId = string;
+
+export type GridMode = 'flat' | 'parent' | 'group';
+
+export type GridSettings = {
+  version: number;
+  columnSizing: ColumnSizingState;
+  columnOrder: ColumnOrderState;
+  columnVisibility: VisibilityState;
+  sorting: SortingState;
+  rowSelection: RowSelectionState;
+  columnFilters: ColumnFiltersState;
+  expanded: ExpandedState;
+  grouping: GroupingState;
+  pagination: PaginationState;
+  mode: GridMode;
+};
+
+export type GridProps<TData> = {
+  gridId: GridId;
+  data: TData[];
+  totalRows?: number;
+  columns: ColumnDef<TData, any>[];
+  isLoading?: boolean;
+
+  settings: GridSettings;
+  onSettingsChange: (_next: GridSettings) => void;
+
+  showFilters?: boolean;
+  renderAggregatedCell?: (cell: TableCell<TData, unknown>) => ReactNode;
+  expandAllByDefault?: boolean;
+  enableExportXlsx?: boolean;
+  rowHeight?: number;
+  overscan?: number;
+  getRowContextMenuItems?: (ctx: RowMenuCtx<TData>) => ReactNode[];
+  onTableReady?: (table: Table<TData>) => void;
+};
+
+export type RowMenuCtx<TData> = { table: Table<TData>; row: Row<TData>; close: () => void };

package/src/components/Grid/features/columns/useColumnReorder.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { Table } from '@tanstack/react-table';
+
+type ColumnReorderOptions = {
+  disabledColumnIds?: string[];
+};
+
+export function useColumnReorder<TData>(table: Table<TData>, options: ColumnReorderOptions = {}) {
+  const disabledColumnIds = React.useMemo(
+    () => new Set(options.disabledColumnIds ?? []),
+    [options.disabledColumnIds]
+  );
+  const isReorderable = React.useCallback(
+    (columnId: string) => !disabledColumnIds.has(columnId),
+    [disabledColumnIds]
+  );
+  const handleHeaderDragStart = React.useCallback(
+    (e: React.DragEvent<HTMLDivElement>, columnId: string) => {
+      if (!isReorderable(columnId)) return;
+      e.dataTransfer.setData('text/plain', columnId);
+      e.dataTransfer.effectAllowed = 'move';
+    },
+    [isReorderable]
+  );
+
+  const handleHeaderDrop = React.useCallback(
+    (e: React.DragEvent<HTMLDivElement>, targetId: string) => {
+      if (!isReorderable(targetId)) return;
+      e.preventDefault();
+      const sourceId = e.dataTransfer.getData('text/plain');
+      if (!sourceId || sourceId === targetId) return;
+      if (!isReorderable(sourceId)) return;
+
+      const orderedIds = table.getAllLeafColumns().map((col) => col.id);
+      const fromIndex = orderedIds.indexOf(sourceId);
+      const toIndex = orderedIds.indexOf(targetId);
+      if (fromIndex === -1 || toIndex === -1) return;
+
+      const next = [...orderedIds];
+      next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, sourceId);
+      table.setColumnOrder(next);
+    },
+    [isReorderable, table]
+  );
+
+  return { handleHeaderDragStart, handleHeaderDrop, isReorderable };
+}

package/src/components/Grid/features/contextMenu/index.ts

@@ -0,0 +1 @@
+export {};

package/src/components/Grid/features/export/exportXlsx.ts

@@ -0,0 +1,55 @@
+import * as XLSX from 'xlsx';
+import type { Table } from '@tanstack/react-table';
+
+type ExportScope = 'page' | 'allFiltered';
+
+type ExportArgs<TData> = {
+  table: Table<TData>;
+  fileName: string;
+  scope: ExportScope;
+};
+
+export function exportTableToXlsx<TData>({ table, fileName, scope }: ExportArgs<TData>) {
+  const columns = table.getVisibleLeafColumns().filter((col) => col.id !== 'select');
+  const headerRow = columns.map((col) => {
+    const header = col.columnDef.header;
+    return typeof header === 'string' ? header : col.id;
+  });
+  const firstContentColumnId = columns[0]?.id;
+  const rowsSource =
+    scope === 'page' ? table.getRowModel().rows : table.getPrePaginationRowModel().rows;
+
+  const bodyRows = rowsSource.map((row) => {
+    return columns.map((col) => {
+      const value = row.getValue(col.id);
+      if (col.id === firstContentColumnId) {
+        const prefix = '  '.repeat(row.depth ?? 0);
+        if (row.getIsGrouped?.()) {
+          const groupingId = row.groupingColumnId;
+          const groupValue = groupingId ? row.getValue(groupingId) : '';
+          const count = row.getLeafRows?.().length ?? 0;
+          return `${prefix}${groupingId ?? 'group'}: ${String(groupValue ?? '')} (${count})`;
+        }
+        return `${prefix}${String(value ?? '')}`;
+      }
+      return String(value ?? '');
+    });
+  });
+
+  const worksheet = XLSX.utils.aoa_to_sheet([headerRow, ...bodyRows]);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+
+  const data = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
+  const blob = new Blob([data], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName.endsWith('.xlsx') ? fileName : `${fileName}.xlsx`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}

package/src/components/Grid/features/filtering/FilterInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Column } from '@tanstack/react-table';
+
+type FilterInputProps<TData> = {
+  column: Column<TData, unknown>;
+};
+
+export function FilterInput<TData>({ column }: FilterInputProps<TData>) {
+  const rawValue = column.getFilterValue();
+  const [localValue, setLocalValue] = React.useState(String(rawValue ?? ''));
+
+  React.useEffect(() => {
+    setLocalValue(String(rawValue ?? ''));
+  }, [rawValue]);
+
+  React.useEffect(() => {
+    const handle = window.setTimeout(() => {
+      if (localValue !== String(rawValue ?? '')) {
+        column.setFilterValue(localValue);
+      }
+    }, 200);
+
+    return () => window.clearTimeout(handle);
+  }, [column, localValue, rawValue]);
+
+  return (
+    <input
+      className="filter-input"
+      value={localValue}
+      onChange={(e) => setLocalValue(e.target.value)}
+      placeholder="Filter…"
+    />
+  );
+}

package/src/components/Grid/features/pagination/index.ts

@@ -0,0 +1 @@
+export {};

package/src/components/Grid/features/selection/index.ts

@@ -0,0 +1 @@
+export {};

package/src/components/Grid/features/sorting/SortIndicator.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+type SortIndicatorProps = {
+  sort: false | 'asc' | 'desc';
+};
+
+export function SortIndicator({ sort }: SortIndicatorProps) {
+  if (sort === 'asc') return <span> ▲</span>;
+  if (sort === 'desc') return <span> ▼</span>;
+  return null;
+}

package/src/components/Grid/features/toolbar/index.ts

@@ -0,0 +1 @@
+export {};

package/src/components/Grid/features/tree/buildParentTree.ts

@@ -0,0 +1,38 @@
+export type TreeNode<TData> = TData & { subRows?: TreeNode<TData>[] };
+
+type GetId<TData> = (row: TData) => string;
+
+type GetParentId<TData> = (row: TData) => string | undefined | null;
+
+export function buildParentTree<TData>(
+  rows: TData[],
+  getId: GetId<TData>,
+  getParentId: GetParentId<TData>
+): TreeNode<TData>[] {
+  const nodeById = new Map<string, TreeNode<TData>>();
+  const roots: TreeNode<TData>[] = [];
+
+  for (const row of rows) {
+    const id = getId(row);
+    nodeById.set(id, { ...row });
+  }
+
+  for (const row of rows) {
+    const id = getId(row);
+    const parentId = getParentId(row);
+    const node = nodeById.get(id);
+    if (!node) continue;
+
+    if (parentId && nodeById.has(parentId)) {
+      const parent = nodeById.get(parentId);
+      if (parent) {
+        parent.subRows ??= [];
+        parent.subRows.push(node);
+      }
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}

package/src/components/Grid/features/tree/index.ts

@@ -0,0 +1 @@
+export {};

package/src/components/Grid/features/virtualization/useRowVirtualizer.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { Table, Row } from '@tanstack/react-table';
+
+type RowVirtualizerArgs<TData> = {
+  table: Table<TData>;
+  rowHeight: number;
+  overscan: number;
+};
+
+type RowVirtualizerResult<TData> = {
+  parentRef: React.RefObject<HTMLDivElement>;
+  rows: Row<TData>[];
+  totalSize: number;
+  virtualItems: VirtualItem[];
+};
+
+export function useRowVirtualizer<TData>(
+  args: RowVirtualizerArgs<TData>
+): RowVirtualizerResult<TData> {
+  const { table, rowHeight, overscan } = args;
+  const parentRef = React.useRef<HTMLDivElement | null>(null);
+  const rows = table.getRowModel().rows;
+
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+
+  return {
+    parentRef,
+    rows,
+    totalSize: rowVirtualizer.getTotalSize(),
+    virtualItems,
+  };
+}

package/src/components/Grid/ui/Cell.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import type { Cell as TableCell } from '@tanstack/react-table';
+
+type CellProps<TData> = {
+  cell: TableCell<TData, unknown>;
+  isExpanderCell?: boolean;
+  renderAggregatedCell?: (cell: TableCell<TData, unknown>) => React.ReactNode;
+  isGroupMode?: boolean;
+};
+
+export function Cell<TData>({
+  cell,
+  isExpanderCell,
+  renderAggregatedCell,
+  isGroupMode = false,
+}: CellProps<TData>) {
+  const depth = cell.row.depth;
+  const canExpand = isExpanderCell && cell.row.getCanExpand();
+  const isExpanded = canExpand ? cell.row.getIsExpanded() : false;
+  const paddingLeft = isExpanderCell ? 10 + depth * 14 : undefined;
+  const isGroupRow = isGroupMode ? (cell.row.getIsGrouped?.() ?? false) : false;
+  const isAggregatedCell = isGroupMode ? (cell.getIsAggregated?.() ?? false) : false;
+  const isPlaceholder = cell.getIsPlaceholder?.() ?? false;
+  const groupingColumnId = isGroupMode && isGroupRow ? cell.row.groupingColumnId : undefined;
+  const groupValue =
+    groupingColumnId !== undefined ? cell.row.getValue(groupingColumnId) : undefined;
+  const groupCount =
+    isGroupMode && isGroupRow && isExpanderCell ? (cell.row.subRows?.length ?? 0) : 0;
+
+  const aggregatedRenderer =
+    renderAggregatedCell ??
+    ((cellValue: TableCell<TData, unknown>) =>
+      flexRender(cellValue.column.columnDef.cell, cellValue.getContext()));
+  const defaultRenderer = flexRender(cell.column.columnDef.cell, cell.getContext());
+
+  let content: React.ReactNode = defaultRenderer;
+  if (isGroupRow) {
+    if (isExpanderCell) {
+      content = (
+        <>
+          {canExpand && (
+            <button
+              className="expander"
+              onClick={(e) => {
+                e.stopPropagation();
+                cell.row.getToggleExpandedHandler()(e);
+              }}
+              onMouseDown={(e) => e.stopPropagation()}
+            >
+              {isExpanded ? '▾' : '▸'}
+            </button>
+          )}
+          <span className="group-label">
+            {groupValue !== undefined ? String(groupValue) : 'Group'} ({groupCount})
+          </span>
+        </>
+      );
+    } else if (isAggregatedCell) {
+      content = aggregatedRenderer(cell);
+    } else {
+      content = null;
+    }
+  } else if (isPlaceholder) {
+    content = null;
+  } else if (isExpanderCell && canExpand) {
+    content = (
+      <>
+        <button
+          className="expander"
+          onClick={(e) => {
+            e.stopPropagation();
+            cell.row.getToggleExpandedHandler()(e);
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          {isExpanded ? '▾' : '▸'}
+        </button>
+        {defaultRenderer}
+      </>
+    );
+  }
+
+  return (
+    <div
+      className="cell"
+      style={{ width: cell.column.getSize(), paddingLeft }}
+      title={String(cell.getValue() ?? '')}
+    >
+      {content}
+    </div>
+  );
+}

package/src/components/Grid/ui/ContextMenu.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+type ContextMenuProps = {
+  open: boolean;
+  x: number;
+  y: number;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export function ContextMenu({ open, x, y, onClose, children }: ContextMenuProps) {
+  const menuRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (!menuRef.current || !target) return;
+      if (!menuRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose, open]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div ref={menuRef} className="context-menu" style={{ left: x, top: y }}>
+      {children}
+    </div>,
+    document.body
+  );
+}

package/src/components/Grid/ui/Header.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import type { Table } from '@tanstack/react-table';
+import { FilterInput } from '../features/filtering/FilterInput';
+import { SortIndicator } from '../features/sorting/SortIndicator';
+
+type HeaderProps<TData> = {
+  table: Table<TData>;
+  showFilters: boolean;
+  onHeaderDragStart: (e: React.DragEvent<HTMLDivElement>, columnId: string) => void;
+  onHeaderDrop: (e: React.DragEvent<HTMLDivElement>, targetId: string) => void;
+  isReorderableColumn: (columnId: string) => boolean;
+};
+
+export function Header<TData>(props: HeaderProps<TData>) {
+  const { table, showFilters, onHeaderDragStart, onHeaderDrop, isReorderableColumn } = props;
+
+  return (
+    <div className="grid-header">
+      {table.getHeaderGroups().map((hg) => (
+        <div key={hg.id} className="row">
+          {hg.headers.map((header) => {
+            const col = header.column;
+            const size = col.getSize();
+            const canSort = col.getCanSort();
+            const sort = col.getIsSorted();
+            const canReorder = !header.isPlaceholder && isReorderableColumn(col.id);
+            const isResizing = col.getIsResizing?.() ?? false;
+
+            return (
+              <div
+                key={header.id}
+                className="cell header-cell"
+                style={{ width: size, position: 'relative' }}
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={(e) => onHeaderDrop(e, col.id)}
+                draggable={canReorder && !isResizing}
+                onDragStart={(e) => onHeaderDragStart(e, col.id)}
+              >
+                <button onClick={canSort ? col.getToggleSortingHandler() : undefined}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(col.columnDef.header, header.getContext())}
+                  <SortIndicator sort={sort} />
+                </button>
+                {showFilters && col.getCanFilter() && <FilterInput column={col} />}
+
+                {col.getCanResize() && (
+                  <div
+                    className="resizer"
+                    onMouseDown={(e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    }}
+                    onTouchStart={(e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}