react-glide-table 1.1.5 → 1.1.7

package/dist/index.js

@@ -31,7 +31,7 @@ import {
   useCallback as useCallback3,
   useEffect as useEffect4,
   useMemo as useMemo2,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState3
 } from "react";
 
@@ -175,7 +175,7 @@ function useCellEdit({
 }
 
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
@@ -452,6 +452,127 @@ function hasCellSelectionEdges(style) {
   );
 }
 
+// src/components/ui/table/features/cell-selection/copyData.ts
+function formatCellValue(value) {
+  if (value === null || value === void 0) return "";
+  return String(value);
+}
+function getNestedValue(row, path) {
+  if (!path.includes(".")) return row[path];
+  return path.split(".").reduce((current, key) => {
+    if (current === null || current === void 0 || typeof current !== "object") {
+      return void 0;
+    }
+    return current[key];
+  }, row);
+}
+function readRowColumnValue(rowData, columnDef) {
+  if ("accessorFn" in columnDef && typeof columnDef.accessorFn === "function") {
+    return columnDef.accessorFn(rowData, 0);
+  }
+  if ("accessorKey" in columnDef && columnDef.accessorKey != null && columnDef.accessorKey !== "") {
+    return getNestedValue(rowData, String(columnDef.accessorKey));
+  }
+  return void 0;
+}
+function flattenSubtreeRows(row) {
+  const children = row.children;
+  if (!Array.isArray(children) || children.length === 0) return [];
+  const result = [];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      result.push(node);
+      const nested = node.children;
+      if (Array.isArray(nested) && nested.length > 0) {
+        walk(nested);
+      }
+    }
+  };
+  walk(children);
+  return result;
+}
+function hasSubtree(row) {
+  const children = row.children;
+  return Array.isArray(children) && children.length > 0;
+}
+function getOriginalRowId(original) {
+  return String(original.id ?? original.uniqueId ?? "");
+}
+function getRowDepth(original) {
+  return typeof original.level === "number" ? original.level : 0;
+}
+function collectCopyRowEntries(visibleRows, bounds, mode = "visible") {
+  const { startRow, endRow } = bounds;
+  const result = [];
+  const includedOriginalIds = /* @__PURE__ */ new Set();
+  const appendSubtree = (node, depth) => {
+    const children = node.children;
+    if (!Array.isArray(children) || children.length === 0) return;
+    for (const child of children) {
+      const childId = getOriginalRowId(child);
+      if (!(childId && includedOriginalIds.has(childId))) {
+        result.push({ row: child, depth });
+        if (childId) includedOriginalIds.add(childId);
+      }
+      appendSubtree(child, depth + 1);
+    }
+  };
+  for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
+    const row = visibleRows[rowIndex];
+    if (!row) continue;
+    const originalId = getOriginalRowId(row.original);
+    if (originalId && includedOriginalIds.has(originalId)) continue;
+    const depth = getRowDepth(row.original);
+    result.push({ row: row.original, depth });
+    if (originalId) includedOriginalIds.add(originalId);
+    if (mode !== "subtree" || !hasSubtree(row.original)) continue;
+    appendSubtree(row.original, depth + 1);
+  }
+  return result;
+}
+function collectCopyRows(visibleRows, bounds, mode = "visible") {
+  return collectCopyRowEntries(visibleRows, bounds, mode).map((entry) => entry.row);
+}
+function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths) {
+  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);
+  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("	");
+    return `${"	".repeat(relativeDepth)}${line}`;
+  }).join("\n");
+}
+function serializeSelectionToTSV(visibleRows, bounds, mode = "visible") {
+  const entries = collectCopyRowEntries(visibleRows, bounds, mode);
+  return serializeCopyRowsToTSV(
+    entries.map((entry) => entry.row),
+    visibleRows,
+    bounds,
+    entries.map((entry) => entry.depth)
+  );
+}
+async function writeSelectionToClipboard(visibleRows, bounds, mode = "visible") {
+  const text = serializeSelectionToTSV(visibleRows, bounds, mode);
+  if (!text) return false;
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    return false;
+  }
+  return true;
+}
+
 // src/components/ui/table/features/cell-selection/fillData.ts
 function getColumnAccessorKey2(columnDef) {
   if ("accessorKey" in columnDef && columnDef.accessorKey) {
@@ -508,15 +629,103 @@ function hasFillExtension(sourceBounds, fillBounds) {
   return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
 }
 
+// src/components/ui/table/features/cell-selection/pasteData.ts
+function countLeadingEmptyCells(cells) {
+  let depth = 0;
+  while (depth < cells.length && cells[depth] === "") {
+    depth += 1;
+  }
+  return depth;
+}
+function looksLikeSubtreeIndentation(leadingEmptyCounts) {
+  if (leadingEmptyCounts.length === 0) return false;
+  const firstDepth = leadingEmptyCounts[0] ?? 0;
+  if (firstDepth !== 0) return false;
+  return leadingEmptyCounts.some((depth) => depth > 0);
+}
+function parseClipboardTSV(text) {
+  return parseClipboardTSVWithDepths(text).values;
+}
+function parseClipboardTSVWithDepths(text) {
+  if (!text) return { values: [], depths: [] };
+  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const withoutTrailing = normalized.replace(/\n+$/, "");
+  if (!withoutTrailing) return { values: [], depths: [] };
+  const rows = withoutTrailing.split("\n").map((line) => line.split("	"));
+  const leadingEmptyCounts = rows.map(countLeadingEmptyCells);
+  const treatAsDepth = looksLikeSubtreeIndentation(leadingEmptyCounts);
+  const values = [];
+  const depths = [];
+  for (let index = 0; index < rows.length; index += 1) {
+    const cells = rows[index] ?? [];
+    const depth = leadingEmptyCounts[index] ?? 0;
+    if (treatAsDepth) {
+      values.push(cells.slice(depth));
+      depths.push(depth);
+    } else {
+      values.push(cells);
+      depths.push(0);
+    }
+  }
+  return { values, depths };
+}
+function resolvePasteColumnIds(rows, startCol, width) {
+  if (width <= 0) return [];
+  const cells = rows[0]?.getVisibleCells() ?? [];
+  const columnIds = [];
+  for (let offset = 0; offset < width; offset += 1) {
+    const cell = cells[startCol + offset];
+    if (!cell) break;
+    columnIds.push(cell.column.id);
+  }
+  return columnIds;
+}
+function buildRowsPastePayload(rows, startRow, startCol, text, mode, endRow = startRow) {
+  const { values, depths } = parseClipboardTSVWithDepths(text);
+  if (values.length === 0) return null;
+  const width = Math.max(...values.map((row) => row.length), 0);
+  if (width === 0) return null;
+  const columnIds = resolvePasteColumnIds(rows, startCol, width);
+  if (columnIds.length === 0) return null;
+  const rowIds = [];
+  for (let offset = 0; offset < values.length; offset += 1) {
+    const row = rows[startRow + offset];
+    if (!row) break;
+    rowIds.push(row.id);
+  }
+  const anchorRow = rows[endRow] ?? rows[startRow];
+  return {
+    mode,
+    startRow,
+    startCol,
+    endRow,
+    rowIds,
+    anchorRowId: anchorRow?.id ?? "",
+    columnIds,
+    values,
+    depths
+  };
+}
+function isEditablePasteTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return Boolean(target.isContentEditable);
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 function useCellSelection({
   data,
   rows,
   enabled = true,
+  enableSubtreeCopy = false,
+  enableInsertPaste = true,
   onDataChange,
-  onBatchChange
+  onBatchChange,
+  onRowsPaste
 }) {
   const [dragState, setDragState] = useState2(INITIAL_DRAG_STATE);
+  const pendingPasteModeRef = useRef2(null);
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
   const handleCellMouseDown = useCallback2(
@@ -570,21 +779,113 @@ function useCellSelection({
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
+  const copySelection = useCallback2(
+    async (options) => {
+      if (!enabled || !activeSelectionBounds) return false;
+      const mode = options?.includeDescendants && enableSubtreeCopy ? "subtree" : "visible";
+      return writeSelectionToClipboard(rows, activeSelectionBounds, mode);
+    },
+    [activeSelectionBounds, enableSubtreeCopy, enabled, rows]
+  );
   useEffect2(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "c" && activeSelectionBounds) {
-        const { startRow, endRow, startCol, endCol } = activeSelectionBounds;
-        const selectedData = rows.slice(startRow, endRow + 1).map((row) => {
-          const cells = row.getVisibleCells();
-          return cells.slice(startCol, endCol + 1).map((cell) => cell.getValue()).join("	");
-        }).join("\n");
-        navigator.clipboard.writeText(selectedData);
-      }
+      if (!activeSelectionBounds) return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const isSubtreeShortcut = enableSubtreeCopy && e.shiftKey && e.key.toLowerCase() === "c";
+      const isVisibleCopyShortcut = !e.shiftKey && e.key.toLowerCase() === "c";
+      if (!isSubtreeShortcut && !isVisibleCopyShortcut) return;
+      e.preventDefault();
+      void copySelection({ includeDescendants: isSubtreeShortcut });
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [activeSelectionBounds, enabled, rows]);
+  }, [activeSelectionBounds, copySelection, enableSubtreeCopy, enabled]);
+  const emitRowsPaste = useCallback2(
+    (text, mode) => {
+      if (!onRowsPaste || !activeSelectionBounds) return false;
+      const payload = buildRowsPastePayload(
+        rows,
+        activeSelectionBounds.startRow,
+        activeSelectionBounds.startCol,
+        text,
+        mode,
+        activeSelectionBounds.endRow
+      );
+      if (!payload) return false;
+      onRowsPaste(payload);
+      return true;
+    },
+    [activeSelectionBounds, onRowsPaste, rows]
+  );
+  useEffect2(() => {
+    if (!enabled || !onRowsPaste) return;
+    const pasteHandledRef = { current: false };
+    const ignoreNextPasteRef = { current: false };
+    const handleKeyDown = (e) => {
+      if (!activeSelectionBounds) return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      if (e.key.toLowerCase() !== "v") return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      if (e.shiftKey && !enableInsertPaste) {
+        ignoreNextPasteRef.current = true;
+        pendingPasteModeRef.current = null;
+        return;
+      }
+      const mode = e.shiftKey ? "insert" : "overwrite";
+      pasteHandledRef.current = false;
+      ignoreNextPasteRef.current = false;
+      pendingPasteModeRef.current = mode;
+      void (async () => {
+        try {
+          const text = await navigator.clipboard.readText();
+          if (pasteHandledRef.current) return;
+          if (pendingPasteModeRef.current !== mode) return;
+          if (!text) return;
+          pasteHandledRef.current = true;
+          emitRowsPaste(text, mode);
+          pendingPasteModeRef.current = null;
+        } catch {
+        }
+      })();
+    };
+    const handlePaste = (e) => {
+      if (!activeSelectionBounds) return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      if (ignoreNextPasteRef.current) {
+        ignoreNextPasteRef.current = false;
+        pendingPasteModeRef.current = null;
+        return;
+      }
+      const mode = pendingPasteModeRef.current ?? "overwrite";
+      if (pasteHandledRef.current) {
+        e.preventDefault();
+        return;
+      }
+      const text = e.clipboardData?.getData("text/plain");
+      if (text == null || text === "") return;
+      pasteHandledRef.current = true;
+      e.preventDefault();
+      emitRowsPaste(text, mode);
+      pendingPasteModeRef.current = null;
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("paste", handlePaste);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("paste", handlePaste);
+    };
+  }, [
+    activeSelectionBounds,
+    emitRowsPaste,
+    enableInsertPaste,
+    enabled,
+    onRowsPaste
+  ]);
   useEffect2(() => {
     if (!enabled) return;
     const handleMouseUp = () => {
@@ -630,12 +931,13 @@ function useCellSelection({
     activeSelectionBounds,
     handleCellMouseDown,
     handleCellMouseEnter,
-    handleFillHandleMouseDown
+    handleFillHandleMouseDown,
+    copySelection
   };
 }
 
 // src/components/ui/table/features/row-expand/row-expand.ts
-import { useEffect as useEffect3, useMemo, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
 function getFieldValue(row, key) {
   return row[key];
 }
@@ -665,8 +967,8 @@ var useConvertTreeData = ({
   expandedRows,
   onExpandedRowsChange
 }) => {
-  const onExpandedRowsChangeRef = useRef2(onExpandedRowsChange);
-  const hasInitializedRef = useRef2(false);
+  const onExpandedRowsChangeRef = useRef3(onExpandedRowsChange);
+  const hasInitializedRef = useRef3(false);
   useEffect3(() => {
     onExpandedRowsChangeRef.current = onExpandedRowsChange;
   }, [onExpandedRowsChange]);
@@ -712,15 +1014,16 @@ var useConvertTreeData = ({
       children: [],
       processed: false
     }));
-    const itemMap = /* @__PURE__ */ new Map();
-    dataWithLevels.forEach((item) => {
-      const key = getFieldValue(item, toggleField);
-      if (typeof key !== "string" || !key) return;
-      if (!itemMap.has(key)) {
-        itemMap.set(key, []);
+    const findNearestPrecedingParent = (index, parentKey) => {
+      for (let i = index - 1; i >= 0; i -= 1) {
+        const candidate = dataWithLevels[i];
+        if (!candidate) continue;
+        if (getFieldValue(candidate, toggleField) === parentKey) {
+          return candidate;
+        }
       }
-      itemMap.get(key)?.push(item);
-    });
+      return void 0;
+    };
     const rootItems = [];
     dataWithLevels.forEach((item) => {
       if (!getFieldValue(item, childField)) {
@@ -728,29 +1031,18 @@ var useConvertTreeData = ({
         item.processed = true;
       }
     });
-    dataWithLevels.forEach((item) => {
+    dataWithLevels.forEach((item, index) => {
       const parentKey = getFieldValue(item, childField);
       if (!parentKey || item.processed) return;
-      const parentItems = dataWithLevels.filter(
-        (parent) => getFieldValue(parent, toggleField) === parentKey && !getFieldValue(parent, childField)
-      );
-      if (parentItems.length > 0) {
-        const parent = parentItems[0];
+      const parent = findNearestPrecedingParent(index, parentKey);
+      if (parent) {
         item.level = parent.level + 1;
         parent.children.push(item);
         item.processed = true;
-      } else {
-        const otherParents = itemMap.get(String(parentKey)) || [];
-        if (otherParents.length > 0) {
-          const parent = otherParents[0];
-          item.level = parent.level + 1;
-          parent.children.push(item);
-          item.processed = true;
-        } else {
-          rootItems.push(item);
-          item.processed = true;
-        }
+        return;
       }
+      rootItems.push(item);
+      item.processed = true;
     });
     return rootItems;
   }, [enabled, data, toggleField, childField, flattenField]);
@@ -775,16 +1067,23 @@ var useConvertTreeData = ({
       return result;
     };
     const flattenedData = flatten(processedData, [], 0);
-    flattenedData.forEach((item) => {
-      if (getFieldValue(item, childField)) {
-        const parentItem = flattenedData.find(
-          (parent) => getFieldValue(parent, toggleField) === getFieldValue(item, childField)
-        );
-        const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 1) : 1;
-        item.parentCount = parentAmount || 1;
-      } else {
+    flattenedData.forEach((item, index) => {
+      const parentKey = getFieldValue(item, childField);
+      if (!parentKey) {
         item.parentCount = 1;
+        return;
       }
+      let parentItem;
+      for (let i = index - 1; i >= 0; i -= 1) {
+        const candidate = flattenedData[i];
+        if (!candidate) continue;
+        if (getFieldValue(candidate, toggleField) === parentKey) {
+          parentItem = candidate;
+          break;
+        }
+      }
+      const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 1) : 1;
+      item.parentCount = parentAmount || 1;
     });
     return flattenedData;
   }, [
@@ -931,6 +1230,10 @@ function useGlideTable(options) {
     expandedRows: controlledExpandedRows,
     onExpandedRowsChange,
     preventExpand = false,
+    enableSubtreeCopy,
+    onCopyActionsReady,
+    onRowsPaste,
+    enableInsertPaste,
     enableVirtualization = true,
     estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
     virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
@@ -945,13 +1248,13 @@ function useGlideTable(options) {
     };
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
+  const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = useState3({});
   const [internalExpandedRows, setInternalExpandedRows] = useState3(
     () => /* @__PURE__ */ new Set()
   );
   const [hoveredRowIndex, setHoveredRowIndex] = useState3(null);
-  const [hoveredGroupKey, setHoveredGroupKey] = useState3(null);
-  const scrollRef = useRef3(null);
+  const scrollRef = useRef4(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
   useEffect4(() => {
     if (enableVirtualization && enableRowSpan) {
@@ -1014,6 +1317,7 @@ function useGlideTable(options) {
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
+  const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
   const columnRowSpanMap = useMemo2(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
@@ -1032,27 +1336,29 @@ 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 selectedGroupKeys = useMemo2(() => {
-    if (!enableRowSpan || !primaryRowSpanKey) return /* @__PURE__ */ new Set();
-    const keys = /* @__PURE__ */ new Set();
+  const selectedRowIndices = useMemo2(() => {
+    const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
-      const value = selectedRow.original[primaryRowSpanKey];
-      if (value !== null && value !== void 0) keys.add(String(value));
+      indices.add(selectedRow.index);
     }
-    return keys;
-  }, [enableRowSpan, primaryRowSpanKey, selectedRows]);
+    return indices;
+  }, [selectedRows]);
   const {
     dragState,
     activeSelectionBounds,
     handleCellMouseDown,
     handleCellMouseEnter,
-    handleFillHandleMouseDown
+    handleFillHandleMouseDown,
+    copySelection
   } = useCellSelection({
     data: tableData,
     rows,
     enabled: enableCellSelection,
+    enableSubtreeCopy: resolvedEnableSubtreeCopy,
+    enableInsertPaste: enableInsertPaste ?? true,
     onDataChange,
-    onBatchChange
+    onBatchChange,
+    onRowsPaste
   });
   const {
     editingCell,
@@ -1074,22 +1380,10 @@ function useGlideTable(options) {
   );
   const clearHover = useCallback3(() => {
     setHoveredRowIndex(null);
-    setHoveredGroupKey(null);
   }, []);
-  const handleRowHover = useCallback3(
-    (rowIndex, rowData) => {
-      setHoveredRowIndex(rowIndex);
-      if (!primaryRowSpanKey) {
-        setHoveredGroupKey(null);
-        return;
-      }
-      const groupValue = rowData[primaryRowSpanKey];
-      setHoveredGroupKey(
-        groupValue === null || groupValue === void 0 ? null : String(groupValue)
-      );
-    },
-    [primaryRowSpanKey]
-  );
+  const handleRowHover = useCallback3((rowIndex, _rowData) => {
+    setHoveredRowIndex(rowIndex);
+  }, []);
   const handleToggleSelect = useCallback3(
     (row) => {
       if (!row.getCanSelect()) return;
@@ -1112,10 +1406,10 @@ function useGlideTable(options) {
       rowSpan: {
         enableRowSpan,
         primaryRowSpanKey,
+        primaryRowSpanColumnId,
         columnRowSpanMap,
         hoveredRowIndex,
-        hoveredGroupKey,
-        selectedGroupKeys,
+        selectedRowIndices,
         onRowHover: handleRowHover
       },
       selection: {
@@ -1153,10 +1447,10 @@ function useGlideTable(options) {
   }, [
     enableRowSpan,
     primaryRowSpanKey,
+    primaryRowSpanColumnId,
     columnRowSpanMap,
     hoveredRowIndex,
-    hoveredGroupKey,
-    selectedGroupKeys,
+    selectedRowIndices,
     handleRowHover,
     rowSelectionMode,
     selectOnRowClick,
@@ -1182,6 +1476,14 @@ function useGlideTable(options) {
     labels.expandRow,
     labels.collapseRow
   ]);
+  const copySelectionRef = useRef4(copySelection);
+  useEffect4(() => {
+    copySelectionRef.current = copySelection;
+  }, [copySelection]);
+  const stableCopySelection = useCallback3((options2) => copySelectionRef.current(options2), []);
+  useEffect4(() => {
+    onCopyActionsReady?.({ copySelection: stableCopySelection });
+  }, [onCopyActionsReady, stableCopySelection]);
   return {
     table,
     tableData,
@@ -1201,7 +1503,8 @@ function useGlideTable(options) {
     paddingBottom,
     rowContextValue,
     handleToggleSelect,
-    clearHover
+    clearHover,
+    copySelection: stableCopySelection
   };
 }
 
@@ -1211,7 +1514,7 @@ import { useMemo as useMemo3 } from "react";
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 import { flexRender } from "@tanstack/react-table";
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
 
 // src/components/ui/table/DataTableContext.tsx
 import { createContext, use } from "react";
@@ -1401,11 +1704,10 @@ function DataTableRow({
   const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
   const {
     enableRowSpan,
-    primaryRowSpanKey,
+    primaryRowSpanColumnId,
     columnRowSpanMap,
     hoveredRowIndex,
-    hoveredGroupKey,
-    selectedGroupKeys,
+    selectedRowIndices,
     onRowHover
   } = rowSpan;
   const { rowSelectionMode, selectOnRowClick, onRowClick, getRowClassName } = selection;
@@ -1438,9 +1740,11 @@ function DataTableRow({
   const rowData = row.original;
   const isRowHovered = hoveredRowIndex === rowIndex;
   const isRowSelected = row.getIsSelected();
-  const rowGroupKey = primaryRowSpanKey !== void 0 && rowData[primaryRowSpanKey] !== null && rowData[primaryRowSpanKey] !== void 0 ? String(rowData[primaryRowSpanKey]) : null;
-  const isGroupHovered = enableRowSpan && hoveredGroupKey !== null && rowGroupKey === hoveredGroupKey;
-  const isGroupSelected = enableRowSpan && rowGroupKey !== null && selectedGroupKeys.has(rowGroupKey);
+  const { startRow: primaryGroupStart, rowSpan: primaryGroupSpan } = resolveRowSpanAt(
+    primaryRowSpanColumnId ? columnRowSpanMap.get(primaryRowSpanColumnId) : void 0,
+    rowIndex
+  );
+  const isGroupHovered = enableRowSpan && hoveredRowIndex !== null && hoveredRowIndex >= primaryGroupStart && hoveredRowIndex <= primaryGroupStart + primaryGroupSpan - 1;
   const visibleCells = row.getVisibleCells();
   const columnIdsByIndex = visibleCells.map((cell) => cell.column.id);
   const isVisuallySelectedAt = activeSelectionBounds ? (targetRow, targetCol) => {
@@ -1464,7 +1768,7 @@ function DataTableRow({
   const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
   const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
   const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
-  const editInputRef = useRef4(null);
+  const editInputRef = useRef5(null);
   const isRowEditing = editingCell?.rowIndex === rowIndex;
   useEffect5(() => {
     if (!isRowEditing) return;
@@ -1517,7 +1821,16 @@ function DataTableRow({
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
         const isMergedCellHovered = hoveredRowIndex !== null && hoveredRowIndex >= rowIndex && hoveredRowIndex <= rowIndex + cellRowSpan - 1;
         const showCellHover = isRowSpanColumn ? isMergedCellHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
+        let isMergedCellSelected = false;
+        if (isRowSpanColumn) {
+          for (let r = rowIndex; r < rowIndex + cellRowSpan; r += 1) {
+            if (selectedRowIndices.has(r)) {
+              isMergedCellSelected = true;
+              break;
+            }
+          }
+        }
+        const showCellSelected = isRowSpanColumn ? isMergedCellSelected : isRowSelected;
         const isMerged = cellRowSpan > 1;
         const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
           columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
@@ -1877,7 +2190,12 @@ function DataTable({
                     return /* @__PURE__ */ jsx5(
                       "th",
                       {
-                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        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
+                        },
                         className: cn(
                           "data-table-head-cell",
                           CELL_ALIGN_CLASS[align],
@@ -2319,10 +2637,14 @@ export {
   applyFillData,
   applySelectionUpdater,
   buildColumnRowSpanMap,
+  buildRowsPastePayload,
   canExpandRow,
+  collectCopyRowEntries,
+  collectCopyRows,
   collectFillChanges,
   collectRowSpanColumns,
   createTable,
+  flattenSubtreeRows,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
@@ -2330,15 +2652,22 @@ export {
   hasCellSelectionEdges,
   isCellInSelection,
   isColumnEditable,
+  isEditablePasteTarget,
   measureMergedSpanRowHeights,
   parseCellEditValue,
+  parseClipboardTSV,
+  parseClipboardTSVWithDepths,
   resolveDataTableLabels,
+  resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,
   rowRangeToHeightRatios,
+  serializeCopyRowsToTSV,
+  serializeSelectionToTSV,
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,
   useConvertTreeData,
-  useGlideTable
+  useGlideTable,
+  writeSelectionToClipboard
 };