react-glide-table 1.1.9 → 1.3.0

package/dist/compound.js

@@ -17,6 +17,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
 import { createContext, use } from "react";
@@ -357,6 +360,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
 import { useEffect, useMemo, useRef } from "react";
 
@@ -794,7 +893,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,
@@ -975,6 +1085,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",
           {
@@ -988,6 +1109,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();
@@ -1022,9 +1145,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",
@@ -1786,7 +1910,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 {
@@ -1796,6 +1921,7 @@ function resolveDataTableLabels(partial) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1831,7 +1957,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);
@@ -1845,6 +1976,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()
   );
@@ -1863,6 +1995,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = useCallback3(
     (next) => {
@@ -1888,9 +2021,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) => {
@@ -1921,6 +2072,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,
@@ -2037,6 +2199,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -2069,7 +2238,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = useRef5(copySelection);
   useEffect5(() => {
@@ -2090,6 +2262,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2155,10 +2329,13 @@ function DataTable({
     rows,
     columnCount,
     selectedCount,
+    labels,
     emptyText,
     loadingText,
     selectionLabel,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2173,6 +2350,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]
@@ -2193,6 +2371,8 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        enableColumnResize && "DataTableJSX--column-resize",
+        enableColumnFreeze && "DataTableJSX--column-freeze",
         classNames?.root,
         className
       ),
@@ -2213,6 +2393,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(
@@ -2222,22 +2403,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": 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 : 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
                     );
@@ -2365,6 +2578,10 @@ function buildColumnDef(props, sort, onSort) {
     children,
     sortable = false,
     width,
+    minWidth,
+    maxWidth,
+    resizable,
+    frozen,
     align,
     rowSpan,
     rowSpanKey,
@@ -2378,7 +2595,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
@@ -2398,6 +2618,7 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      frozen,
       className,
       headerClassName
     }