react-glide-table 1.1.9 → 1.2.0

package/dist/core.d.cts

@@ -1,10 +1,10 @@
-import { C as CellEditType, a as DataTableClassNames, R as RowSelectionMode, d as DataTableProps, c as DataTableLabels, b as DataTableCopyActions, P as PasteMode, f as RowsPastePayload } from './types-xxzMLUwM.cjs';
-export { D as DEFAULT_DATA_TABLE_LABELS, r as resolveDataTableLabels } from './types-xxzMLUwM.cjs';
+import { n as CellEditType, d as DataTableClassNames, R as RowSelectionMode, b as ColumnFreezeOffset, g as DataTableProps, f as DataTableLabels, e as DataTableCopyActions, P as PasteMode, i as RowsPastePayload } from './types-D031_07N.cjs';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.cjs';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
-export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import * as react from 'react';
-import { RefObject } from 'react';
+import { RefObject, CSSProperties } from 'react';
 
 /** Neutral default field names for tree conversion */
 declare const DEFAULT_TREE_ID_FIELD = "id";
@@ -170,6 +170,13 @@ type DataTableRowContextValue = {
         expandRowLabel: string;
         collapseRowLabel: string;
     };
+    columnResize: {
+        enableColumnResize: boolean;
+    };
+    columnFreeze: {
+        enableColumnFreeze: boolean;
+        offsets: Map<string, ColumnFreezeOffset>;
+    };
 };
 
 type UseGlideTableOptions<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "className" | "classNames" | "slots" | "summary" | "toolbar" | "isPending" | "totalCount" | "filteredCount">;
@@ -184,6 +191,8 @@ type UseGlideTableResult<T extends Record<string, unknown>> = {
     loadingText: string;
     selectionLabel: DataTableLabels["selection"];
     enableCellSelection: boolean;
+    enableColumnResize: boolean;
+    enableColumnFreeze: boolean;
     shouldVirtualize: boolean;
     scrollRef: RefObject<HTMLDivElement | null>;
     rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
@@ -212,6 +221,12 @@ declare function useCellEdit<T extends Record<string, unknown>>({ data, rows, on
     cancelEdit: () => void;
 };
 
+/** Width styles for header/body cells when column sizing is active. */
+declare function getColumnSizeStyle(size: number, options?: {
+    force?: boolean;
+    lockMax?: boolean;
+}): CSSProperties | undefined;
+
 type ParsedClipboardTSV = {
     values: string[][];
     /**
@@ -327,4 +342,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, RowSelectionMode, type RowSpanInfo, RowsPastePayload, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard };
+export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, RowSelectionMode, type RowSpanInfo, RowsPastePayload, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard };

package/dist/core.d.ts

@@ -1,10 +1,10 @@
-import { C as CellEditType, a as DataTableClassNames, R as RowSelectionMode, d as DataTableProps, c as DataTableLabels, b as DataTableCopyActions, P as PasteMode, f as RowsPastePayload } from './types-xxzMLUwM.js';
-export { D as DEFAULT_DATA_TABLE_LABELS, r as resolveDataTableLabels } from './types-xxzMLUwM.js';
+import { n as CellEditType, d as DataTableClassNames, R as RowSelectionMode, b as ColumnFreezeOffset, g as DataTableProps, f as DataTableLabels, e as DataTableCopyActions, P as PasteMode, i as RowsPastePayload } from './types-D031_07N.js';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.js';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
-export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import * as react from 'react';
-import { RefObject } from 'react';
+import { RefObject, CSSProperties } from 'react';
 
 /** Neutral default field names for tree conversion */
 declare const DEFAULT_TREE_ID_FIELD = "id";
@@ -170,6 +170,13 @@ type DataTableRowContextValue = {
         expandRowLabel: string;
         collapseRowLabel: string;
     };
+    columnResize: {
+        enableColumnResize: boolean;
+    };
+    columnFreeze: {
+        enableColumnFreeze: boolean;
+        offsets: Map<string, ColumnFreezeOffset>;
+    };
 };
 
 type UseGlideTableOptions<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "className" | "classNames" | "slots" | "summary" | "toolbar" | "isPending" | "totalCount" | "filteredCount">;
@@ -184,6 +191,8 @@ type UseGlideTableResult<T extends Record<string, unknown>> = {
     loadingText: string;
     selectionLabel: DataTableLabels["selection"];
     enableCellSelection: boolean;
+    enableColumnResize: boolean;
+    enableColumnFreeze: boolean;
     shouldVirtualize: boolean;
     scrollRef: RefObject<HTMLDivElement | null>;
     rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
@@ -212,6 +221,12 @@ declare function useCellEdit<T extends Record<string, unknown>>({ data, rows, on
     cancelEdit: () => void;
 };
 
+/** Width styles for header/body cells when column sizing is active. */
+declare function getColumnSizeStyle(size: number, options?: {
+    force?: boolean;
+    lockMax?: boolean;
+}): CSSProperties | undefined;
+
 type ParsedClipboardTSV = {
     values: string[][];
     /**
@@ -327,4 +342,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, RowSelectionMode, type RowSpanInfo, RowsPastePayload, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard };
+export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, RowSelectionMode, type RowSpanInfo, RowsPastePayload, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard };

package/dist/core.js

@@ -4,7 +4,8 @@ var DEFAULT_DATA_TABLE_LABELS = {
   loading: "Loading...",
   selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
   expandRow: "Expand row",
-  collapseRow: "Collapse row"
+  collapseRow: "Collapse row",
+  resizeColumn: "Resize column"
 };
 function resolveDataTableLabels(partial) {
   return {
@@ -38,6 +39,9 @@ import {
 // src/components/ui/table/constants.ts
 var DATA_TABLE_ROW_HEIGHT = 44;
 var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
+var DATA_TABLE_COLUMN_SIZE = 150;
+var DATA_TABLE_COLUMN_MIN_SIZE = 40;
+var DATA_TABLE_COLUMN_MAX_SIZE = 800;
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -928,6 +932,68 @@ function useCellSelection({
   };
 }
 
+// src/components/ui/table/features/column-freeze/columnFreeze.ts
+var HEADER_Z_BASE = 30;
+var BODY_Z_BASE = 5;
+function resolveColumnFreezeSide(frozen) {
+  if (frozen === true || frozen === "left") return "left";
+  if (frozen === "right") return "right";
+  return void 0;
+}
+function buildColumnFreezeOffsets(columns) {
+  const result = /* @__PURE__ */ new Map();
+  let leftOffset = 0;
+  const leftIds = [];
+  for (const column of columns) {
+    if (column.side !== "left") continue;
+    leftIds.push(column.id);
+    result.set(column.id, {
+      side: "left",
+      offset: leftOffset,
+      isEdge: false,
+      stack: 0
+    });
+    leftOffset += column.size;
+  }
+  leftIds.forEach((id, index) => {
+    const entry = result.get(id);
+    if (!entry) return;
+    entry.isEdge = index === leftIds.length - 1;
+    entry.stack = leftIds.length - index;
+  });
+  let rightOffset = 0;
+  const rightIds = [];
+  for (let index = columns.length - 1; index >= 0; index -= 1) {
+    const column = columns[index];
+    if (!column || column.side !== "right") continue;
+    rightIds.push(column.id);
+    result.set(column.id, {
+      side: "right",
+      offset: rightOffset,
+      isEdge: false,
+      stack: 0
+    });
+    rightOffset += column.size;
+  }
+  rightIds.forEach((id, index) => {
+    const entry = result.get(id);
+    if (!entry) return;
+    entry.isEdge = index === rightIds.length - 1;
+    entry.stack = rightIds.length - index;
+  });
+  return result;
+}
+function getColumnFreezeStyle(offset, options) {
+  if (!offset) return void 0;
+  const zBase = options?.isHeader ? HEADER_Z_BASE : BODY_Z_BASE;
+  return {
+    position: "sticky",
+    ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
+    zIndex: zBase + offset.stack,
+    ...options?.isHeader ? { top: 0 } : {}
+  };
+}
+
 // src/components/ui/table/features/row-expand/row-expand.ts
 import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
 function getFieldValue(row, key) {
@@ -1193,6 +1259,7 @@ function collectRowSpanColumns(columns) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1228,7 +1295,12 @@ function useGlideTable(options) {
     enableInsertPaste,
     enableVirtualization = true,
     estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
-    virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
+    virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN,
+    enableColumnResize = false,
+    columnSizing: controlledColumnSizing,
+    onColumnSizingChange,
+    columnResizeMode = "onChange",
+    enableColumnFreeze = false
   } = options;
   const labels = useMemo2(() => {
     const resolved = resolveDataTableLabels(labelsProp);
@@ -1242,6 +1314,7 @@ function useGlideTable(options) {
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = useState3({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState3({});
   const [internalExpandedRows, setInternalExpandedRows] = useState3(
     () => /* @__PURE__ */ new Set()
   );
@@ -1260,6 +1333,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = useCallback3(
     (next) => {
@@ -1285,9 +1359,27 @@ function useGlideTable(options) {
   const table = useReactTable({
     data: tableData,
     columns,
+    ...enableColumnResize ? {
+      defaultColumn: {
+        minSize: DATA_TABLE_COLUMN_MIN_SIZE,
+        maxSize: DATA_TABLE_COLUMN_MAX_SIZE
+      }
+    } : {},
+    enableColumnResizing: enableColumnResize,
+    columnResizeMode,
     state: {
-      rowSelection: rowSelectionMode === "none" ? {} : rowSelection
+      rowSelection: rowSelectionMode === "none" ? {} : rowSelection,
+      ...enableColumnResize ? { columnSizing } : {}
     },
+    onColumnSizingChange: enableColumnResize ? (updater) => {
+      if (onColumnSizingChange) {
+        onColumnSizingChange(updater);
+        return;
+      }
+      setInternalColumnSizing(
+        (previous) => typeof updater === "function" ? updater(previous) : updater
+      );
+    } : void 0,
     enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
     enableMultiRowSelection: rowSelectionMode === "multi",
     onRowSelectionChange: (updater) => {
@@ -1318,6 +1410,17 @@ function useGlideTable(options) {
   const selectedCount = selectedRows.length;
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+  const columnFreezeOffsets = useMemo2(() => {
+    if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
+    return buildColumnFreezeOffsets(
+      visibleLeafColumns.map((column) => ({
+        id: column.id,
+        size: column.getSize(),
+        side: resolveColumnFreezeSide(column.columnDef.meta?.frozen)
+      }))
+    );
+  }, [enableColumnFreeze, visibleLeafColumns, columnSizing]);
   const rowVirtualizer = useVirtualizer({
     count: shouldVirtualize ? rows.length : 0,
     getScrollElement: () => scrollRef.current,
@@ -1434,6 +1537,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -1466,7 +1576,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = useRef4(copySelection);
   useEffect4(() => {
@@ -1487,6 +1600,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -1499,6 +1614,19 @@ function useGlideTable(options) {
     copySelection: stableCopySelection
   };
 }
+
+// src/components/ui/table/features/column-resize/columnResize.ts
+function getColumnSizeStyle(size, options) {
+  const { force = false, lockMax = false } = options ?? {};
+  if (!force && size === DATA_TABLE_COLUMN_SIZE) {
+    return void 0;
+  }
+  return {
+    width: size,
+    minWidth: size,
+    ...lockMax ? { maxWidth: size } : {}
+  };
+}
 export {
   CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS,
@@ -1509,6 +1637,7 @@ export {
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
+  buildColumnFreezeOffsets,
   buildColumnRowSpanMap,
   buildRowsPastePayload,
   canExpandRow,
@@ -1520,6 +1649,8 @@ export {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeStyle,
+  getColumnSizeStyle,
   getRowIndexInMergedCell,
   hasCellSelectionEdges,
   isCellInSelection,
@@ -1529,6 +1660,7 @@ export {
   parseCellEditValue,
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
+  resolveColumnFreezeSide,
   resolveDataTableLabels,
   resolvePasteColumnIds,
   resolveRowSelection,