@lensui/lens-table 0.1.28 → 0.1.29

package/dist/index.cjs

@@ -3663,13 +3663,23 @@ function TableInner({
     const sourceCell = drag.sourceCell;
     const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
     const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
-    const previewWidth = Math.min(sourceWidth, Math.max(60, viewport.width - 16));
-    const previewRowCount = Math.min(rows.length, 6);
-    const previewHeight = headerLeafHeight + previewRowCount * rowHeight;
+    const sourceColumn = columns[sourceCell.startIndex];
+    const previewContext = event.currentTarget.getContext("2d");
+    const previewStyles = rootRef.current ? getComputedStyle(rootRef.current) : null;
+    const previewFontSize = previewStyles ? readThemePixel(previewStyles, "--rvg-font-size-body", 13) : 13;
+    if (previewContext) previewContext.font = `${previewFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    const measurePreviewText = (value) => previewContext?.measureText(value).width ?? value.length * previewFontSize * 0.58;
+    const previewContentWidth = Math.max(
+      measurePreviewText(sourceColumn?.title ?? ""),
+      ...rows.slice(0, 100).map((_row, rowIndex) => measurePreviewText(getCellLabel(rowIndex, sourceCell.startIndex)))
+    ) + 24;
+    const previewWidth = Math.min(
+      Math.max(sourceWidth, Math.ceil(previewContentWidth)),
+      Math.max(60, Math.min(360, viewport.width - 16))
+    );
     setColumnDragPreview({
       sourceIndex: sourceCell.startIndex,
-      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left + 12)),
-      top: Math.max(4, Math.min(viewport.height - previewHeight - 4, event.clientY - rootRect.top + 12)),
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left - previewWidth / 2)),
       width: previewWidth
     });
     const hoveredColumnIndex = locateColumn(event.clientX);
@@ -3697,10 +3707,14 @@ function TableInner({
       columnEdge,
       columns.length
     );
+    const compatibleHighlightCells = headerCells.filter((cell) => {
+      const cellColumn = columns[cell.startIndex];
+      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
+    });
+    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
+    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
-      setColumnDropTarget(null);
-      setDragGuide(null);
       return;
     }
     validColumnDropRef.current = {
@@ -3713,13 +3727,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    const compatibleHighlightCells = headerCells.filter((cell) => {
-      const cellColumn = columns[cell.startIndex];
-      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
-    });
-    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
-    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
-  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
+  }, [columns, getCellLabel, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rows, setDragGuide, viewport.width]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -5238,21 +5246,24 @@ function TableInner({
         className: "rvg-column-drag-preview",
         style: {
           left: columnDragPreview.left,
-          top: columnDragPreview.top,
+          top: 0,
           width: columnDragPreview.width,
-          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+          height: renderHeight
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-column-drag-preview-header", style: { top: 0, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.title }),
-          rows.slice(0, 6).map((_row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "div",
-            {
-              className: "rvg-column-drag-preview-cell",
-              style: { top: headerLeafHeight + rowIndex * rowHeight, height: rowHeight },
-              children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
-            },
-            `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
-          ))
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-column-drag-preview-header", style: { top: headerLeafTop, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
+            const rowIndex = domRange.rowStart + visibleRowOffset;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
+                style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
+                children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+              },
+              `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+            );
+          })
         ]
       }
     ),

package/dist/index.css

@@ -1511,10 +1511,10 @@
   position: absolute;
   z-index: 11;
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 32%, var(--rvg-color-grid));
-  background: color-mix(in srgb, var(--rvg-color-primary) 4%, var(--rvg-color-bg));
-  box-shadow: 0 8px 22px rgba(50, 91, 136, 0.2);
-  opacity: 0.96;
+  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 38%, var(--rvg-color-grid));
+  background: var(--rvg-color-bg);
+  box-shadow: 0 6px 18px rgba(50, 91, 136, 0.18);
+  opacity: 0.94;
   pointer-events: none;
   box-sizing: border-box;
 }
@@ -1539,10 +1539,13 @@
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header {
-  background: color-mix(in srgb, var(--rvg-color-primary) 10%, var(--rvg-color-header-bg));
+  background: var(--rvg-color-header-bg);
   color: var(--rvg-color-text);
   font-weight: 600;
 }
+.rvg-column-drag-preview-cell.is-striped {
+  background: var(--rvg-color-stripe);
+}
 .rvg-column-drag-preview-header .rvg-preview-header-icon {
   position: absolute;
   top: 50%;

package/dist/index.js

@@ -3633,13 +3633,23 @@ function TableInner({
     const sourceCell = drag.sourceCell;
     const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
     const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
-    const previewWidth = Math.min(sourceWidth, Math.max(60, viewport.width - 16));
-    const previewRowCount = Math.min(rows.length, 6);
-    const previewHeight = headerLeafHeight + previewRowCount * rowHeight;
+    const sourceColumn = columns[sourceCell.startIndex];
+    const previewContext = event.currentTarget.getContext("2d");
+    const previewStyles = rootRef.current ? getComputedStyle(rootRef.current) : null;
+    const previewFontSize = previewStyles ? readThemePixel(previewStyles, "--rvg-font-size-body", 13) : 13;
+    if (previewContext) previewContext.font = `${previewFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    const measurePreviewText = (value) => previewContext?.measureText(value).width ?? value.length * previewFontSize * 0.58;
+    const previewContentWidth = Math.max(
+      measurePreviewText(sourceColumn?.title ?? ""),
+      ...rows.slice(0, 100).map((_row, rowIndex) => measurePreviewText(getCellLabel(rowIndex, sourceCell.startIndex)))
+    ) + 24;
+    const previewWidth = Math.min(
+      Math.max(sourceWidth, Math.ceil(previewContentWidth)),
+      Math.max(60, Math.min(360, viewport.width - 16))
+    );
     setColumnDragPreview({
       sourceIndex: sourceCell.startIndex,
-      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left + 12)),
-      top: Math.max(4, Math.min(viewport.height - previewHeight - 4, event.clientY - rootRect.top + 12)),
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left - previewWidth / 2)),
       width: previewWidth
     });
     const hoveredColumnIndex = locateColumn(event.clientX);
@@ -3667,10 +3677,14 @@ function TableInner({
       columnEdge,
       columns.length
     );
+    const compatibleHighlightCells = headerCells.filter((cell) => {
+      const cellColumn = columns[cell.startIndex];
+      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
+    });
+    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
+    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
-      setColumnDropTarget(null);
-      setDragGuide(null);
       return;
     }
     validColumnDropRef.current = {
@@ -3683,13 +3697,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    const compatibleHighlightCells = headerCells.filter((cell) => {
-      const cellColumn = columns[cell.startIndex];
-      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
-    });
-    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
-    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
-  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
+  }, [columns, getCellLabel, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rows, setDragGuide, viewport.width]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -5208,21 +5216,24 @@ function TableInner({
         className: "rvg-column-drag-preview",
         style: {
           left: columnDragPreview.left,
-          top: columnDragPreview.top,
+          top: 0,
           width: columnDragPreview.width,
-          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+          height: renderHeight
         },
         children: [
-          /* @__PURE__ */ jsx7("div", { className: "rvg-column-drag-preview-header", style: { top: 0, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.title }),
-          rows.slice(0, 6).map((_row, rowIndex) => /* @__PURE__ */ jsx7(
-            "div",
-            {
-              className: "rvg-column-drag-preview-cell",
-              style: { top: headerLeafHeight + rowIndex * rowHeight, height: rowHeight },
-              children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
-            },
-            `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
-          ))
+          /* @__PURE__ */ jsx7("div", { className: "rvg-column-drag-preview-header", style: { top: headerLeafTop, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
+            const rowIndex = domRange.rowStart + visibleRowOffset;
+            return /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
+                style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
+                children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+              },
+              `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+            );
+          })
         ]
       }
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",