react-glide-table 2.2.1 → 2.3.0

package/dist/compound.cjs

@@ -28,7 +28,7 @@ module.exports = __toCommonJS(compound_exports);
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 var import_react_table = require("@tanstack/react-table");
@@ -58,7 +58,9 @@ var DataTableContext = (0, import_react.createContext)(null);
 function useDataTableRowContext() {
   const context = (0, import_react.use)(DataTableContext);
   if (!context) {
-    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+    throw new Error(
+      "useDataTableRowContext must be used within a DataTableContextProvider"
+    );
   }
   return context;
 }
@@ -530,8 +532,105 @@ function flattenHeaderLeaves(column) {
 }
 
 // src/components/ui/table/features/column-resize/columnResize.ts
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function floorOf(column) {
+  return column.minWidth ?? 0;
+}
+function ceilOf(column) {
+  return column.maxWidth ?? Number.POSITIVE_INFINITY;
+}
+function preferOf(column) {
+  const floor = floorOf(column);
+  const ceil = ceilOf(column);
+  const preferred = column.maxWidth ?? column.minWidth ?? 0;
+  return clamp(preferred, floor, Number.isFinite(ceil) ? ceil : preferred);
+}
+function resolveColumnLayoutWidths(containerWidth, columns) {
+  const widths = /* @__PURE__ */ new Map();
+  const fixed = [];
+  const bounded = [];
+  let flexCount = 0;
+  for (const column of columns) {
+    if (column.width != null) {
+      fixed.push(column);
+    } else if (column.minWidth != null || column.maxWidth != null) {
+      bounded.push(column);
+    } else {
+      flexCount += 1;
+    }
+  }
+  let used = 0;
+  for (const column of fixed) {
+    let size = column.width;
+    if (column.minWidth != null) size = Math.max(size, column.minWidth);
+    if (column.maxWidth != null) size = Math.min(size, column.maxWidth);
+    widths.set(column.id, size);
+    used += size;
+  }
+  if (bounded.length === 0) {
+    return widths;
+  }
+  const boundedSizes = /* @__PURE__ */ new Map();
+  let preferredSum = 0;
+  let floorSum = 0;
+  for (const column of bounded) {
+    const preferred = preferOf(column);
+    boundedSizes.set(column.id, preferred);
+    preferredSum += preferred;
+    floorSum += floorOf(column);
+  }
+  if (containerWidth > 0) {
+    const remaining = Math.max(0, containerWidth - used);
+    if (remaining >= preferredSum) {
+    } else if (remaining >= floorSum) {
+      let deficit = preferredSum - remaining;
+      const open = bounded.map((column) => ({
+        id: column.id,
+        current: boundedSizes.get(column.id),
+        floor: floorOf(column)
+      }));
+      while (deficit >= 1) {
+        const shrinkable = open.filter((entry) => entry.current > entry.floor);
+        if (shrinkable.length === 0) break;
+        const portion = Math.floor(deficit / shrinkable.length);
+        const rem = deficit % shrinkable.length;
+        let consumed = 0;
+        for (let index = 0; index < shrinkable.length; index += 1) {
+          const entry = shrinkable[index];
+          const reduce = Math.min(
+            entry.current - entry.floor,
+            portion + (index < rem ? 1 : 0)
+          );
+          entry.current -= reduce;
+          consumed += reduce;
+        }
+        if (consumed === 0) break;
+        deficit -= consumed;
+      }
+      for (const entry of open) {
+        boundedSizes.set(entry.id, entry.current);
+      }
+    } else {
+      for (const column of bounded) {
+        boundedSizes.set(column.id, floorOf(column));
+      }
+    }
+  }
+  for (const [id, size] of boundedSizes) {
+    widths.set(id, Math.round(size));
+  }
+  return widths;
+}
 function getColumnSizeStyle(size, options) {
-  const { force = false, lockMax = false, minWidth, maxWidth } = options ?? {};
+  const {
+    force = false,
+    lockMax = false,
+    minWidth,
+    maxWidth,
+    layoutWidth
+  } = options ?? {};
   if (lockMax) {
     return {
       width: size,
@@ -539,14 +638,27 @@ function getColumnSizeStyle(size, options) {
       maxWidth: size
     };
   }
+  if (layoutWidth != null) {
+    return {
+      width: layoutWidth,
+      minWidth: layoutWidth,
+      maxWidth: layoutWidth
+    };
+  }
+  const resolvedSize = size;
   const hasExplicitSize = force || size !== DATA_TABLE_COLUMN_SIZE;
   if (!hasExplicitSize && minWidth == null && maxWidth == null) {
     return void 0;
   }
   const style = {};
   if (hasExplicitSize) {
-    style.width = size;
-    style.minWidth = minWidth ?? size;
+    const used = minWidth != null || maxWidth != null ? clamp(
+      resolvedSize,
+      minWidth ?? Number.NEGATIVE_INFINITY,
+      maxWidth ?? Number.POSITIVE_INFINITY
+    ) : resolvedSize;
+    style.width = used;
+    style.minWidth = minWidth ?? used;
   } else if (minWidth != null) {
     style.minWidth = minWidth;
   }
@@ -1196,6 +1308,12 @@ function isInteractiveMouseTarget(target) {
   ].join(",");
   return target.closest(interactiveSelector) !== null;
 }
+function blurActiveElementOutside(container) {
+  const active = document.activeElement;
+  if (!(active instanceof HTMLElement) || active === document.body) return;
+  if (container instanceof Node && container.contains(active)) return;
+  active.blur();
+}
 function resolveExpandCellIndex(cells, toggleField) {
   if (!toggleField) return 0;
   const matchedIndex = cells.findIndex(
@@ -1228,7 +1346,7 @@ function DataTableRow({
     columnFreeze,
     inlineSearch
   } = useDataTableRowContext();
-  const { enableColumnResize } = columnResize;
+  const { enableColumnResize, layoutWidths } = columnResize;
   const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
   const {
     enabled: enableInlineSearch,
@@ -1423,7 +1541,8 @@ function DataTableRow({
           force: enableColumnResize,
           lockMax: enableColumnResize,
           minWidth: meta?.minWidth,
-          maxWidth: meta?.maxWidth
+          maxWidth: meta?.maxWidth,
+          layoutWidth: layoutWidths?.get(columnId)
         });
         const freezeOffset = enableColumnFreeze ? freezeOffsets.get(columnId) : void 0;
         const freezeStyle = getColumnFreezeStyle(freezeOffset);
@@ -1463,6 +1582,7 @@ function DataTableRow({
               if (!enableCellSelection) return;
               if (isInteractiveMouseTarget(event.target)) return;
               event.preventDefault();
+              blurActiveElementOutside(event.currentTarget);
               onCellMouseDown(
                 resolveCellRowIndex(event.clientY, event.currentTarget),
                 cellIndex,
@@ -1626,6 +1746,7 @@ function DataTableRow({
                   onMouseDown: (event) => {
                     event.stopPropagation();
                     event.preventDefault();
+                    blurActiveElementOutside(event.currentTarget);
                     onFillHandleMouseDown(rowIndex, cellIndex);
                   }
                 }
@@ -2209,7 +2330,7 @@ function useColumnReorder(options) {
 // src/core/useGlideTable.ts
 var import_react_table2 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 var import_react5 = require("react");
@@ -2538,9 +2659,222 @@ function formatDefaultCellValue(value) {
 }
 
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+var import_react6 = require("react");
+function isReactNodeIterable(node) {
+  return typeof node === "object" && node !== null && !(0, import_react6.isValidElement)(node) && Symbol.iterator in node;
+}
+function getElementTypeName(type) {
+  if (typeof type === "string") return type;
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || "";
+  }
+  if (typeof type === "object" && type !== null) {
+    const component = type;
+    return component.displayName || component.render?.displayName || component.render?.name || "";
+  }
+  return "";
+}
+function isButtonReactElement(node) {
+  const typeName = getElementTypeName(node.type);
+  if (typeName === "button" || /button/i.test(typeName)) return true;
+  const props = node.props;
+  if (props.role === "button") return true;
+  if (typeName === "input" && props.type === "button") return true;
+  return false;
+}
+function isImageReactElement(node) {
+  const typeName = getElementTypeName(node.type);
+  return typeName === "img" || typeName === "image" || /image/i.test(typeName);
+}
+var IMAGE_URL_PROP_KEYS = ["src", "url", "href", "imageUrl", "srcUrl"];
+function isLikelyUrl(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  if (/^(https?:|blob:|data:|\/\/)/i.test(trimmed)) return true;
+  if (trimmed.startsWith("/") && trimmed.includes("/")) return true;
+  return false;
+}
+function pickUrlFromUnknown(value) {
+  if (typeof value === "string") {
+    return isLikelyUrl(value) ? value.trim() : "";
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => pickUrlFromUnknown(item)).filter((item) => item.length > 0).join(", ");
+  }
+  if (value && typeof value === "object") {
+    const record = value;
+    for (const key of IMAGE_URL_PROP_KEYS) {
+      const candidate = record[key];
+      if (typeof candidate === "string" && candidate.trim()) {
+        return candidate.trim();
+      }
+    }
+  }
+  return "";
+}
+function imageElementText(node) {
+  const props = node.props;
+  for (const key of IMAGE_URL_PROP_KEYS) {
+    const candidate = props[key];
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+  }
+  return "";
+}
+function reactNodeContainsImage(node) {
+  if ((0, import_react6.isValidElement)(node)) {
+    if (isImageReactElement(node)) return true;
+    return reactNodeContainsImage(node.props.children);
+  }
+  if (isReactNodeIterable(node)) {
+    for (const child of node) {
+      if (reactNodeContainsImage(child)) return true;
+    }
+  }
+  return false;
+}
+function readImgUrl(img) {
+  const attr = img.getAttribute("src")?.trim() ?? "";
+  if (attr) return attr;
+  if (img instanceof HTMLImageElement) {
+    const current = img.currentSrc?.trim() ?? "";
+    if (current && current !== img.baseURI) return current;
+  }
+  return "";
+}
+function readDomImageUrls(rowIndex, colIndex, root) {
+  const scope = root ?? (typeof document === "undefined" ? null : document);
+  if (!scope) return "";
+  const cells = scope.querySelectorAll(
+    `[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`
+  );
+  for (const cell of cells) {
+    const urls = Array.from(cell.querySelectorAll("img")).flatMap((img) => {
+      const url = readImgUrl(img);
+      return url ? [url] : [];
+    });
+    if (urls.length > 0) return urls.join(", ");
+  }
+  return "";
+}
+function reactNodeToText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
+    return String(node);
+  }
+  if (isReactNodeIterable(node)) {
+    let text = "";
+    for (const child of node) {
+      text += reactNodeToText(child);
+    }
+    return text;
+  }
+  if ((0, import_react6.isValidElement)(node)) {
+    if (isButtonReactElement(node)) return "";
+    const props = node.props;
+    const childText = reactNodeToText(props.children);
+    if (childText) return childText;
+    const fromImage = imageElementText(node);
+    if (fromImage) return fromImage;
+    if (isImageReactElement(node)) return "";
+    if (typeof props.alt === "string" && props.alt) return props.alt;
+    if (typeof props.title === "string" && props.title) return props.title;
+    return "";
+  }
+  return "";
+}
+function sanitizeClipboardCell(text) {
+  return text.replace(/\s+/g, " ").trim();
+}
+function createCopyRenderRow(rowData, index) {
+  return {
+    id: getOriginalRowId(rowData) || String(index),
+    index,
+    original: rowData,
+    getIsCellDragSelected: () => false
+  };
+}
+function buildVisibleRowLookup(visibleRows) {
+  const lookup = /* @__PURE__ */ new Map();
+  for (const row of visibleRows) {
+    lookup.set(row.original, row);
+  }
+  return lookup;
+}
+function resolveCopyColumnId(cell) {
+  if (cell.column.id) return cell.column.id;
+  const columnDef = cell.column.columnDef;
+  if (columnDef.id) return columnDef.id;
+  if (columnDef.accessorKey != null && columnDef.accessorKey !== "") {
+    return String(columnDef.accessorKey);
+  }
+  return "";
+}
+function isPrimitiveCopyValue(value) {
+  return value == null || typeof value !== "object";
+}
+function extractRenderedCopyText(node, value, cellPosition, root) {
+  const rendered = sanitizeClipboardCell(reactNodeToText(node));
+  if (reactNodeContainsImage(node)) {
+    const fromDom = cellPosition != null ? sanitizeClipboardCell(
+      readDomImageUrls(cellPosition.rowIndex, cellPosition.colIndex, root)
+    ) : "";
+    if (fromDom) return fromDom;
+    if (rendered && isLikelyUrl(rendered)) return rendered;
+    return sanitizeClipboardCell(pickUrlFromUnknown(value));
+  }
+  return rendered;
+}
+function formatCopyCellText(rowData, columnDef, columnId, visibleRow, fallbackIndex, sourceCell, cellPosition, options) {
+  const meta = columnDef.meta;
+  const value = sourceCell ? sourceCell.getValue() : readRowColumnValue(rowData, columnDef);
+  const cellRender = meta?.cellRender;
+  if (typeof cellRender === "function") {
+    try {
+      const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
+      const node = cellRender({
+        value,
+        row,
+        index: row.index,
+        columnId,
+        cellProps: meta?.cellProps,
+        update: () => {
+        }
+      });
+      return extractRenderedCopyText(node, value, cellPosition, options?.root);
+    } catch {
+      return formatCellValue(value);
+    }
+  }
+  if (options?.registry && meta?.kind && isPrimitiveCopyValue(value)) {
+    try {
+      const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
+      const ctx = {
+        value,
+        row,
+        index: row.index,
+        columnId,
+        cellProps: meta.cellProps,
+        update: () => {
+        }
+      };
+      const renderer = resolveCellRenderer(options.registry, meta.kind, ctx);
+      if (renderer) {
+        const node = renderer.render(ctx);
+        const rendered = extractRenderedCopyText(node, value, cellPosition, options.root);
+        if (rendered) return rendered;
+      }
+    } catch {
+      return formatCellValue(value);
+    }
+  }
+  return formatCellValue(value);
+}
 function formatPrimitive(value) {
   if (value === null || value === void 0) return "";
   if (typeof value === "string") return value;
@@ -2627,37 +2961,47 @@ function collectCopyRowEntries(visibleRows, bounds, mode = "visible") {
   }
   return result;
 }
-function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths) {
+function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths, options) {
   if (copyRows.length === 0) return "";
   const { startCol, endCol } = bounds;
   const columnCells = visibleRows[0]?.getVisibleCells().slice(startCol, endCol + 1) ?? [];
   if (columnCells.length === 0) return "";
   const resolvedDepths = depths && depths.length === copyRows.length ? depths : copyRows.map((row) => getRowDepth(row));
   const minDepth = Math.min(...resolvedDepths);
+  const visibleRowByOriginal = buildVisibleRowLookup(visibleRows);
   return copyRows.map((rowData, index) => {
     const relativeDepth = Math.max(0, (resolvedDepths[index] ?? 0) - minDepth);
-    const line = columnCells.map(
-      (cell) => formatCellValue(
-        readRowColumnValue(
-          rowData,
-          cell.column.columnDef
-        )
-      )
-    ).join("	");
+    const visibleRow = visibleRowByOriginal.get(rowData);
+    const matchingCells = visibleRow?.getVisibleCells().slice(startCol, endCol + 1);
+    const line = columnCells.map((templateCell, colOffset) => {
+      const sourceCell = matchingCells?.[colOffset];
+      const column = sourceCell?.column ?? templateCell.column;
+      return formatCopyCellText(
+        rowData,
+        column.columnDef,
+        resolveCopyColumnId(sourceCell ?? templateCell),
+        visibleRow,
+        visibleRow?.index ?? index,
+        sourceCell,
+        visibleRow != null ? { rowIndex: visibleRow.index, colIndex: startCol + colOffset } : void 0,
+        options
+      );
+    }).join("	");
     return `${"	".repeat(relativeDepth)}${line}`;
   }).join("\n");
 }
-function serializeSelectionToTSV(visibleRows, bounds, mode = "visible") {
+function serializeSelectionToTSV(visibleRows, bounds, mode = "visible", options) {
   const entries = collectCopyRowEntries(visibleRows, bounds, mode);
   return serializeCopyRowsToTSV(
     entries.map((entry) => entry.row),
     visibleRows,
     bounds,
-    entries.map((entry) => entry.depth)
+    entries.map((entry) => entry.depth),
+    options
   );
 }
-async function writeSelectionToClipboard(visibleRows, bounds, mode = "visible") {
-  const text = serializeSelectionToTSV(visibleRows, bounds, mode);
+async function writeSelectionToClipboard(visibleRows, bounds, mode = "visible", options) {
+  const text = serializeSelectionToTSV(visibleRows, bounds, mode, options);
   if (!text) return false;
   try {
     await navigator.clipboard.writeText(text);
@@ -2815,17 +3159,19 @@ function useCellSelection({
   onDataChange,
   onBatchChange,
   onRowsPaste,
-  onCellNavigate
+  onCellNavigate,
+  cellRendererRegistry,
+  rootRef
 }) {
-  const [dragState, setDragState] = (0, import_react6.useState)(INITIAL_DRAG_STATE);
-  const pendingPasteModeRef = (0, import_react6.useRef)(null);
-  const dragStateRef = (0, import_react6.useRef)(dragState);
-  const onCellNavigateRef = (0, import_react6.useRef)(onCellNavigate);
+  const [dragState, setDragState] = (0, import_react7.useState)(INITIAL_DRAG_STATE);
+  const pendingPasteModeRef = (0, import_react7.useRef)(null);
+  const dragStateRef = (0, import_react7.useRef)(dragState);
+  const onCellNavigateRef = (0, import_react7.useRef)(onCellNavigate);
   dragStateRef.current = dragState;
   onCellNavigateRef.current = onCellNavigate;
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
-  const handleCellMouseDown = (0, import_react6.useCallback)(
+  const handleCellMouseDown = (0, import_react7.useCallback)(
     (rowIndex, colIndex, options) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -2851,7 +3197,7 @@ function useCellSelection({
     },
     [enabled]
   );
-  const handleCellMouseEnter = (0, import_react6.useCallback)(
+  const handleCellMouseEnter = (0, import_react7.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -2866,7 +3212,7 @@ function useCellSelection({
     },
     [enabled]
   );
-  const handleFillHandleMouseDown = (0, import_react6.useCallback)(
+  const handleFillHandleMouseDown = (0, import_react7.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -2883,12 +3229,12 @@ function useCellSelection({
     },
     [enabled]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled) {
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       if (e.ctrlKey || e.metaKey || e.altKey) return;
@@ -2935,19 +3281,32 @@ function useCellSelection({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [columnCount, enabled, rows]);
-  const copySelection = (0, import_react6.useCallback)(
+  const copySelection = (0, import_react7.useCallback)(
     async (options) => {
       if (!enabled || !activeSelectionBounds) return false;
       const mode = options?.includeDescendants && enableSubtreeCopy ? "subtree" : "visible";
-      return writeSelectionToClipboard(rows, activeSelectionBounds, mode);
+      return writeSelectionToClipboard(rows, activeSelectionBounds, mode, {
+        registry: cellRendererRegistry,
+        root: rootRef?.current
+      });
     },
-    [activeSelectionBounds, enableSubtreeCopy, enabled, rows]
+    [
+      activeSelectionBounds,
+      cellRendererRegistry,
+      enableSubtreeCopy,
+      enabled,
+      rootRef,
+      rows
+    ]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       if (!activeSelectionBounds) return;
       if (!(e.ctrlKey || e.metaKey)) return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
       const isSubtreeShortcut = enableSubtreeCopy && e.shiftKey && e.key.toLowerCase() === "c";
       const isVisibleCopyShortcut = !e.shiftKey && e.key.toLowerCase() === "c";
       if (!isSubtreeShortcut && !isVisibleCopyShortcut) return;
@@ -2957,7 +3316,7 @@ function useCellSelection({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeSelectionBounds, copySelection, enableSubtreeCopy, enabled]);
-  const emitRowsPaste = (0, import_react6.useCallback)(
+  const emitRowsPaste = (0, import_react7.useCallback)(
     (text, mode) => {
       if (!onRowsPaste || !activeSelectionBounds) return false;
       const payload = buildRowsPastePayload(
@@ -2974,7 +3333,7 @@ function useCellSelection({
     },
     [activeSelectionBounds, onRowsPaste, rows]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled || !onRowsPaste) return;
     const pasteHandledRef = { current: false };
     const ignoreNextPasteRef = { current: false };
@@ -3042,7 +3401,7 @@ function useCellSelection({
     enabled,
     onRowsPaste
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     const handleMouseUp = () => {
       setDragState((prev) => {
@@ -3093,7 +3452,7 @@ function useCellSelection({
 }
 
 // src/components/ui/table/features/inline-search/useInlineSearch.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
 function useInlineSearch({
   enabled = false,
@@ -3110,46 +3469,46 @@ function useInlineSearch({
   onNavigateToResult,
   rootRef
 }) {
-  const searchInputId = (0, import_react7.useId)();
-  const searchInputRef = (0, import_react7.useRef)(null);
-  const [internalShowSearch, setInternalShowSearch] = (0, import_react7.useState)(false);
-  const [internalSearchValue, setInternalSearchValue] = (0, import_react7.useState)("");
-  const [internalResults, setInternalResults] = (0, import_react7.useState)(
+  const searchInputId = (0, import_react8.useId)();
+  const searchInputRef = (0, import_react8.useRef)(null);
+  const [internalShowSearch, setInternalShowSearch] = (0, import_react8.useState)(false);
+  const [internalSearchValue, setInternalSearchValue] = (0, import_react8.useState)("");
+  const [internalResults, setInternalResults] = (0, import_react8.useState)(
     []
   );
-  const [searchStatus, setSearchStatus] = (0, import_react7.useState)();
-  const searchStatusRef = (0, import_react7.useRef)(searchStatus);
+  const [searchStatus, setSearchStatus] = (0, import_react8.useState)();
+  const searchStatusRef = (0, import_react8.useRef)(searchStatus);
   searchStatusRef.current = searchStatus;
-  const abortControllerRef = (0, import_react7.useRef)(null);
-  const searchHandleRef = (0, import_react7.useRef)(void 0);
-  const initialStartRowRef = (0, import_react7.useRef)(initialStartRow);
+  const abortControllerRef = (0, import_react8.useRef)(null);
+  const searchHandleRef = (0, import_react8.useRef)(void 0);
+  const initialStartRowRef = (0, import_react8.useRef)(initialStartRow);
   initialStartRowRef.current = initialStartRow;
-  const getCellValueRef = (0, import_react7.useRef)(getCellValue);
+  const getCellValueRef = (0, import_react8.useRef)(getCellValue);
   getCellValueRef.current = getCellValue;
   const showSearch = controlledShowSearch ?? internalShowSearch;
   const searchValue = controlledSearchValue ?? internalSearchValue;
   const searchResults = controlledSearchResults ?? internalResults;
-  const setSearchValue = (0, import_react7.useCallback)(
+  const setSearchValue = (0, import_react8.useCallback)(
     (value) => {
       setInternalSearchValue(value);
       onSearchValueChange?.(value);
     },
     [onSearchValueChange]
   );
-  const cancelSearch = (0, import_react7.useCallback)(() => {
+  const cancelSearch = (0, import_react8.useCallback)(() => {
     if (searchHandleRef.current !== void 0) {
       window.cancelAnimationFrame(searchHandleRef.current);
       searchHandleRef.current = void 0;
     }
     abortControllerRef.current?.abort();
   }, []);
-  const emitResultsChanged = (0, import_react7.useCallback)(
+  const emitResultsChanged = (0, import_react8.useCallback)(
     (results, navIndex) => {
       onSearchResultsChanged?.(results, navIndex);
     },
     [onSearchResultsChanged]
   );
-  const navigateToIndex = (0, import_react7.useCallback)(
+  const navigateToIndex = (0, import_react8.useCallback)(
     (results, navIndex) => {
       if (onSearchResultsChanged) return;
       if (navIndex < 0 || navIndex >= results.length) return;
@@ -3159,7 +3518,7 @@ function useInlineSearch({
     },
     [onNavigateToResult, onSearchResultsChanged]
   );
-  const beginSearch = (0, import_react7.useCallback)(
+  const beginSearch = (0, import_react8.useCallback)(
     (query) => {
       if (controlledSearchResults !== void 0) return;
       const totalRows = rowCount;
@@ -3231,12 +3590,12 @@ function useInlineSearch({
       rowCount
     ]
   );
-  const openSearch = (0, import_react7.useCallback)(() => {
+  const openSearch = (0, import_react8.useCallback)(() => {
     if (controlledShowSearch === void 0) {
       setInternalShowSearch(true);
     }
   }, [controlledShowSearch]);
-  const closeSearch = (0, import_react7.useCallback)(() => {
+  const closeSearch = (0, import_react8.useCallback)(() => {
     if (controlledShowSearch === void 0) {
       setInternalShowSearch(false);
     }
@@ -3251,7 +3610,7 @@ function useInlineSearch({
     emitResultsChanged,
     onSearchClose
   ]);
-  const goToNext = (0, import_react7.useCallback)(() => {
+  const goToNext = (0, import_react8.useCallback)(() => {
     if (!searchStatus || searchStatus.results === 0) return;
     const newIndex = nextSearchIndex(
       searchStatus.selectedIndex,
@@ -3261,7 +3620,7 @@ function useInlineSearch({
     emitResultsChanged(searchResults, newIndex);
     navigateToIndex(searchResults, newIndex);
   }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
-  const goToPrevious = (0, import_react7.useCallback)(() => {
+  const goToPrevious = (0, import_react8.useCallback)(() => {
     if (!searchStatus || searchStatus.results === 0) return;
     const newIndex = previousSearchIndex(
       searchStatus.selectedIndex,
@@ -3271,7 +3630,7 @@ function useInlineSearch({
     emitResultsChanged(searchResults, newIndex);
     navigateToIndex(searchResults, newIndex);
   }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (controlledSearchResults === void 0) return;
     if (controlledSearchResults.length > 0) {
       setSearchStatus((current) => ({
@@ -3283,7 +3642,7 @@ function useInlineSearch({
       setSearchStatus(void 0);
     }
   }, [controlledSearchResults, rowCount]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled) return;
     setSearchStatus(void 0);
     setInternalResults([]);
@@ -3296,7 +3655,7 @@ function useInlineSearch({
       cancelSearch();
     }
   }, [enabled, showSearch]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled || !showSearch) return;
     if (controlledSearchResults !== void 0) return;
     if (searchValue.trim() === "") {
@@ -3316,7 +3675,7 @@ function useInlineSearch({
     searchValue,
     showSearch
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (!(event.ctrlKey || event.metaKey)) return;
@@ -3343,12 +3702,12 @@ function useInlineSearch({
     window.addEventListener("keydown", handleKeyDown, true);
     return () => window.removeEventListener("keydown", handleKeyDown, true);
   }, [controlledShowSearch, enabled, rootRef, showSearch]);
-  (0, import_react7.useEffect)(() => () => cancelSearch(), [cancelSearch]);
-  const searchMatchKeys = (0, import_react7.useMemo)(
+  (0, import_react8.useEffect)(() => () => cancelSearch(), [cancelSearch]);
+  const searchMatchKeys = (0, import_react8.useMemo)(
     () => buildSearchMatchKeys(searchResults),
     [searchResults]
   );
-  const activeMatch = (0, import_react7.useMemo)(() => {
+  const activeMatch = (0, import_react8.useMemo)(() => {
     if (!searchStatus || searchStatus.selectedIndex < 0) return null;
     return searchResults[searchStatus.selectedIndex] ?? null;
   }, [searchResults, searchStatus]);
@@ -3483,7 +3842,7 @@ function useGlideTable(options) {
     searchResults,
     onSearchResultsChanged
   } = options;
-  const labels = (0, import_react8.useMemo)(() => {
+  const labels = (0, import_react9.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
     return {
       ...resolved,
@@ -3494,17 +3853,21 @@ function useGlideTable(options) {
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
-  const [internalRowSelection, setInternalRowSelection] = (0, import_react8.useState)({});
-  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react8.useState)({});
-  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react8.useState)([]);
-  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react8.useState)(
+  const [internalRowSelection, setInternalRowSelection] = (0, import_react9.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react9.useState)({});
+  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react9.useState)([]);
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react9.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react8.useState)(null);
-  const scrollRef = (0, import_react8.useRef)(null);
-  const rootRef = (0, import_react8.useRef)(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react9.useState)(null);
+  const scrollRef = (0, import_react9.useRef)(null);
+  const rootRef = (0, import_react9.useRef)(null);
+  const cellRendererRegistry = (0, import_react9.useMemo)(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
         "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
@@ -3518,11 +3881,11 @@ function useGlideTable(options) {
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const columnOrder = controlledColumnOrder ?? internalColumnOrder;
-  const tableColumns = (0, import_react8.useMemo)(() => {
+  const tableColumns = (0, import_react9.useMemo)(() => {
     if (!enableColumnReorder) return columns;
     return applyLeafColumnOrder(columns, columnOrder);
   }, [columnOrder, columns, enableColumnReorder]);
-  const setColumnOrder = (0, import_react8.useCallback)(
+  const setColumnOrder = (0, import_react9.useCallback)(
     (next) => {
       if (onColumnOrderChange) {
         onColumnOrderChange(next);
@@ -3533,7 +3896,7 @@ function useGlideTable(options) {
     [onColumnOrderChange]
   );
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react8.useCallback)(
+  const handleExpandedRowsChange = (0, import_react9.useCallback)(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -3594,13 +3957,13 @@ function useGlideTable(options) {
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = (0, import_react8.useMemo)(() => {
+  const rowSpanColumnKeys = (0, import_react9.useMemo)(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
   const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
-  const columnRowSpanMap = (0, import_react8.useMemo)(
+  const columnRowSpanMap = (0, import_react9.useMemo)(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -3609,7 +3972,7 @@ function useGlideTable(options) {
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
   const visibleLeafColumns = table.getVisibleLeafColumns();
-  const columnFreezeOffsets = (0, import_react8.useMemo)(() => {
+  const columnFreezeOffsets = (0, import_react9.useMemo)(() => {
     if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
     return buildColumnFreezeOffsets(
       visibleLeafColumns.map((column) => ({
@@ -3629,14 +3992,14 @@ function useGlideTable(options) {
   const totalSize = rowVirtualizer.getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
-  const selectedRowIndices = (0, import_react8.useMemo)(() => {
+  const selectedRowIndices = (0, import_react9.useMemo)(() => {
     const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
       indices.add(selectedRow.index);
     }
     return indices;
   }, [selectedRows]);
-  const scrollCellIntoView = (0, import_react8.useCallback)(
+  const scrollCellIntoView = (0, import_react9.useCallback)(
     (rowIndex, colIndex, options2) => {
       const align = options2?.align ?? "nearest";
       const blockAlign = align === "center" ? "center" : "nearest";
@@ -3663,7 +4026,7 @@ function useGlideTable(options) {
     },
     [rowVirtualizer, shouldVirtualize]
   );
-  const handleCellNavigate = (0, import_react8.useCallback)(
+  const handleCellNavigate = (0, import_react9.useCallback)(
     (position) => {
       scrollCellIntoView(position.row, position.col, { align: "nearest" });
     },
@@ -3686,7 +4049,9 @@ function useGlideTable(options) {
     onDataChange,
     onBatchChange,
     onRowsPaste,
-    onCellNavigate: handleCellNavigate
+    onCellNavigate: handleCellNavigate,
+    cellRendererRegistry,
+    rootRef
   });
   const {
     editingCell,
@@ -3696,11 +4061,7 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const cellRendererRegistry = (0, import_react8.useMemo)(
-    () => createCellRendererRegistry(cellRenderers),
-    [cellRenderers]
-  );
-  const commitRenderedCellValue = (0, import_react8.useCallback)(
+  const commitRenderedCellValue = (0, import_react9.useCallback)(
     (rowId, columnId, value) => commitCellValue({
       data: tableData,
       rows,
@@ -3712,11 +4073,11 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
-  const getCellContext = (0, import_react8.useCallback)(
+  const getCellContext = (0, import_react9.useCallback)(
     (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
     [commitRenderedCellValue]
   );
-  const handleCellMouseDownWithCommit = (0, import_react8.useCallback)(
+  const handleCellMouseDownWithCommit = (0, import_react9.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
       if (editingCell && !isSameEditingCell && !commitEdit()) {
@@ -3726,7 +4087,7 @@ function useGlideTable(options) {
     },
     [commitEdit, editingCell, handleCellMouseDown]
   );
-  const navigateToSearchResult = (0, import_react8.useCallback)(
+  const navigateToSearchResult = (0, import_react9.useCallback)(
     (item) => {
       const [colIndex, rowIndex] = item;
       handleCellMouseDownWithCommit(rowIndex, colIndex);
@@ -3734,7 +4095,7 @@ function useGlideTable(options) {
     },
     [handleCellMouseDownWithCommit, scrollCellIntoView]
   );
-  const resolveSearchRowId = (0, import_react8.useCallback)(
+  const resolveSearchRowId = (0, import_react9.useCallback)(
     (row, index) => {
       if (getRowId) return getRowId(row, index);
       if (enableExpand) {
@@ -3758,7 +4119,7 @@ function useGlideTable(options) {
     },
     [enableExpand, getRowId, toggleField]
   );
-  const searchCorpus = (0, import_react8.useMemo)(() => {
+  const searchCorpus = (0, import_react9.useMemo)(() => {
     if (!enableInlineSearch) return [];
     if (enableExpand && toggleField) {
       return buildTreeSearchCorpus(tableData, {
@@ -3774,16 +4135,16 @@ function useGlideTable(options) {
     tableData,
     toggleField
   ]);
-  const searchCorpusRef = (0, import_react8.useRef)(searchCorpus);
+  const searchCorpusRef = (0, import_react9.useRef)(searchCorpus);
   searchCorpusRef.current = searchCorpus;
-  const visibleRowIndexById = (0, import_react8.useMemo)(() => {
+  const visibleRowIndexById = (0, import_react9.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of rows) {
       map.set(resolveSearchRowId(row.original, row.index), row.index);
     }
     return map;
   }, [resolveSearchRowId, rows]);
-  const getSearchCellValue = (0, import_react8.useCallback)(
+  const getSearchCellValue = (0, import_react9.useCallback)(
     (rowIndex, colIndex) => {
       const corpusRow = searchCorpusRef.current[rowIndex];
       const column = visibleLeafColumns[colIndex];
@@ -3806,14 +4167,14 @@ function useGlideTable(options) {
     },
     [rows, visibleLeafColumns, visibleRowIndexById]
   );
-  const pendingSearchNavRef = (0, import_react8.useRef)(null);
-  const focusSearchResult = (0, import_react8.useCallback)(
+  const pendingSearchNavRef = (0, import_react9.useRef)(null);
+  const focusSearchResult = (0, import_react9.useCallback)(
     (colIndex, visibleRowIndex) => {
       navigateToSearchResult([colIndex, visibleRowIndex]);
     },
     [navigateToSearchResult]
   );
-  const navigateToCorpusSearchResult = (0, import_react8.useCallback)(
+  const navigateToCorpusSearchResult = (0, import_react9.useCallback)(
     (item) => {
       const [colIndex, corpusRowIndex] = item;
       const corpusRow = searchCorpusRef.current[corpusRowIndex];
@@ -3846,7 +4207,7 @@ function useGlideTable(options) {
       visibleRowIndexById
     ]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const pending = pendingSearchNavRef.current;
     if (!pending) return;
     const visibleRowIndex = visibleRowIndexById.get(pending.rowId);
@@ -3870,7 +4231,7 @@ function useGlideTable(options) {
     onNavigateToResult: navigateToCorpusSearchResult,
     rootRef
   });
-  const visibleSearchMatchKeys = (0, import_react8.useMemo)(() => {
+  const visibleSearchMatchKeys = (0, import_react9.useMemo)(() => {
     if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
     return mapSearchResultsToVisibleKeys(
       inlineSearch.searchResults,
@@ -3883,7 +4244,7 @@ function useGlideTable(options) {
     searchCorpus,
     visibleRowIndexById
   ]);
-  const visibleActiveMatch = (0, import_react8.useMemo)(() => {
+  const visibleActiveMatch = (0, import_react9.useMemo)(() => {
     if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
     return mapSearchResultToVisibleItem(
       inlineSearch.activeMatch,
@@ -3896,13 +4257,13 @@ function useGlideTable(options) {
     searchCorpus,
     visibleRowIndexById
   ]);
-  const clearHover = (0, import_react8.useCallback)(() => {
+  const clearHover = (0, import_react9.useCallback)(() => {
     setHoveredRowIndex(null);
   }, []);
-  const handleRowHover = (0, import_react8.useCallback)((rowIndex, _rowData) => {
+  const handleRowHover = (0, import_react9.useCallback)((rowIndex, _rowData) => {
     setHoveredRowIndex(rowIndex);
   }, []);
-  const handleToggleSelect = (0, import_react8.useCallback)(
+  const handleToggleSelect = (0, import_react9.useCallback)(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -3912,14 +4273,14 @@ function useGlideTable(options) {
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = (0, import_react8.useCallback)(
+  const handleToggleExpand = (0, import_react9.useCallback)(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = (0, import_react8.useMemo)(() => {
+  const rowContextValue = (0, import_react9.useMemo)(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -4018,12 +4379,12 @@ function useGlideTable(options) {
     visibleSearchMatchKeys,
     visibleActiveMatch
   ]);
-  const copySelectionRef = (0, import_react8.useRef)(copySelection);
-  (0, import_react8.useEffect)(() => {
+  const copySelectionRef = (0, import_react9.useRef)(copySelection);
+  (0, import_react9.useEffect)(() => {
     copySelectionRef.current = copySelection;
   }, [copySelection]);
-  const stableCopySelection = (0, import_react8.useCallback)((options2) => copySelectionRef.current(options2), []);
-  (0, import_react8.useEffect)(() => {
+  const stableCopySelection = (0, import_react9.useCallback)((options2) => copySelectionRef.current(options2), []);
+  (0, import_react9.useEffect)(() => {
     onCopyActionsReady?.({ copySelection: stableCopySelection });
   }, [onCopyActionsReady, stableCopySelection]);
   return {
@@ -4157,17 +4518,74 @@ function DataTable({
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
-  const freezeOffsets = rowContextValue.columnFreeze.offsets;
   const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
   const leafColumnIds = table.getVisibleLeafColumns().map((column) => column.id);
+  const columnLayoutMetaSignature = table.getVisibleLeafColumns().map((column) => {
+    const meta = column.columnDef.meta;
+    return `${column.id}:${meta?.width ?? ""}:${meta?.minWidth ?? ""}:${meta?.maxWidth ?? ""}`;
+  }).join("|");
   const { isReordering, draggingColumnId, dropTarget, onHeaderPointerDown } = useColumnReorder({
     enabled: enableColumnReorder,
     columnOrder: leafColumnIds,
     onColumnOrderChange: setColumnOrder
   });
-  const contextValue = (0, import_react9.useMemo)(
-    () => ({ ...rowContextValue, classNames }),
-    [rowContextValue, classNames]
+  const [containerWidth, setContainerWidth] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
+    if (enableColumnResize || isPending) return;
+    const element = scrollRef.current;
+    if (!element) return;
+    const updateWidth = () => {
+      setContainerWidth(Math.floor(element.clientWidth));
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      updateWidth();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [enableColumnResize, isPending, scrollRef, rows.length, leafColumnIds.join("|")]);
+  const layoutWidths = (0, import_react10.useMemo)(() => {
+    if (enableColumnResize) return void 0;
+    const columns = table.getVisibleLeafColumns().map((column) => ({
+      id: column.id,
+      width: column.columnDef.meta?.width,
+      minWidth: column.columnDef.meta?.minWidth,
+      maxWidth: column.columnDef.meta?.maxWidth
+    }));
+    return resolveColumnLayoutWidths(containerWidth, columns);
+  }, [enableColumnResize, containerWidth, table, columnLayoutMetaSignature]);
+  const freezeOffsets = (0, import_react10.useMemo)(() => {
+    if (!enableColumnFreeze || enableColumnResize || !layoutWidths) {
+      return rowContextValue.columnFreeze.offsets;
+    }
+    const columns = table.getVisibleLeafColumns().map((column) => ({
+      id: column.id,
+      size: layoutWidths.get(column.id) ?? column.getSize(),
+      side: resolveColumnFreezeSide(column.columnDef.meta?.frozen)
+    }));
+    return buildColumnFreezeOffsets(columns);
+  }, [
+    enableColumnFreeze,
+    enableColumnResize,
+    layoutWidths,
+    rowContextValue.columnFreeze.offsets,
+    table
+  ]);
+  const contextValue = (0, import_react10.useMemo)(
+    () => ({
+      ...rowContextValue,
+      classNames,
+      columnFreeze: {
+        ...rowContextValue.columnFreeze,
+        offsets: freezeOffsets
+      },
+      columnResize: {
+        ...rowContextValue.columnResize,
+        layoutWidths
+      }
+    }),
+    [rowContextValue, classNames, freezeOffsets, layoutWidths]
   );
   if (isPending) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4248,7 +4666,8 @@ function DataTable({
                       force: enableColumnResize,
                       lockMax: enableColumnResize,
                       minWidth: header.column.columnDef.meta?.minWidth,
-                      maxWidth: header.column.columnDef.meta?.maxWidth
+                      maxWidth: header.column.columnDef.meta?.maxWidth,
+                      layoutWidth: layoutWidths?.get(header.column.id)
                     });
                     const freezeOffset = enableColumnFreeze ? resolveHeaderFreezeOffset(header.column, freezeOffsets) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
@@ -4261,7 +4680,9 @@ function DataTable({
                     };
                     const isPlaceholder = header.isPlaceholder;
                     const leafColumns = header.column.getLeafColumns();
-                    const leafIds = leafColumns.map((leafColumn) => leafColumn.id);
+                    const leafIds = leafColumns.map(
+                      (leafColumn) => leafColumn.id
+                    );
                     const isLeafHeader = !isPlaceholder && header.subHeaders.length === 0;
                     const canDrag = enableColumnReorder && !isPlaceholder && leafIds.length > 0 && leafColumns.every(
                       (leafColumn) => isColumnReorderable(leafColumn.columnDef.meta)
@@ -4417,10 +4838,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 function ResolvedTableCell({
   info
 }) {
@@ -4429,7 +4850,7 @@ function ResolvedTableCell({
   const meta = column.columnDef.meta;
   const value = getValue();
   const columnId = column.id;
-  const update = (0, import_react10.useCallback)(
+  const update = (0, import_react11.useCallback)(
     (next) => {
       cellRender.commitValue(row.id, columnId, next);
     },
@@ -4540,6 +4961,7 @@ function buildColumnDef(props, sort, onSort) {
       cellRender: render,
       frozen,
       reorderable,
+      width,
       minWidth,
       maxWidth,
       className,
@@ -4587,10 +5009,10 @@ function countLeafColumns(nodes) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
 var TABLE_BODY_DISPLAY_NAME = "Table.Body";
 var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
@@ -4603,19 +5025,19 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return (0, import_react12.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return (0, import_react12.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return (0, import_react12.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
 function isTableColumnGroupElement(child) {
-  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
+  return (0, import_react12.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return (0, import_react12.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -4625,7 +5047,7 @@ function parseTableChildren(children) {
     body: null,
     pagination: null
   };
-  for (const child of import_react12.Children.toArray(children)) {
+  for (const child of import_react13.Children.toArray(children)) {
     if (isTableHeaderElement(child)) {
       slots.header = child;
       continue;
@@ -4642,7 +5064,7 @@ function parseTableChildren(children) {
 }
 function walkColumnTreeNodes(children) {
   const result = [];
-  for (const child of import_react12.Children.toArray(children)) {
+  for (const child of import_react13.Children.toArray(children)) {
     if (isTableColumnElement(child)) {
       result.push({
         type: "leaf",
@@ -4659,7 +5081,7 @@ function walkColumnTreeNodes(children) {
       });
       continue;
     }
-    if ((0, import_react12.isValidElement)(child)) {
+    if ((0, import_react13.isValidElement)(child)) {
       const nested = child.props.children;
       if (nested != null) {
         result.push(...walkColumnTreeNodes(nested));
@@ -4785,12 +5207,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = (0, import_react13.useMemo)(
+  const { header, pagination: paginationElement } = (0, import_react14.useMemo)(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = (0, import_react13.useState)(null);
-  const handleSort = (0, import_react13.useCallback)((field) => {
+  const [sort, setSort] = (0, import_react14.useState)(null);
+  const handleSort = (0, import_react14.useCallback)((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -4801,8 +5223,8 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columnTree = (0, import_react13.useMemo)(() => extractColumnTree(header), [header]);
-  const columns = (0, import_react13.useMemo)(
+  const columnTree = (0, import_react14.useMemo)(() => extractColumnTree(header), [header]);
+  const columns = (0, import_react14.useMemo)(
     () => buildColumnDefsFromTree(columnTree, sort, handleSort),
     [columnTree, sort, handleSort]
   );
@@ -4810,7 +5232,7 @@ function TableRoot({
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
   const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = (0, import_react13.useMemo)(() => {
+  const tableData = (0, import_react14.useMemo)(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);