@lensui/lens-table 0.1.23 → 0.1.25

package/dist/index.cjs

@@ -959,12 +959,21 @@ 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);
+      let fill = striped && rowIndex % 2 === 1 ? colors.stripe : null;
+      if (trailingRowStyle?.backgroundColor) fill = trailingRowStyle.backgroundColor;
+      if (selectedRowKeys.has(rowKey)) fill = colors.axisSelectionFill;
+      if (hoveredRowIndex === rowIndex) fill = colors.rowHoverFill;
+      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) fill = colors.insertedFill;
+      if (!fill) continue;
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
-      ctx.fillStyle = colors.stripe;
+      ctx.fillStyle = fill;
       ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
     }
   }
@@ -1156,7 +1165,7 @@ function paintGrid(options) {
             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();
           }
         }
@@ -2862,6 +2871,10 @@ function TableInner({
     if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
     return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
   }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
+  const trailingColumnBorderLeft = (0, import_react5.useMemo)(() => {
+    const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
+    return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
+  }, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
   const getHeaderLevelAtY = (0, import_react5.useCallback)((localY, headerY) => {
     const y = localY - headerY;
     for (let level = 0; level < headerRowHeights.length; level += 1) {
@@ -3581,6 +3594,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;
@@ -3807,6 +3822,30 @@ 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 null;
+      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;
@@ -4132,17 +4171,19 @@ 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"
           },
@@ -4515,16 +4556,17 @@ 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 hoveredContentTooltip = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredContentTooltip && 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;
@@ -4576,12 +4618,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
                       };
@@ -4610,6 +4652,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;
@@ -4618,8 +4662,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) => {
@@ -4677,6 +4720,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);
@@ -4794,6 +4843,13 @@ function TableInner({
         columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
       ] })
     ] }),
+    hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: "rvg-trailing-column-border",
+        style: { left: trailingColumnBorderLeft, height: renderHeight }
+      }
+    ),
     headerTooltip && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `rvg-header-tooltip is-${headerTooltip.placement}`, role: "tooltip", style: { left: headerTooltip.left, top: headerTooltip.top }, children: headerTooltip.label }),
     hoveredCellTooltip && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",

package/dist/index.css

@@ -808,6 +808,14 @@
   background: var(--rvg-color-grid);
   pointer-events: none;
 }
+.rvg-trailing-column-border {
+  position: absolute;
+  z-index: 6;
+  top: 0;
+  width: 1px;
+  background: var(--rvg-color-grid);
+  pointer-events: none;
+}
 .rvg-header-icons {
   position: absolute;
   z-index: 2;
@@ -895,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%);
@@ -939,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;
 }
@@ -977,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

@@ -929,12 +929,21 @@ 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);
+      let fill = striped && rowIndex % 2 === 1 ? colors.stripe : null;
+      if (trailingRowStyle?.backgroundColor) fill = trailingRowStyle.backgroundColor;
+      if (selectedRowKeys.has(rowKey)) fill = colors.axisSelectionFill;
+      if (hoveredRowIndex === rowIndex) fill = colors.rowHoverFill;
+      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) fill = colors.insertedFill;
+      if (!fill) continue;
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
-      ctx.fillStyle = colors.stripe;
+      ctx.fillStyle = fill;
       ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
     }
   }
@@ -1126,7 +1135,7 @@ function paintGrid(options) {
             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();
           }
         }
@@ -2832,6 +2841,10 @@ function TableInner({
     if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
     return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
   }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
+  const trailingColumnBorderLeft = useMemo(() => {
+    const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
+    return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
+  }, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
   const getHeaderLevelAtY = useCallback2((localY, headerY) => {
     const y = localY - headerY;
     for (let level = 0; level < headerRowHeights.length; level += 1) {
@@ -3551,6 +3564,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;
@@ -3777,6 +3792,30 @@ 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 null;
+      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;
@@ -4102,17 +4141,19 @@ 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"
           },
@@ -4485,16 +4526,17 @@ 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 hoveredContentTooltip = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredContentTooltip && 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;
@@ -4546,12 +4588,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
                       };
@@ -4580,6 +4622,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;
@@ -4588,8 +4632,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) => {
@@ -4647,6 +4690,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);
@@ -4764,6 +4813,13 @@ function TableInner({
         columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ jsx7("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
       ] })
     ] }),
+    hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "rvg-trailing-column-border",
+        style: { left: trailingColumnBorderLeft, height: renderHeight }
+      }
+    ),
     headerTooltip && /* @__PURE__ */ jsx7("div", { className: `rvg-header-tooltip is-${headerTooltip.placement}`, role: "tooltip", style: { left: headerTooltip.left, top: headerTooltip.top }, children: headerTooltip.label }),
     hoveredCellTooltip && /* @__PURE__ */ jsx7(
       "div",

package/package.json

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