@lensui/lens-table 0.1.24 → 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();
           }
         }
@@ -3585,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;
@@ -3811,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;
@@ -4136,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"
           },
@@ -4519,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;
@@ -4580,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
                       };
@@ -4614,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;
@@ -4622,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) => {
@@ -4681,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);

package/dist/index.css

@@ -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

@@ -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();
           }
         }
@@ -3555,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;
@@ -3781,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;
@@ -4106,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"
           },
@@ -4489,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;
@@ -4550,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
                       };
@@ -4584,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;
@@ -4592,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) => {
@@ -4651,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);

package/package.json

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