react-glide-table 1.1.9 → 1.3.0

package/dist/compound.cjs

@@ -45,6 +45,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/DataTableContext.tsx
 var import_react = require("react");
@@ -385,6 +388,102 @@ function hasCellSelectionEdges(style) {
   );
 }
 
+// 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 getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) 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,
+      edgeLeft: false,
+      edgeRight: false,
+      stack: 0
+    });
+    leftOffset += column.size;
+  }
+  leftIds.forEach((id, index) => {
+    const entry = result.get(id);
+    if (!entry) return;
+    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,
+      edgeLeft: false,
+      edgeRight: false,
+      stack: 0
+    });
+    rightOffset += column.size;
+  }
+  rightIds.forEach((id, index) => {
+    const entry = result.get(id);
+    if (!entry) return;
+    entry.stack = rightIds.length - index;
+  });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
+  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/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/features/row-expand/row-expand.ts
 var import_react2 = require("react");
 
@@ -822,7 +921,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,
@@ -1003,6 +1113,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__ */ (0, import_jsx_runtime3.jsxs)(
           "td",
           {
@@ -1016,6 +1137,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": getColumnFreezeEdgeAttr(freezeOffset),
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -1050,9 +1173,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",
@@ -1803,7 +1927,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 {
@@ -1813,6 +1938,7 @@ function resolveDataTableLabels(partial) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1848,7 +1974,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 = (0, import_react6.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
@@ -1862,6 +1993,7 @@ function useGlideTable(options) {
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = (0, import_react6.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react6.useState)({});
   const [internalExpandedRows, setInternalExpandedRows] = (0, import_react6.useState)(
     () => /* @__PURE__ */ new Set()
   );
@@ -1880,6 +2012,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = (0, import_react6.useCallback)(
     (next) => {
@@ -1905,9 +2038,27 @@ function useGlideTable(options) {
   const table = (0, import_react_table2.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) => {
@@ -1938,6 +2089,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 = (0, import_react6.useMemo)(() => {
+    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 = (0, import_react_virtual.useVirtualizer)({
     count: shouldVirtualize ? rows.length : 0,
     getScrollElement: () => scrollRef.current,
@@ -2054,6 +2216,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -2086,7 +2255,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = (0, import_react6.useRef)(copySelection);
   (0, import_react6.useEffect)(() => {
@@ -2107,6 +2279,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2172,10 +2346,13 @@ function DataTable({
     rows,
     columnCount,
     selectedCount,
+    labels,
     emptyText,
     loadingText,
     selectionLabel,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2190,6 +2367,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 = (0, import_react7.useMemo)(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
@@ -2210,6 +2388,8 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        enableColumnResize && "DataTableJSX--column-resize",
+        enableColumnFreeze && "DataTableJSX--column-freeze",
         classNames?.root,
         className
       ),
@@ -2230,6 +2410,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__ */ (0, import_jsx_runtime5.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2239,22 +2420,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__ */ (0, import_jsx_runtime5.jsx)(
+                    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__ */ (0, import_jsx_runtime5.jsxs)(
                       "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": getColumnFreezeEdgeAttr(freezeOffset),
+                        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 : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext())
+                        children: [
+                          header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
+                          canResize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "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
                     );
@@ -2382,6 +2595,10 @@ function buildColumnDef(props, sort, onSort) {
     children,
     sortable = false,
     width,
+    minWidth,
+    maxWidth,
+    resizable,
+    frozen,
     align,
     rowSpan,
     rowSpanKey,
@@ -2395,7 +2612,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__ */ (0, import_jsx_runtime6.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
@@ -2415,6 +2635,7 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      frozen,
       className,
       headerClassName
     }

package/dist/compound.d.cts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-xxzMLUwM.cjs';
-export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-xxzMLUwM.cjs';
-export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+import { h as DataTableProps, T as TableColumnProps, k as TableProps } from './types-B4uHdkrY.cjs';
+export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload } from './types-B4uHdkrY.cjs';
+export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.

package/dist/compound.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-xxzMLUwM.js';
-export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-xxzMLUwM.js';
-export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+import { h as DataTableProps, T as TableColumnProps, k as TableProps } from './types-B4uHdkrY.js';
+export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload } from './types-B4uHdkrY.js';
+export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.