react-glide-table 2.2.1 → 2.3.0

package/dist/compound.js

@@ -1,6 +1,6 @@
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import { useMemo as useMemo4 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useState as useState6 } from "react";
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 import { flexRender } from "@tanstack/react-table";
@@ -30,7 +30,9 @@ var DataTableContext = createContext(null);
 function useDataTableRowContext() {
   const context = 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;
 }
@@ -502,8 +504,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,
@@ -511,14 +610,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;
   }
@@ -1168,6 +1280,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(
@@ -1200,7 +1318,7 @@ function DataTableRow({
     columnFreeze,
     inlineSearch
   } = useDataTableRowContext();
-  const { enableColumnResize } = columnResize;
+  const { enableColumnResize, layoutWidths } = columnResize;
   const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
   const {
     enabled: enableInlineSearch,
@@ -1395,7 +1513,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);
@@ -1435,6 +1554,7 @@ function DataTableRow({
               if (!enableCellSelection) return;
               if (isInteractiveMouseTarget(event.target)) return;
               event.preventDefault();
+              blurActiveElementOutside(event.currentTarget);
               onCellMouseDown(
                 resolveCellRowIndex(event.clientY, event.currentTarget),
                 cellIndex,
@@ -1598,6 +1718,7 @@ function DataTableRow({
                   onMouseDown: (event) => {
                     event.stopPropagation();
                     event.preventDefault();
+                    blurActiveElementOutside(event.currentTarget);
                     onFillHandleMouseDown(rowIndex, cellIndex);
                   }
                 }
@@ -2529,6 +2650,219 @@ function formatDefaultCellValue(value) {
 import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+import { isValidElement } from "react";
+function isReactNodeIterable(node) {
+  return typeof node === "object" && node !== null && !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 (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 (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;
@@ -2615,37 +2949,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);
@@ -2803,7 +3147,9 @@ function useCellSelection({
   onDataChange,
   onBatchChange,
   onRowsPaste,
-  onCellNavigate
+  onCellNavigate,
+  cellRendererRegistry,
+  rootRef
 }) {
   const [dragState, setDragState] = useState3(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = useRef5(null);
@@ -2927,15 +3273,28 @@ function useCellSelection({
     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
+    ]
   );
   useEffect5(() => {
     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;
@@ -3498,6 +3857,10 @@ function useGlideTable(options) {
   const [hoveredRowIndex, setHoveredRowIndex] = useState5(null);
   const scrollRef = useRef7(null);
   const rootRef = useRef7(null);
+  const cellRendererRegistry = useMemo3(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
   useEffect7(() => {
     if (enableVirtualization && enableRowSpan) {
@@ -3681,7 +4044,9 @@ function useGlideTable(options) {
     onDataChange,
     onBatchChange,
     onRowsPaste,
-    onCellNavigate: handleCellNavigate
+    onCellNavigate: handleCellNavigate,
+    cellRendererRegistry,
+    rootRef
   });
   const {
     editingCell,
@@ -3691,10 +4056,6 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const cellRendererRegistry = useMemo3(
-    () => createCellRendererRegistry(cellRenderers),
-    [cellRenderers]
-  );
   const commitRenderedCellValue = useCallback5(
     (rowId, columnId, value) => commitCellValue({
       data: tableData,
@@ -4152,17 +4513,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 [containerWidth, setContainerWidth] = useState6(0);
+  useEffect8(() => {
+    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 = useMemo4(() => {
+    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 = useMemo4(() => {
+    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 = useMemo4(
-    () => ({ ...rowContextValue, classNames }),
-    [rowContextValue, classNames]
+    () => ({
+      ...rowContextValue,
+      classNames,
+      columnFreeze: {
+        ...rowContextValue.columnFreeze,
+        offsets: freezeOffsets
+      },
+      columnResize: {
+        ...rowContextValue.columnResize,
+        layoutWidths
+      }
+    }),
+    [rowContextValue, classNames, freezeOffsets, layoutWidths]
   );
   if (isPending) {
     return /* @__PURE__ */ jsx7(
@@ -4243,7 +4661,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, {
@@ -4256,7 +4675,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)
@@ -4412,7 +4833,7 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-import { useCallback as useCallback7, useMemo as useMemo5, useState as useState6 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
 import { useCallback as useCallback6 } from "react";
@@ -4535,6 +4956,7 @@ function buildColumnDef(props, sort, onSort) {
       cellRender: render,
       frozen,
       reorderable,
+      width,
       minWidth,
       maxWidth,
       className,
@@ -4582,10 +5004,10 @@ function countLeafColumns(nodes) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-import { Children, isValidElement as isValidElement2 } from "react";
+import { Children, isValidElement as isValidElement3 } from "react";
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-import { isValidElement } from "react";
+import { isValidElement as isValidElement2 } from "react";
 var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
 var TABLE_BODY_DISPLAY_NAME = "Table.Body";
 var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
@@ -4598,19 +5020,19 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return isValidElement2(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return isValidElement2(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return isValidElement2(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
 function isTableColumnGroupElement(child) {
-  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
+  return isValidElement2(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return isValidElement2(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -4654,7 +5076,7 @@ function walkColumnTreeNodes(children) {
       });
       continue;
     }
-    if (isValidElement2(child)) {
+    if (isValidElement3(child)) {
       const nested = child.props.children;
       if (nested != null) {
         result.push(...walkColumnTreeNodes(nested));
@@ -4784,7 +5206,7 @@ function TableRoot({
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = useState6(null);
+  const [sort, setSort] = useState7(null);
   const handleSort = useCallback7((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {