react-glide-table 1.1.9 → 1.2.0

package/dist/index.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 {
@@ -46,6 +47,9 @@ var ROW_HOVERED_BG_CLASS = "row-hovered";
 var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
 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";
@@ -936,6 +940,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) {
@@ -1201,6 +1267,7 @@ function collectRowSpanColumns(columns) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1236,7 +1303,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);
@@ -1250,6 +1322,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()
   );
@@ -1268,6 +1341,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = useCallback3(
     (next) => {
@@ -1293,9 +1367,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) => {
@@ -1326,6 +1418,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,
@@ -1442,6 +1545,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -1474,7 +1584,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = useRef4(copySelection);
   useEffect4(() => {
@@ -1495,6 +1608,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -1508,6 +1623,19 @@ function useGlideTable(options) {
   };
 }
 
+// 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 } : {}
+  };
+}
+
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import { useMemo as useMemo3 } from "react";
@@ -1714,7 +1842,18 @@ function DataTableRow({
   virtualIndex,
   measureElement
 }) {
-  const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
+  const {
+    classNames,
+    rowSpan,
+    selection,
+    cellSelection,
+    cellEdit,
+    expand,
+    columnResize,
+    columnFreeze
+  } = useDataTableRowContext();
+  const { enableColumnResize } = columnResize;
+  const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
   const {
     enableRowSpan,
     primaryRowSpanColumnId,
@@ -1895,6 +2034,17 @@ function DataTableRow({
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
+        const sizeStyle = getColumnSizeStyle(cell.column.getSize(), {
+          force: enableColumnResize,
+          lockMax: enableColumnResize
+        });
+        const freezeOffset = enableColumnFreeze ? freezeOffsets.get(columnId) : void 0;
+        const freezeStyle = getColumnFreezeStyle(freezeOffset);
+        const cellStyle = {
+          ...sizeStyle,
+          ...freezeStyle,
+          ...selectionEdgeStyle
+        };
         return /* @__PURE__ */ jsxs2(
           "td",
           {
@@ -1908,6 +2058,8 @@ function DataTableRow({
             "data-selection-edges": hasSelectionEdges ? "" : void 0,
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
+            "data-frozen": freezeOffset?.side,
+            "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -1942,9 +2094,10 @@ function DataTableRow({
               event.stopPropagation();
               onStartEdit(rowIndex, cellIndex);
             },
-            style: selectionEdgeStyle,
+            style: Object.keys(cellStyle).length > 0 ? cellStyle : void 0,
             className: cn(
               "data-table-cell",
+              freezeOffset && `data-table-cell--frozen-${freezeOffset.side}`,
               CELL_ALIGN_CLASS[align],
               cellClassName,
               isMerged && "is-merged",
@@ -2177,10 +2330,13 @@ function DataTable({
     rows,
     columnCount,
     selectedCount,
+    labels,
     emptyText,
     loadingText,
     selectionLabel,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2195,6 +2351,7 @@ function DataTable({
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
+  const freezeOffsets = rowContextValue.columnFreeze.offsets;
   const contextValue = useMemo3(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
@@ -2215,6 +2372,8 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        enableColumnResize && "DataTableJSX--column-resize",
+        enableColumnFreeze && "DataTableJSX--column-freeze",
         classNames?.root,
         className
       ),
@@ -2235,6 +2394,7 @@ function DataTable({
           "table",
           {
             className: cn("data-table", classNames?.table),
+            style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
               /* @__PURE__ */ jsx5("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(
@@ -2244,22 +2404,54 @@ function DataTable({
                   children: headerGroup.headers.map((header) => {
                     const align = header.column.columnDef.meta?.align ?? "center";
                     const headerClassName = header.column.columnDef.meta?.headerClassName;
-                    return /* @__PURE__ */ jsx5(
+                    const canResize = enableColumnResize && header.column.getCanResize();
+                    const sizeStyle = getColumnSizeStyle(header.getSize(), {
+                      force: enableColumnResize,
+                      lockMax: enableColumnResize
+                    });
+                    const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
+                    const freezeStyle = getColumnFreezeStyle(freezeOffset, {
+                      isHeader: true
+                    });
+                    const headerStyle = {
+                      ...sizeStyle,
+                      ...freezeStyle
+                    };
+                    return /* @__PURE__ */ jsxs4(
                       "th",
                       {
-                        style: {
-                          width: header.getSize() !== 150 ? header.getSize() : void 0,
-                          // Column sizing follows TanStack's `size`, but
-                          // ensure the column keeps its min width when the container shrinks.
-                          minWidth: header.getSize() !== 150 ? header.getSize() : void 0
-                        },
+                        "data-resizing": header.column.getIsResizing() ? "" : void 0,
+                        "data-frozen": freezeOffset?.side,
+                        "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+                        style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",
+                          freezeOffset && `data-table-head-cell--frozen-${freezeOffset.side}`,
                           CELL_ALIGN_CLASS[align],
                           classNames?.headCell,
                           headerClassName
                         ),
-                        children: header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext())
+                        children: [
+                          header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext()),
+                          canResize ? /* @__PURE__ */ jsx5(
+                            "div",
+                            {
+                              role: "separator",
+                              "aria-orientation": "vertical",
+                              "aria-label": labels.resizeColumn,
+                              "data-table-disable-cell-selection": "",
+                              className: cn(
+                                "data-table-resize-handle",
+                                classNames?.resizeHandle
+                              ),
+                              onMouseDown: header.getResizeHandler(),
+                              onTouchStart: header.getResizeHandler(),
+                              onDoubleClick: () => {
+                                header.column.resetSize();
+                              }
+                            }
+                          ) : null
+                        ]
                       },
                       header.id
                     );
@@ -2387,6 +2579,10 @@ function buildColumnDef(props, sort, onSort) {
     children,
     sortable = false,
     width,
+    minWidth,
+    maxWidth,
+    resizable,
+    frozen,
     align,
     rowSpan,
     rowSpanKey,
@@ -2400,7 +2596,10 @@ function buildColumnDef(props, sort, onSort) {
   return {
     id: field,
     ...!virtual ? { accessorKey: field } : {},
-    size: width ?? 150,
+    size: width ?? DATA_TABLE_COLUMN_SIZE,
+    ...minWidth != null ? { minSize: minWidth } : {},
+    ...maxWidth != null ? { maxSize: maxWidth } : {},
+    ...resizable === false ? { enableResizing: false } : {},
     header: sortable ? () => /* @__PURE__ */ jsx6(SortableHeader, { label: children, field, sort, onSort }) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
@@ -2420,6 +2619,7 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      frozen,
       className,
       headerClassName
     }
@@ -2695,6 +2895,7 @@ export {
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
+  buildColumnFreezeOffsets,
   buildColumnRowSpanMap,
   buildRowsPastePayload,
   canExpandRow,
@@ -2707,6 +2908,8 @@ export {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeStyle,
+  getColumnSizeStyle,
   getRowIndexInMergedCell,
   hasCellSelectionEdges,
   isCellInSelection,
@@ -2716,6 +2919,7 @@ export {
   parseCellEditValue,
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
+  resolveColumnFreezeSide,
   resolveDataTableLabels,
   resolvePasteColumnIds,
   resolveRowSelection,

package/dist/{types-xxzMLUwM.d.cts → types-D031_07N.d.cts}

@@ -1,5 +1,42 @@
-import { ColumnDef, RowSelectionState, Updater, Row } from '@tanstack/react-table';
-import { ReactNode, InputHTMLAttributes, ComponentType } from 'react';
+import { ColumnDef, RowSelectionState, Updater, ColumnSizingState, OnChangeFn, ColumnResizeMode, Row } from '@tanstack/react-table';
+import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
+
+/** Sticky edge for a frozen column. Does not reorder columns. */
+type ColumnFreezeSide = "left" | "right";
+/**
+ * Per-column freeze flag.
+ * `true` is sugar for `"left"`.
+ */
+type ColumnFreezeMeta = boolean | ColumnFreezeSide;
+type ColumnFreezeColumnInput = {
+    id: string;
+    size: number;
+    side?: ColumnFreezeSide;
+};
+type ColumnFreezeOffset = {
+    side: ColumnFreezeSide;
+    /** Cumulative sticky inset (`left` or `right` in px). */
+    offset: number;
+    /** Inner edge of the sticky group (shadow / divider). */
+    isEdge: boolean;
+    /** Relative stack order within the freeze side (higher = closer to the viewport edge). */
+    stack: number;
+};
+/** Normalize column `frozen` meta into a sticky side. */
+declare function resolveColumnFreezeSide(frozen?: ColumnFreezeMeta): ColumnFreezeSide | undefined;
+/**
+ * Build sticky insets for frozen columns without changing DOM/column order.
+ *
+ * - `left`: `left = Σ(widths of left-frozen columns before this one)`
+ * - `right`: `right = Σ(widths of right-frozen columns after this one)`
+ *
+ * Middle columns may be frozen; non-frozen neighbors scroll underneath.
+ */
+declare function buildColumnFreezeOffsets(columns: ColumnFreezeColumnInput[]): Map<string, ColumnFreezeOffset>;
+/** Sticky position styles for a frozen header or body cell. */
+declare function getColumnFreezeStyle(offset: ColumnFreezeOffset | undefined, options?: {
+    isHeader?: boolean;
+}): CSSProperties | undefined;
 
 type DataTableLabels = {
     empty: string;
@@ -7,6 +44,8 @@ type DataTableLabels = {
     selection: (selectedCount: number) => ReactNode;
     expandRow: string;
     collapseRow: string;
+    /** Accessible label for the column resize handle */
+    resizeColumn: string;
 };
 /** Default copy. Override via the `labels` option. */
 declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
@@ -31,6 +70,12 @@ declare module "@tanstack/react-table" {
         editType?: CellEditType;
         /** Inline editor input attribute overrides */
         editInputProps?: DataTableEditInputProps;
+        /**
+         * Freeze (sticky) this column without reordering.
+         * `true` / `"left"` stick to the scrollport left; `"right"` to the right.
+         * Middle columns are allowed; multiple frozen columns stack via cumulative offsets.
+         */
+        frozen?: ColumnFreezeMeta;
     }
     interface Row<TData> {
         /**
@@ -180,6 +225,25 @@ type DataTableProps<T extends Record<string, unknown>> = {
     estimateRowHeight?: number;
     /** Virtualization overscan row count. Default 8 */
     virtualOverscan?: number;
+    /**
+     * Enable drag-to-resize on column headers. Defaults to false.
+     * Opt out per column with `Column.resizable={false}` / `enableResizing: false`.
+     */
+    enableColumnResize?: boolean;
+    /** Controlled column sizing map (`{ [columnId]: widthPx }`) */
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
+    /**
+     * When to commit resize updates. Defaults to `"onChange"` (live while dragging).
+     * Use `"onEnd"` to update only after the pointer is released.
+     */
+    columnResizeMode?: ColumnResizeMode;
+    /**
+     * Enable sticky freeze columns. Defaults to false.
+     * Mark columns with `Column.frozen` / `meta.frozen` (`true` | `"left"` | `"right"`).
+     * Does not reorder columns; offsets stack so frozen cells do not overlap.
+     */
+    enableColumnFreeze?: boolean;
     /**
      * Optional UI part replacements for the unstyled DataTable renderer.
      * Use with `createTable` / `Table.Column`, or pass columns directly to `DataTable`.
@@ -205,6 +269,8 @@ type DataTableClassNames = {
     head?: string;
     headRow?: string;
     headCell?: string;
+    /** Column resize drag handle inside a header cell */
+    resizeHandle?: string;
     body?: string;
     emptyCell?: string;
     virtualSpacer?: string;
@@ -266,7 +332,23 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     virtual?: boolean;
     children?: ReactNode;
     sortable?: boolean;
+    /** Initial / default column width in px (TanStack `size`) */
     width?: number;
+    /** Minimum resize width in px. Defaults to the table min when omitted */
+    minWidth?: number;
+    /** Maximum resize width in px. Defaults to the table max when omitted */
+    maxWidth?: number;
+    /**
+     * When false, this column cannot be resized even if `enableColumnResize` is on.
+     * Defaults to true.
+     */
+    resizable?: boolean;
+    /**
+     * Freeze (sticky) without changing column order.
+     * `true` / `"left"` → left edge; `"right"` → right edge.
+     * Requires `enableColumnFreeze`. Middle columns are allowed.
+     */
+    frozen?: ColumnFreezeMeta;
     align?: "left" | "center" | "right";
     rowSpan?: boolean;
     rowSpanKey?: string;
@@ -282,4 +364,4 @@ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "co
     children: ReactNode;
 };
 
-export { type CellEditType as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type DataTableClassNames as a, type DataTableCopyActions as b, type DataTableLabels as c, type DataTableProps as d, type DataTableSlots as e, type RowsPastePayload as f, type TableProps as g, resolveDataTableLabels as r };
+export { type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type ColumnFreezeMeta as a, type ColumnFreezeOffset as b, type ColumnFreezeSide as c, type DataTableClassNames as d, type DataTableCopyActions as e, type DataTableLabels as f, type DataTableProps as g, type DataTableSlots as h, type RowsPastePayload as i, type TableProps as j, buildColumnFreezeOffsets as k, getColumnFreezeStyle as l, resolveDataTableLabels as m, type CellEditType as n, resolveColumnFreezeSide as r };