@lensui/lens-table 0.1.24 → 0.1.27

package/dist/index.cjs

@@ -882,7 +882,7 @@ var COLORS = {
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
-  columnDropTargetFill: "#eeeeee",
+  columnDropTargetFill: "#e2edf9",
   stripe: "#fafbfc"
 };
 function ellipsizeText(context, text, maxWidth) {
@@ -959,13 +959,24 @@ function paintGrid(options) {
     return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
   };
   const rowBelowDragGap = rowDragPreview ? rowDragPreview.sourceIndex <= rowDragPreview.targetIndex ? rowDragPreview.targetIndex + 1 : rowDragPreview.targetIndex : -1;
-  if (striped && trailingBlankStart !== null) {
+  if (trailingBlankStart !== null) {
     const rowStart = Math.max(0, range.rowStart);
     for (let rowIndex = rowStart; rowIndex < range.rowEnd; rowIndex += 1) {
-      if (rowIndex % 2 === 0 || rowDragPreview?.sourceIndex === rowIndex) continue;
+      if (rowDragPreview?.sourceIndex === rowIndex) continue;
+      const row = rows[rowIndex];
+      const rowKey = getRowKey(row, rowIndex);
+      const trailingRowStyle = options.rowStyle?.(row, rowIndex);
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
-      ctx.fillStyle = colors.stripe;
-      ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      const paintTrailingLayer = (fill) => {
+        if (!fill) return;
+        ctx.fillStyle = fill;
+        ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      };
+      if (striped && rowIndex % 2 === 1) paintTrailingLayer(colors.stripe);
+      paintTrailingLayer(trailingRowStyle?.backgroundColor);
+      if (selectedRowKeys.has(rowKey)) paintTrailingLayer(colors.axisSelectionFill);
+      if (hoveredRowIndex === rowIndex) paintTrailingLayer(colors.rowHoverFill);
+      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) paintTrailingLayer(colors.insertedFill);
     }
   }
   const paintBodyColumns = (layer) => {
@@ -990,6 +1001,7 @@ function paintGrid(options) {
         const cellWidth = getCellWidth(columnIndex, colSpan);
         const cellHeight = rowHeight * rowSpan;
         const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
+        const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
         const rangeRowStart = selectionRange ? Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeRowEnd = selectionRange ? Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeColumnStart = selectionRange ? Math.min(selectionRange.anchor.columnIndex, selectionRange.focus.columnIndex) : -1;
@@ -1011,10 +1023,6 @@ function paintGrid(options) {
           ctx.fillStyle = colors.rowHoverFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
-          ctx.fillStyle = colors.columnDropTargetFill;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
-        }
         if (highlightInsertedRows && insertedRowKeys.has(rowKey)) {
           ctx.fillStyle = colors.insertedFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1039,6 +1047,10 @@ function paintGrid(options) {
           ctx.fillStyle = annotation.color;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (isColumnDropTarget) {
+          ctx.fillStyle = colors.columnDropTargetFill;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
@@ -1048,14 +1060,14 @@ function paintGrid(options) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
         if (rowSpan > 1) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           for (let offset = 1; offset < rowSpan; offset += 1) {
             ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
           }
         }
         if (colSpan > 1 && !verticalBorderless) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1152,11 +1164,11 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            ctx.fillStyle = isColumnDropTarget ? colors.text : isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
-            ctx.fillText(label, textX, y + cellHeight / 2 + cellBaselineOffset);
+            ctx.fillText(ellipsizeText(ctx, label, Math.max(0, cellWidth - padding * 2)), textX, y + cellHeight / 2 + cellBaselineOffset);
             ctx.restore();
           }
         }
@@ -1215,6 +1227,25 @@ function paintGrid(options) {
     paintExtendedColumnSelection("scroll");
     paintExtendedColumnSelection("left");
     paintExtendedColumnSelection("right");
+    const paintExtendedColumnDropTarget = (layer) => {
+      if (!columnDropTarget) return;
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.columnDropTargetFill;
+      for (let columnIndex = columnDropTarget.startIndex; columnIndex <= columnDropTarget.endIndex; columnIndex += 1) {
+        if (layer === "scroll" ? columns[columnIndex]?.fixed !== void 0 : columns[columnIndex]?.fixed !== layer) continue;
+        if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
+        ctx.fillRect(getColumnX(columnIndex), extensionTop, metrics[columnIndex].width, extensionHeight);
+      }
+      ctx.restore();
+    };
+    paintExtendedColumnDropTarget("scroll");
+    paintExtendedColumnDropTarget("left");
+    paintExtendedColumnDropTarget("right");
     if (!verticalBorderless) {
       paintExtendedColumnLines("scroll");
       paintExtendedColumnLines("left");
@@ -1236,11 +1267,12 @@ function paintGrid(options) {
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       const isAxisSelected = selectedColumnKeys.has(columns[columnIndex].key);
+      const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
       if (isAxisSelected) {
         ctx.fillStyle = colors.axisSelectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
-      if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
+      if (isColumnDropTarget) {
         ctx.fillStyle = colors.columnDropTargetFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
@@ -1269,7 +1301,7 @@ function paintGrid(options) {
         ctx.beginPath();
         ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
-        ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.muted;
+        ctx.fillStyle = isColumnDropTarget ? colors.muted : isAxisSelected ? colors.axisSelectionText : colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
         ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
@@ -1428,6 +1460,11 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
+function resolveColumnDropHighlightRange(target, edge, cells) {
+  if (edge === "right") return { startIndex: target.startIndex, endIndex: target.endIndex };
+  const previous = cells.find((cell) => cell.endIndex === target.startIndex - 1 && cell.level === target.level && cell.parentKey === target.parentKey);
+  return previous ? { startIndex: previous.startIndex, endIndex: previous.endIndex } : { startIndex: target.startIndex, endIndex: target.endIndex };
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -2307,7 +2344,7 @@ function TableInner({
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
-      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#eeeeee"),
+      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#e2edf9"),
       stripe: stripedColor ?? readThemeColor(themeStyles, "--rvg-color-stripe", "#fafbfc")
     };
     const scroll = scrollRef.current;
@@ -3585,6 +3622,8 @@ function TableInner({
     columnDragRef.current = null;
     setResizeGuideX(null);
     setResizeGuideTop(0);
+    document.documentElement.classList.remove("rvg-is-dragging");
+    event.currentTarget.style.cursor = "default";
   }, []);
   const clearColumnOrderPointerDrag = (0, import_react5.useCallback)((canvas) => {
     columnOrderDragRef.current = null;
@@ -3666,7 +3705,11 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    setColumnDropTarget({ startIndex: targetCell.startIndex, endIndex: targetCell.endIndex });
+    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, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
@@ -3811,6 +3854,34 @@ function TableInner({
     const textTop = rowTop + 8;
     return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
   }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
+  const locateCustomHeaderTooltip = (0, import_react5.useCallback)((clientX, clientY, columnIndex) => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    if (!root || !canvas || columnIndex < 0) return null;
+    const canvasRect = canvas.getBoundingClientRect();
+    const targets = root.querySelectorAll(".rvg-header-title [data-rvg-tooltip]");
+    for (const target of targets) {
+      const rect = target.getBoundingClientRect();
+      if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) continue;
+      const label = target.dataset.rvgTooltip?.trim();
+      if (!label) return false;
+      const visibleText = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+      const candidates = [target, ...target.querySelectorAll("*")];
+      const truncated = candidates.some((candidate) => candidate.scrollWidth > candidate.clientWidth + 1 || candidate.scrollHeight > candidate.clientHeight + 1);
+      if (!truncated && label.replace(/\s+/g, " ").trim() === visibleText) return false;
+      const rawLeft = rect.left - canvasRect.left;
+      return {
+        key: `content:${columnIndex}:${label}:${Math.round(rawLeft)}:${Math.round(rect.top - canvasRect.top)}`,
+        columnIndex,
+        action: "content",
+        left: Math.max(8, Math.min(rawLeft, Math.max(8, viewport.width - 328))),
+        top: rect.bottom - canvasRect.top + 4,
+        label,
+        placement: "below"
+      };
+    }
+    return null;
+  }, [viewport.width]);
   const headerTooltip = (() => {
     if (!visibleHeaderTooltip) return null;
     return visibleHeaderTooltip;
@@ -4136,23 +4207,26 @@ function TableInner({
     if (column.renderHeader) {
       const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
       const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
+      const isHeaderHovered = hoveredHeaderColumnIndex === columnIndex;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: `rvg-header-title is-custom${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
+          className: `rvg-header-title is-custom${isHeaderHovered ? " is-header-hovered" : ""}${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
           "data-level": headerDepth - 1,
           "data-measure-key": column.key,
           style: {
             left,
             top: leafTop,
-            width: Math.max(0, metrics[columnIndex].width - actionWidth),
+            width: metrics[columnIndex].width,
             height: headerLeafHeight,
+            "--rvg-header-action-width": `${actionWidth}px`,
             justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
             textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
+              style: { width: "100%" },
               ref: (node) => {
                 if (node) {
                   customHeaderContentRefs.current.set(column.key, node);
@@ -4519,16 +4593,19 @@ function TableInner({
             const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
             const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
             const hoveredDragColumnIndex = hoveredHeaderCell?.startIndex ?? columnIndex;
-            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
-            const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
-            const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
+            const customHeaderTooltipMatch = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
+            const hoveredContentTooltip = customHeaderTooltipMatch || null;
+            const hoveredCustomContent = customHeaderTooltipMatch !== null;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredCustomContent && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
+            const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredContentTooltip ? { columnIndex, action: "content" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
+            const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredContentTooltip ? hoveredContentTooltip : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
             const previousHover = hoveredHeaderActionRef.current;
             if (previousHover?.columnIndex !== nextHover?.columnIndex || previousHover?.action !== nextHover?.action) {
               hoveredHeaderActionRef.current = nextHover;
               setHoveredHeaderAction(nextHover);
-              showHeaderTooltipAfterDelay(nextTooltip);
               scheduleDraw();
             }
+            showHeaderTooltipAfterDelay(nextTooltip);
             if (inHeader) {
               if (hoveredRowIndexRef.current !== null) {
                 hoveredRowIndexRef.current = null;
@@ -4580,12 +4657,12 @@ function TableInner({
                     if (!isInsideText) {
                       showCellTooltipAfterDelay(null);
                     } else {
-                      const placement = textRight + 330 > viewport.width ? "left" : "right";
+                      const placement = cellTop + rowHeight + 36 > renderHeight ? "above" : "below";
                       const nextTooltip2 = {
                         rowIndex: cell.rowIndex,
                         columnIndex: cell.columnIndex,
-                        left: placement === "right" ? textRight + 16 : Math.max(8, textLeft - 16),
-                        top: cellTop + rowHeight / 2,
+                        left: Math.max(8, Math.min(textLeft, Math.max(8, viewport.width - 328))),
+                        top: placement === "below" ? cellTop + rowHeight + 4 : cellTop - 4,
                         label,
                         placement
                       };
@@ -4614,6 +4691,8 @@ function TableInner({
             }
           },
           onPointerDown: (event) => {
+            handleColumnPointerDown(event);
+            if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
             const columnIndex = locateColumn(event.clientX);
             const rowDragHandle = rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(event.clientY) >= 0;
@@ -4622,8 +4701,7 @@ function TableInner({
               document.documentElement.classList.add("rvg-is-dragging");
               event.currentTarget.style.cursor = "move";
             }
-            handleColumnPointerDown(event);
-            if (!columnDragRef.current) handleColumnOrderPointerDown(event);
+            handleColumnOrderPointerDown(event);
             beginRangeDrag(event);
           },
           onPointerMove: (event) => {
@@ -4681,6 +4759,12 @@ function TableInner({
             }
             const cell = locateCell(event.clientX, event.clientY);
             if (!cell) {
+              const localX = event.clientX - rect.left;
+              const trailingRowIndex = trailingColumnBorderLeft !== null && localX > trailingColumnBorderLeft ? locateRow(event.clientY) : -1;
+              if (trailingRowIndex >= 0 && rowSelection) {
+                selectRow(trailingRowIndex, event);
+                return;
+              }
               clickedCellRef.current = null;
               setSelectionRange(null);
               setSelection(null);

package/dist/index.css

@@ -17,7 +17,7 @@
   --rvg-color-selection-fill: #edf4ff;
   --rvg-color-axis-selection-fill: #e8f2ff;
   --rvg-color-axis-selection-text: var(--rvg-color-text);
-  --rvg-color-column-drop-target-fill: #eeeeee;
+  --rvg-color-column-drop-target-fill: #e2edf9;
   --rvg-color-range-fill: #e8f1ff;
   --rvg-color-row-hover-fill: #f6f9fc;
   --rvg-color-hover: #f1f4f8;
@@ -903,7 +903,7 @@
 .rvg-header-tooltip,
 .rvg-cell-tooltip {
   position: absolute;
-  z-index: 5;
+  z-index: 8;
   max-width: 320px;
   padding: 4px 7px;
   transform: translateY(-50%);
@@ -947,6 +947,33 @@
   right: -4px;
   border-left: 5px solid var(--rvg-color-tooltip-bg);
 }
+.rvg-header-tooltip.is-below,
+.rvg-cell-tooltip.is-below {
+  transform: none;
+}
+.rvg-header-tooltip.is-below::after,
+.rvg-cell-tooltip.is-below::after {
+  top: -4px;
+  left: 10px;
+  transform: none;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid var(--rvg-color-tooltip-bg);
+  border-left: 5px solid transparent;
+  border-top: 0;
+}
+.rvg-cell-tooltip.is-above {
+  transform: translateY(-100%);
+}
+.rvg-cell-tooltip.is-above::after {
+  top: auto;
+  bottom: -4px;
+  left: 10px;
+  transform: none;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--rvg-color-tooltip-bg);
+  border-bottom: 0;
+  border-left: 5px solid transparent;
+}
 .rvg-cell-tooltip.is-annotation::after {
   display: none;
 }
@@ -985,6 +1012,9 @@
   pointer-events: none;
   background: var(--rvg-color-primary);
 }
+.rvg-column-guide.is-resizing {
+  z-index: 7;
+}
 .rvg-row-guide {
   position: absolute;
   z-index: 3;

package/dist/index.js

@@ -852,7 +852,7 @@ var COLORS = {
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
-  columnDropTargetFill: "#eeeeee",
+  columnDropTargetFill: "#e2edf9",
   stripe: "#fafbfc"
 };
 function ellipsizeText(context, text, maxWidth) {
@@ -929,13 +929,24 @@ function paintGrid(options) {
     return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
   };
   const rowBelowDragGap = rowDragPreview ? rowDragPreview.sourceIndex <= rowDragPreview.targetIndex ? rowDragPreview.targetIndex + 1 : rowDragPreview.targetIndex : -1;
-  if (striped && trailingBlankStart !== null) {
+  if (trailingBlankStart !== null) {
     const rowStart = Math.max(0, range.rowStart);
     for (let rowIndex = rowStart; rowIndex < range.rowEnd; rowIndex += 1) {
-      if (rowIndex % 2 === 0 || rowDragPreview?.sourceIndex === rowIndex) continue;
+      if (rowDragPreview?.sourceIndex === rowIndex) continue;
+      const row = rows[rowIndex];
+      const rowKey = getRowKey(row, rowIndex);
+      const trailingRowStyle = options.rowStyle?.(row, rowIndex);
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
-      ctx.fillStyle = colors.stripe;
-      ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      const paintTrailingLayer = (fill) => {
+        if (!fill) return;
+        ctx.fillStyle = fill;
+        ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      };
+      if (striped && rowIndex % 2 === 1) paintTrailingLayer(colors.stripe);
+      paintTrailingLayer(trailingRowStyle?.backgroundColor);
+      if (selectedRowKeys.has(rowKey)) paintTrailingLayer(colors.axisSelectionFill);
+      if (hoveredRowIndex === rowIndex) paintTrailingLayer(colors.rowHoverFill);
+      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) paintTrailingLayer(colors.insertedFill);
     }
   }
   const paintBodyColumns = (layer) => {
@@ -960,6 +971,7 @@ function paintGrid(options) {
         const cellWidth = getCellWidth(columnIndex, colSpan);
         const cellHeight = rowHeight * rowSpan;
         const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
+        const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
         const rangeRowStart = selectionRange ? Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeRowEnd = selectionRange ? Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeColumnStart = selectionRange ? Math.min(selectionRange.anchor.columnIndex, selectionRange.focus.columnIndex) : -1;
@@ -981,10 +993,6 @@ function paintGrid(options) {
           ctx.fillStyle = colors.rowHoverFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
-          ctx.fillStyle = colors.columnDropTargetFill;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
-        }
         if (highlightInsertedRows && insertedRowKeys.has(rowKey)) {
           ctx.fillStyle = colors.insertedFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1009,6 +1017,10 @@ function paintGrid(options) {
           ctx.fillStyle = annotation.color;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (isColumnDropTarget) {
+          ctx.fillStyle = colors.columnDropTargetFill;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
@@ -1018,14 +1030,14 @@ function paintGrid(options) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
         if (rowSpan > 1) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           for (let offset = 1; offset < rowSpan; offset += 1) {
             ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
           }
         }
         if (colSpan > 1 && !verticalBorderless) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1122,11 +1134,11 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            ctx.fillStyle = isColumnDropTarget ? colors.text : isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
-            ctx.fillText(label, textX, y + cellHeight / 2 + cellBaselineOffset);
+            ctx.fillText(ellipsizeText(ctx, label, Math.max(0, cellWidth - padding * 2)), textX, y + cellHeight / 2 + cellBaselineOffset);
             ctx.restore();
           }
         }
@@ -1185,6 +1197,25 @@ function paintGrid(options) {
     paintExtendedColumnSelection("scroll");
     paintExtendedColumnSelection("left");
     paintExtendedColumnSelection("right");
+    const paintExtendedColumnDropTarget = (layer) => {
+      if (!columnDropTarget) return;
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.columnDropTargetFill;
+      for (let columnIndex = columnDropTarget.startIndex; columnIndex <= columnDropTarget.endIndex; columnIndex += 1) {
+        if (layer === "scroll" ? columns[columnIndex]?.fixed !== void 0 : columns[columnIndex]?.fixed !== layer) continue;
+        if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
+        ctx.fillRect(getColumnX(columnIndex), extensionTop, metrics[columnIndex].width, extensionHeight);
+      }
+      ctx.restore();
+    };
+    paintExtendedColumnDropTarget("scroll");
+    paintExtendedColumnDropTarget("left");
+    paintExtendedColumnDropTarget("right");
     if (!verticalBorderless) {
       paintExtendedColumnLines("scroll");
       paintExtendedColumnLines("left");
@@ -1206,11 +1237,12 @@ function paintGrid(options) {
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       const isAxisSelected = selectedColumnKeys.has(columns[columnIndex].key);
+      const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
       if (isAxisSelected) {
         ctx.fillStyle = colors.axisSelectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
-      if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
+      if (isColumnDropTarget) {
         ctx.fillStyle = colors.columnDropTargetFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
@@ -1239,7 +1271,7 @@ function paintGrid(options) {
         ctx.beginPath();
         ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
-        ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.muted;
+        ctx.fillStyle = isColumnDropTarget ? colors.muted : isAxisSelected ? colors.axisSelectionText : colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
         ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
@@ -1398,6 +1430,11 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
+function resolveColumnDropHighlightRange(target, edge, cells) {
+  if (edge === "right") return { startIndex: target.startIndex, endIndex: target.endIndex };
+  const previous = cells.find((cell) => cell.endIndex === target.startIndex - 1 && cell.level === target.level && cell.parentKey === target.parentKey);
+  return previous ? { startIndex: previous.startIndex, endIndex: previous.endIndex } : { startIndex: target.startIndex, endIndex: target.endIndex };
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -2277,7 +2314,7 @@ function TableInner({
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
-      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#eeeeee"),
+      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#e2edf9"),
       stripe: stripedColor ?? readThemeColor(themeStyles, "--rvg-color-stripe", "#fafbfc")
     };
     const scroll = scrollRef.current;
@@ -3555,6 +3592,8 @@ function TableInner({
     columnDragRef.current = null;
     setResizeGuideX(null);
     setResizeGuideTop(0);
+    document.documentElement.classList.remove("rvg-is-dragging");
+    event.currentTarget.style.cursor = "default";
   }, []);
   const clearColumnOrderPointerDrag = useCallback2((canvas) => {
     columnOrderDragRef.current = null;
@@ -3636,7 +3675,11 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    setColumnDropTarget({ startIndex: targetCell.startIndex, endIndex: targetCell.endIndex });
+    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, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
@@ -3781,6 +3824,34 @@ function TableInner({
     const textTop = rowTop + 8;
     return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
   }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
+  const locateCustomHeaderTooltip = useCallback2((clientX, clientY, columnIndex) => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    if (!root || !canvas || columnIndex < 0) return null;
+    const canvasRect = canvas.getBoundingClientRect();
+    const targets = root.querySelectorAll(".rvg-header-title [data-rvg-tooltip]");
+    for (const target of targets) {
+      const rect = target.getBoundingClientRect();
+      if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) continue;
+      const label = target.dataset.rvgTooltip?.trim();
+      if (!label) return false;
+      const visibleText = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+      const candidates = [target, ...target.querySelectorAll("*")];
+      const truncated = candidates.some((candidate) => candidate.scrollWidth > candidate.clientWidth + 1 || candidate.scrollHeight > candidate.clientHeight + 1);
+      if (!truncated && label.replace(/\s+/g, " ").trim() === visibleText) return false;
+      const rawLeft = rect.left - canvasRect.left;
+      return {
+        key: `content:${columnIndex}:${label}:${Math.round(rawLeft)}:${Math.round(rect.top - canvasRect.top)}`,
+        columnIndex,
+        action: "content",
+        left: Math.max(8, Math.min(rawLeft, Math.max(8, viewport.width - 328))),
+        top: rect.bottom - canvasRect.top + 4,
+        label,
+        placement: "below"
+      };
+    }
+    return null;
+  }, [viewport.width]);
   const headerTooltip = (() => {
     if (!visibleHeaderTooltip) return null;
     return visibleHeaderTooltip;
@@ -4106,23 +4177,26 @@ function TableInner({
     if (column.renderHeader) {
       const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
       const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
+      const isHeaderHovered = hoveredHeaderColumnIndex === columnIndex;
       return /* @__PURE__ */ jsx7(
         "div",
         {
-          className: `rvg-header-title is-custom${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
+          className: `rvg-header-title is-custom${isHeaderHovered ? " is-header-hovered" : ""}${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
           "data-level": headerDepth - 1,
           "data-measure-key": column.key,
           style: {
             left,
             top: leafTop,
-            width: Math.max(0, metrics[columnIndex].width - actionWidth),
+            width: metrics[columnIndex].width,
             height: headerLeafHeight,
+            "--rvg-header-action-width": `${actionWidth}px`,
             justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
             textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
           },
           children: /* @__PURE__ */ jsx7(
             "span",
             {
+              style: { width: "100%" },
               ref: (node) => {
                 if (node) {
                   customHeaderContentRefs.current.set(column.key, node);
@@ -4489,16 +4563,19 @@ function TableInner({
             const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
             const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
             const hoveredDragColumnIndex = hoveredHeaderCell?.startIndex ?? columnIndex;
-            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
-            const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
-            const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
+            const customHeaderTooltipMatch = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
+            const hoveredContentTooltip = customHeaderTooltipMatch || null;
+            const hoveredCustomContent = customHeaderTooltipMatch !== null;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredCustomContent && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
+            const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredContentTooltip ? { columnIndex, action: "content" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
+            const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredContentTooltip ? hoveredContentTooltip : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
             const previousHover = hoveredHeaderActionRef.current;
             if (previousHover?.columnIndex !== nextHover?.columnIndex || previousHover?.action !== nextHover?.action) {
               hoveredHeaderActionRef.current = nextHover;
               setHoveredHeaderAction(nextHover);
-              showHeaderTooltipAfterDelay(nextTooltip);
               scheduleDraw();
             }
+            showHeaderTooltipAfterDelay(nextTooltip);
             if (inHeader) {
               if (hoveredRowIndexRef.current !== null) {
                 hoveredRowIndexRef.current = null;
@@ -4550,12 +4627,12 @@ function TableInner({
                     if (!isInsideText) {
                       showCellTooltipAfterDelay(null);
                     } else {
-                      const placement = textRight + 330 > viewport.width ? "left" : "right";
+                      const placement = cellTop + rowHeight + 36 > renderHeight ? "above" : "below";
                       const nextTooltip2 = {
                         rowIndex: cell.rowIndex,
                         columnIndex: cell.columnIndex,
-                        left: placement === "right" ? textRight + 16 : Math.max(8, textLeft - 16),
-                        top: cellTop + rowHeight / 2,
+                        left: Math.max(8, Math.min(textLeft, Math.max(8, viewport.width - 328))),
+                        top: placement === "below" ? cellTop + rowHeight + 4 : cellTop - 4,
                         label,
                         placement
                       };
@@ -4584,6 +4661,8 @@ function TableInner({
             }
           },
           onPointerDown: (event) => {
+            handleColumnPointerDown(event);
+            if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
             const columnIndex = locateColumn(event.clientX);
             const rowDragHandle = rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(event.clientY) >= 0;
@@ -4592,8 +4671,7 @@ function TableInner({
               document.documentElement.classList.add("rvg-is-dragging");
               event.currentTarget.style.cursor = "move";
             }
-            handleColumnPointerDown(event);
-            if (!columnDragRef.current) handleColumnOrderPointerDown(event);
+            handleColumnOrderPointerDown(event);
             beginRangeDrag(event);
           },
           onPointerMove: (event) => {
@@ -4651,6 +4729,12 @@ function TableInner({
             }
             const cell = locateCell(event.clientX, event.clientY);
             if (!cell) {
+              const localX = event.clientX - rect.left;
+              const trailingRowIndex = trailingColumnBorderLeft !== null && localX > trailingColumnBorderLeft ? locateRow(event.clientY) : -1;
+              if (trailingRowIndex >= 0 && rowSelection) {
+                selectRow(trailingRowIndex, event);
+                return;
+              }
               clickedCellRef.current = null;
               setSelectionRange(null);
               setSelection(null);

package/package.json

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