react-glide-table 1.1.9 → 1.2.0

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 { g as DataTableProps, T as TableColumnProps, j as TableProps } from './types-D031_07N.js';
+export { a as ColumnFreezeMeta, c as ColumnFreezeSide, d as DataTableClassNames, f as DataTableLabels, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload } from './types-D031_07N.js';
+export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.

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,81 @@ 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 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/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 +872,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 +1064,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 +1088,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();
@@ -1022,9 +1124,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 +1889,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 +1900,7 @@ function resolveDataTableLabels(partial) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1831,7 +1936,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 +1955,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 +1974,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = useCallback3(
     (next) => {
@@ -1888,9 +2000,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 +2051,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 +2178,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -2069,7 +2217,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = useRef5(copySelection);
   useEffect5(() => {
@@ -2090,6 +2241,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2155,10 +2308,13 @@ function DataTable({
     rows,
     columnCount,
     selectedCount,
+    labels,
     emptyText,
     loadingText,
     selectionLabel,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2173,6 +2329,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 +2350,8 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        enableColumnResize && "DataTableJSX--column-resize",
+        enableColumnFreeze && "DataTableJSX--column-freeze",
         classNames?.root,
         className
       ),
@@ -2213,6 +2372,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 +2382,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
                     );
@@ -2365,6 +2557,10 @@ function buildColumnDef(props, sort, onSort) {
     children,
     sortable = false,
     width,
+    minWidth,
+    maxWidth,
+    resizable,
+    frozen,
     align,
     rowSpan,
     rowSpanKey,
@@ -2378,7 +2574,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 +2597,7 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      frozen,
       className,
       headerClassName
     }

package/dist/core.cjs

@@ -29,6 +29,7 @@ __export(core_exports, {
   applyCellEdit: () => applyCellEdit,
   applyFillData: () => applyFillData,
   applySelectionUpdater: () => applySelectionUpdater,
+  buildColumnFreezeOffsets: () => buildColumnFreezeOffsets,
   buildColumnRowSpanMap: () => buildColumnRowSpanMap,
   buildRowsPastePayload: () => buildRowsPastePayload,
   canExpandRow: () => canExpandRow,
@@ -40,6 +41,8 @@ __export(core_exports, {
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
   getColumnEditType: () => getColumnEditType,
+  getColumnFreezeStyle: () => getColumnFreezeStyle,
+  getColumnSizeStyle: () => getColumnSizeStyle,
   getRowIndexInMergedCell: () => getRowIndexInMergedCell,
   hasCellSelectionEdges: () => hasCellSelectionEdges,
   isCellInSelection: () => isCellInSelection,
@@ -49,6 +52,7 @@ __export(core_exports, {
   parseCellEditValue: () => parseCellEditValue,
   parseClipboardTSV: () => parseClipboardTSV,
   parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
+  resolveColumnFreezeSide: () => resolveColumnFreezeSide,
   resolveDataTableLabels: () => resolveDataTableLabels,
   resolvePasteColumnIds: () => resolvePasteColumnIds,
   resolveRowSelection: () => resolveRowSelection,
@@ -71,7 +75,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 {
@@ -94,6 +99,9 @@ var import_react4 = require("react");
 // 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
 var import_react = require("react");
@@ -984,6 +992,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
 var import_react3 = require("react");
 function getFieldValue(row, key) {
@@ -1249,6 +1319,7 @@ function collectRowSpanColumns(columns) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1284,7 +1355,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_react4.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
@@ -1298,6 +1374,7 @@ function useGlideTable(options) {
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = (0, import_react4.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react4.useState)({});
   const [internalExpandedRows, setInternalExpandedRows] = (0, import_react4.useState)(
     () => /* @__PURE__ */ new Set()
   );
@@ -1316,6 +1393,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = (0, import_react4.useCallback)(
     (next) => {
@@ -1341,9 +1419,27 @@ function useGlideTable(options) {
   const table = (0, import_react_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) => {
@@ -1374,6 +1470,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_react4.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,
@@ -1490,6 +1597,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -1522,7 +1636,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = (0, import_react4.useRef)(copySelection);
   (0, import_react4.useEffect)(() => {
@@ -1543,6 +1660,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -1555,6 +1674,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 } : {}
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CELL_SELECTION_EDGES_CLASS,
@@ -1566,6 +1698,7 @@ function useGlideTable(options) {
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
+  buildColumnFreezeOffsets,
   buildColumnRowSpanMap,
   buildRowsPastePayload,
   canExpandRow,
@@ -1577,6 +1710,8 @@ function useGlideTable(options) {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeStyle,
+  getColumnSizeStyle,
   getRowIndexInMergedCell,
   hasCellSelectionEdges,
   isCellInSelection,
@@ -1586,6 +1721,7 @@ function useGlideTable(options) {
   parseCellEditValue,
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
+  resolveColumnFreezeSide,
   resolveDataTableLabels,
   resolvePasteColumnIds,
   resolveRowSelection,