@lensui/lens-table 0.1.15 → 0.1.17

package/README.md

@@ -111,7 +111,7 @@ export function Example() {
 | `defaultSelectedCell`        | `GridSelectionTarget \| null`                                                       | `null`            | 默认选中单元格。传 `columnKey`，行可使用 `rowKey` 或 `rowIndex` 定位。                                                                  |
 | `onSelectedCellChange`       | `(selection) => void`                                                              | -                 | 单元格选中变化回调，`selection.value` 为当前单元格的原始值。                                                                            |
 | `rangeSelection`             | `boolean`                                                                          | `false`         | 是否允许鼠标拖动选择多个单元格。开启后支持范围复制、范围右键菜单和右下角拖拽扩展范围。                                                  |
-| `rowSelection`               | `boolean \| RowSelectionConfig`                                                     | `false`         | 开启行选择。支持 `mode`、`showCheckbox`、`indicator: 'checkbox' \| 'arrow'` 和 `columnWidth`；箭头样式未选中时为空白。默认自动生成左侧选择列。 |
+| `rowSelection`               | `boolean \| RowSelectionConfig`                                                     | `false`         | 开启行选择。支持 `mode`、`showCheckbox`、`indicator: 'checkbox' \| 'arrow' \| 'none'` 和 `columnWidth`；`none` 保留点击区域但不绘制标记。默认自动生成左侧选择列。 |
 | `selectedRowKeys`            | `GridKey[]`                                                                        | 非受控            | 受控行选择 key 列表。                                                                                                                   |
 | `defaultSelectedRowKeys`     | `GridKey[]`                                                                        | `[]`            | 非受控模式下默认选中的行 key。                                                                                                          |
 | `onSelectedRowChange`        | `(keys, rows, indices) => void`                                                    | -                 | 行选择变化回调。                                                                                                                        |
@@ -600,6 +600,7 @@ const columns: GridColumn<Row>[] = [
 | `--rvg-color-primary`             | 选中、按钮、焦点等强调色。                                                         |
 | `--rvg-color-selection-fill`      | 单元格选中背景。                                                                   |
 | `--rvg-color-axis-selection-fill` | 行/列选中背景。                                                                    |
+| `--rvg-color-axis-selection-text` | 行/列选中后的正文和选择标记颜色，默认继承主文本色。                                |
 | `--rvg-color-edited-fill`         | 已编辑单元格背景。                                                                 |
 | `--rvg-color-stripe`              | `striped={true}` 时的斑马纹背景。也可以直接通过 `striped="#f6faff"` 单独指定。 |
 

package/dist/index.cjs

@@ -920,6 +920,7 @@ var COLORS = {
   selection: "#1677ff",
   selectionFill: "#edf4ff",
   axisSelectionFill: "#e8f2ff",
+  axisSelectionText: "#202124",
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
@@ -1018,6 +1019,7 @@ function paintGrid(options) {
         const colSpan = span?.colSpan ?? 1;
         const cellWidth = getCellWidth(columnIndex, colSpan);
         const cellHeight = rowHeight * rowSpan;
+        const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
         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;
@@ -1027,7 +1029,7 @@ function paintGrid(options) {
           ctx.fillStyle = striped && rowIndex % 2 === 1 ? colors.stripe : colors.background;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        if (selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key)) {
+        if (isAxisSelected) {
           ctx.fillStyle = colors.axisSelectionFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
@@ -1072,14 +1074,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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          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 ?? (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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          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 ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1113,7 +1115,8 @@ function paintGrid(options) {
           const checked = selectedRowKeys.has(rowKey);
           ctx.save();
           ctx.lineWidth = 1;
-          if (column.rowSelectionIndicator === "arrow") {
+          if (column.rowSelectionIndicator === "none") {
+          } else if (column.rowSelectionIndicator === "arrow") {
             if (checked) {
               ctx.beginPath();
               ctx.moveTo(iconLeft + 3.5, iconTop + 8);
@@ -1121,7 +1124,7 @@ function paintGrid(options) {
               ctx.moveTo(iconLeft + 8.5, iconTop + 4);
               ctx.lineTo(iconLeft + 12.5, iconTop + 8);
               ctx.lineTo(iconLeft + 8.5, iconTop + 12);
-              ctx.strokeStyle = colors.selection;
+              ctx.strokeStyle = colors.axisSelectionText;
               ctx.lineWidth = 1.75;
               ctx.lineCap = "round";
               ctx.lineJoin = "round";
@@ -1175,7 +1178,7 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = column.rowNumber && selectedRowKeys.has(rowKey) ? colors.selection : cellStyle?.color ?? colors.text;
+            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1199,9 +1202,25 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
-  if (extendVerticalGridLines && !verticalBorderless) {
+  if (extendVerticalGridLines) {
     const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
     const extensionHeight = Math.max(0, height - extensionTop);
+    const paintExtendedColumnSelection = (layer) => {
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.axisSelectionFill;
+      for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+        if (!selectedColumnKeys.has(columns[columnIndex].key)) continue;
+        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();
+    };
     const paintExtendedColumnLines = (layer) => {
       ctx.save();
       if (layer === "scroll") {
@@ -1219,9 +1238,14 @@ function paintGrid(options) {
       }
       ctx.restore();
     };
-    paintExtendedColumnLines("scroll");
-    paintExtendedColumnLines("left");
-    paintExtendedColumnLines("right");
+    paintExtendedColumnSelection("scroll");
+    paintExtendedColumnSelection("left");
+    paintExtendedColumnSelection("right");
+    if (!verticalBorderless) {
+      paintExtendedColumnLines("scroll");
+      paintExtendedColumnLines("left");
+      paintExtendedColumnLines("right");
+    }
   }
   const headerY = fixedHeader ? 0 : -scrollTop;
   ctx.fillStyle = colors.header;
@@ -1237,8 +1261,9 @@ function paintGrid(options) {
         ctx.fillStyle = colors.header;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
-      if (selectedColumnKeys.has(columns[columnIndex].key)) {
-        ctx.fillStyle = colors.selectionFill;
+      const isAxisSelected = selectedColumnKeys.has(columns[columnIndex].key);
+      if (isAxisSelected) {
+        ctx.fillStyle = colors.axisSelectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
@@ -1270,7 +1295,7 @@ function paintGrid(options) {
         ctx.beginPath();
         ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
-        ctx.fillStyle = colors.muted;
+        ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
         ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
@@ -2276,6 +2301,7 @@ function TableInner({
       selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
       selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
       axisSelectionFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
+      axisSelectionText: readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
       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"),
@@ -3375,6 +3401,9 @@ function TableInner({
   }, [setSelection]);
   const selectRow = (0, import_react5.useCallback)((rowIndex, event, forceToggle = false) => {
     if (!rowSelection) return;
+    clickedCellRef.current = null;
+    setSelectionRange(null);
+    setSelection(null);
     const mode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
     const key = getRowKey(rows[rowIndex], rowIndex);
     let next;
@@ -3389,9 +3418,12 @@ function TableInner({
     }
     rowAnchorRef.current = rowIndex;
     setRowKeys(next);
-  }, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys]);
+  }, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys, setSelection]);
   const selectColumn = (0, import_react5.useCallback)((columnIndex, event) => {
     if (!columnSelection || columnIndex < 0) return;
+    clickedCellRef.current = null;
+    setSelectionRange(null);
+    setSelection(null);
     const mode = typeof columnSelection === "object" ? columnSelection.mode ?? "multiple" : "multiple";
     const key = columns[columnIndex].key;
     let next;
@@ -3399,23 +3431,26 @@ function TableInner({
       const start = Math.min(columnAnchorRef.current, columnIndex);
       const end = Math.max(columnAnchorRef.current, columnIndex);
       next = columns.slice(start, end + 1).map((column) => column.key);
-    } else if (mode === "multiple") {
+    } else if (mode === "multiple" && (event.ctrlKey || event.metaKey)) {
       next = selectedColumnKeySet.has(key) ? columnKeys.filter((item) => item !== key) : [...columnKeys, key];
     } else {
       next = columnKeys.length === 1 && selectedColumnKeySet.has(key) ? [] : [key];
     }
     columnAnchorRef.current = columnIndex;
     setColumnKeys(next);
-  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys]);
+  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
   const toggleColumnFromMenu = (0, import_react5.useCallback)((columnIndex) => {
     if (!columnSelection || columnIndex < 0) return;
+    clickedCellRef.current = null;
+    setSelectionRange(null);
+    setSelection(null);
     const key = columns[columnIndex].key;
     const mode = typeof columnSelection === "object" ? columnSelection.mode ?? "multiple" : "multiple";
     const selected = selectedColumnKeySet.has(key);
     const next = selected ? columnKeys.filter((value) => value !== key) : mode === "multiple" ? [...columnKeys, key] : [key];
     columnAnchorRef.current = columnIndex;
     setColumnKeys(next);
-  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys]);
+  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
   const revealCell = (0, import_react5.useCallback)((cell) => {
     const scroller = scrollerRef.current;
     const metric = metrics[cell.columnIndex];
@@ -3767,6 +3802,8 @@ function TableInner({
   const renderHeaderIcons = (columnIndex, left) => {
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
+    const isAxisSelected = selectedColumnKeySet.has(column.key);
+    const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
     const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
@@ -3774,21 +3811,21 @@ function TableInner({
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
       right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -4149,7 +4186,7 @@ function TableInner({
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: "rvg-cell-render",
+          className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
           style: {
             left,
             top,
@@ -4168,6 +4205,7 @@ function TableInner({
   };
   const renderHeaderTitle = (columnIndex, left) => {
     const column = columns[columnIndex];
+    const isAxisSelected = selectedColumnKeySet.has(column.key);
     const isDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
     const currentScrollTop = scrollRef.current.top;
     const headerTop = fixedHeader ? 0 : -currentScrollTop;
@@ -4184,7 +4222,7 @@ function TableInner({
       );
     }
     if (column.rowSelection) {
-      if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow") return null;
+      if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow" || column.rowSelectionIndicator === "none") return null;
       const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
       const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4203,7 +4241,7 @@ function TableInner({
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: `rvg-header-title is-custom${isDropTarget ? " is-drop-target" : ""}`,
+          className: `rvg-header-title is-custom${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
           "data-level": headerDepth - 1,
           "data-measure-key": column.key,
           style: {
@@ -4246,10 +4284,11 @@ function TableInner({
     const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex), headerActionSlotWidth) : null;
     const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
     const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
+    const isAxisSelected = cell.leaf && selectedColumnKeySet.has(column.key);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
-        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
+        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isAxisSelected ? " is-axis-selected" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
         "data-level": cell.level,
         "data-measure-key": `group:${cell.key}:${cell.level}`,
         style: {
@@ -4513,12 +4552,16 @@ function TableInner({
       getSelectedRows: () => rows.filter((row, index) => selectedRowKeySet.has(getRowKey(row, index))),
       setSelectedRowKeys: (keys) => {
         if (!rowSelection) return;
+        setSelectionRange(null);
+        setSelection(null);
         const next = [...new Set(keys)];
         setRowKeys(rowSelectionMode === "single" ? next.slice(0, 1) : next);
       },
       getSelectedColumnKeys: () => [...columnKeys],
       setSelectedColumnKeys: (keys) => {
         if (!columnSelection) return;
+        setSelectionRange(null);
+        setSelection(null);
         const next = [...new Set(keys)].filter((key) => columns.some((column) => column.key === key && !column.rowNumber && !column.rowSelection && !column.rowDragHandle));
         setColumnKeys(typeof columnSelection === "object" && columnSelection.mode === "single" ? next.slice(0, 1) : next);
       },
@@ -4721,7 +4764,9 @@ function TableInner({
               }
               if (locateHeaderDragHandle(event.clientX, columnIndex)) return;
               if (columnIndex >= 0 && columns[columnIndex].rowSelection && rowSelection) {
-                if (columns[columnIndex].rowSelectionIndicator === "arrow") return;
+                if (columns[columnIndex].rowSelectionIndicator === "arrow" || columns[columnIndex].rowSelectionIndicator === "none") return;
+                setSelectionRange(null);
+                setSelection(null);
                 setRowKeys(rowKeys.length === rows.length ? [] : rows.map(getRowKey));
               } else if (columnIndex >= 0 && (columns[columnIndex].rowDragHandle || columns[columnIndex].rowNumber)) {
                 return;
@@ -4740,7 +4785,7 @@ function TableInner({
             const clickedRowSelector = Boolean(columns[cell.columnIndex].rowSelection);
             if (clickedRowSelector) {
               clickedCellRef.current = null;
-              selectRow(cell.rowIndex, event, columns[cell.columnIndex].rowSelectionIndicator !== "arrow");
+              selectRow(cell.rowIndex, event, !["arrow", "none"].includes(columns[cell.columnIndex].rowSelectionIndicator ?? "checkbox"));
               return;
             }
             if (event.detail > 1) return;
@@ -5039,6 +5084,8 @@ function TableInner({
         if (item === "select-row") {
           if (!rowSelection) return null;
           return renderContextMenuButton("cell-select-row", cellContext, selectedRowKeySet.has(cell.rowKey) ? labels.deselectRow : labels.selectRow, () => {
+            setSelectionRange(null);
+            setSelection(null);
             if (selectedRowKeySet.has(cell.rowKey)) setRowKeys(rowKeys.filter((key) => key !== cell.rowKey));
             else setRowKeys(rowSelectionMode === "single" ? [cell.rowKey] : [...rowKeys, cell.rowKey]);
           }, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuIcon, { type: "select-row" }) });

package/dist/index.css

@@ -16,6 +16,7 @@
   --rvg-color-primary-soft: #edf4ff;
   --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-range-fill: #e8f1ff;
   --rvg-color-row-hover-fill: #f6f9fc;
@@ -270,6 +271,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.rvg-cell-render.is-axis-selected {
+  color: var(--rvg-color-axis-selection-text);
+}
 .rvg-summary-row {
   position: absolute;
   z-index: 4;
@@ -769,6 +773,10 @@
 .rvg-header-title.is-drop-target {
   background: var(--rvg-color-column-drop-target-fill);
 }
+.rvg-header-title.is-axis-selected {
+  background: var(--rvg-color-axis-selection-fill);
+  color: var(--rvg-color-axis-selection-text);
+}
 .rvg-text-fixed-shadow {
   position: absolute;
   z-index: 4;
@@ -850,6 +858,11 @@
 .rvg-header-icon.is-hovered {
   color: var(--rvg-color-muted);
 }
+.rvg-header-icon.is-axis-selected,
+.rvg-header-icon.is-axis-selected.is-hovered,
+.rvg-header-icon.is-axis-selected.is-active {
+  color: var(--rvg-color-axis-selection-text);
+}
 .rvg-root.is-initial-loading .rvg-header-icon {
   color: #d6dbe0;
   animation: rvg-loading-icon-pulse 1.15s ease-in-out infinite alternate;

package/dist/index.d.cts

@@ -160,7 +160,7 @@ interface RowSelectionConfig extends AxisSelectionConfig {
     /** Show the selection column. Defaults to true; when false, click body cells to select rows. */
     showCheckbox?: boolean;
     /** Selection marker style. Arrow stays blank until selected. Defaults to checkbox. */
-    indicator?: 'checkbox' | 'arrow';
+    indicator?: 'checkbox' | 'arrow' | 'none';
     /** Width of the generated selection column. Defaults to 44. */
     columnWidth?: number;
 }

package/dist/index.d.ts

@@ -160,7 +160,7 @@ interface RowSelectionConfig extends AxisSelectionConfig {
     /** Show the selection column. Defaults to true; when false, click body cells to select rows. */
     showCheckbox?: boolean;
     /** Selection marker style. Arrow stays blank until selected. Defaults to checkbox. */
-    indicator?: 'checkbox' | 'arrow';
+    indicator?: 'checkbox' | 'arrow' | 'none';
     /** Width of the generated selection column. Defaults to 44. */
     columnWidth?: number;
 }

package/dist/index.js

@@ -890,6 +890,7 @@ var COLORS = {
   selection: "#1677ff",
   selectionFill: "#edf4ff",
   axisSelectionFill: "#e8f2ff",
+  axisSelectionText: "#202124",
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
@@ -988,6 +989,7 @@ function paintGrid(options) {
         const colSpan = span?.colSpan ?? 1;
         const cellWidth = getCellWidth(columnIndex, colSpan);
         const cellHeight = rowHeight * rowSpan;
+        const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
         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;
@@ -997,7 +999,7 @@ function paintGrid(options) {
           ctx.fillStyle = striped && rowIndex % 2 === 1 ? colors.stripe : colors.background;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        if (selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key)) {
+        if (isAxisSelected) {
           ctx.fillStyle = colors.axisSelectionFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
@@ -1042,14 +1044,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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          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 ?? (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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          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 ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1083,7 +1085,8 @@ function paintGrid(options) {
           const checked = selectedRowKeys.has(rowKey);
           ctx.save();
           ctx.lineWidth = 1;
-          if (column.rowSelectionIndicator === "arrow") {
+          if (column.rowSelectionIndicator === "none") {
+          } else if (column.rowSelectionIndicator === "arrow") {
             if (checked) {
               ctx.beginPath();
               ctx.moveTo(iconLeft + 3.5, iconTop + 8);
@@ -1091,7 +1094,7 @@ function paintGrid(options) {
               ctx.moveTo(iconLeft + 8.5, iconTop + 4);
               ctx.lineTo(iconLeft + 12.5, iconTop + 8);
               ctx.lineTo(iconLeft + 8.5, iconTop + 12);
-              ctx.strokeStyle = colors.selection;
+              ctx.strokeStyle = colors.axisSelectionText;
               ctx.lineWidth = 1.75;
               ctx.lineCap = "round";
               ctx.lineJoin = "round";
@@ -1145,7 +1148,7 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = column.rowNumber && selectedRowKeys.has(rowKey) ? colors.selection : cellStyle?.color ?? colors.text;
+            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1169,9 +1172,25 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
-  if (extendVerticalGridLines && !verticalBorderless) {
+  if (extendVerticalGridLines) {
     const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
     const extensionHeight = Math.max(0, height - extensionTop);
+    const paintExtendedColumnSelection = (layer) => {
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.axisSelectionFill;
+      for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+        if (!selectedColumnKeys.has(columns[columnIndex].key)) continue;
+        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();
+    };
     const paintExtendedColumnLines = (layer) => {
       ctx.save();
       if (layer === "scroll") {
@@ -1189,9 +1208,14 @@ function paintGrid(options) {
       }
       ctx.restore();
     };
-    paintExtendedColumnLines("scroll");
-    paintExtendedColumnLines("left");
-    paintExtendedColumnLines("right");
+    paintExtendedColumnSelection("scroll");
+    paintExtendedColumnSelection("left");
+    paintExtendedColumnSelection("right");
+    if (!verticalBorderless) {
+      paintExtendedColumnLines("scroll");
+      paintExtendedColumnLines("left");
+      paintExtendedColumnLines("right");
+    }
   }
   const headerY = fixedHeader ? 0 : -scrollTop;
   ctx.fillStyle = colors.header;
@@ -1207,8 +1231,9 @@ function paintGrid(options) {
         ctx.fillStyle = colors.header;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
-      if (selectedColumnKeys.has(columns[columnIndex].key)) {
-        ctx.fillStyle = colors.selectionFill;
+      const isAxisSelected = selectedColumnKeys.has(columns[columnIndex].key);
+      if (isAxisSelected) {
+        ctx.fillStyle = colors.axisSelectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
@@ -1240,7 +1265,7 @@ function paintGrid(options) {
         ctx.beginPath();
         ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
-        ctx.fillStyle = colors.muted;
+        ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
         ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
@@ -2246,6 +2271,7 @@ function TableInner({
       selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
       selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
       axisSelectionFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
+      axisSelectionText: readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
       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"),
@@ -3345,6 +3371,9 @@ function TableInner({
   }, [setSelection]);
   const selectRow = useCallback2((rowIndex, event, forceToggle = false) => {
     if (!rowSelection) return;
+    clickedCellRef.current = null;
+    setSelectionRange(null);
+    setSelection(null);
     const mode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
     const key = getRowKey(rows[rowIndex], rowIndex);
     let next;
@@ -3359,9 +3388,12 @@ function TableInner({
     }
     rowAnchorRef.current = rowIndex;
     setRowKeys(next);
-  }, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys]);
+  }, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys, setSelection]);
   const selectColumn = useCallback2((columnIndex, event) => {
     if (!columnSelection || columnIndex < 0) return;
+    clickedCellRef.current = null;
+    setSelectionRange(null);
+    setSelection(null);
     const mode = typeof columnSelection === "object" ? columnSelection.mode ?? "multiple" : "multiple";
     const key = columns[columnIndex].key;
     let next;
@@ -3369,23 +3401,26 @@ function TableInner({
       const start = Math.min(columnAnchorRef.current, columnIndex);
       const end = Math.max(columnAnchorRef.current, columnIndex);
       next = columns.slice(start, end + 1).map((column) => column.key);
-    } else if (mode === "multiple") {
+    } else if (mode === "multiple" && (event.ctrlKey || event.metaKey)) {
       next = selectedColumnKeySet.has(key) ? columnKeys.filter((item) => item !== key) : [...columnKeys, key];
     } else {
       next = columnKeys.length === 1 && selectedColumnKeySet.has(key) ? [] : [key];
     }
     columnAnchorRef.current = columnIndex;
     setColumnKeys(next);
-  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys]);
+  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
   const toggleColumnFromMenu = useCallback2((columnIndex) => {
     if (!columnSelection || columnIndex < 0) return;
+    clickedCellRef.current = null;
+    setSelectionRange(null);
+    setSelection(null);
     const key = columns[columnIndex].key;
     const mode = typeof columnSelection === "object" ? columnSelection.mode ?? "multiple" : "multiple";
     const selected = selectedColumnKeySet.has(key);
     const next = selected ? columnKeys.filter((value) => value !== key) : mode === "multiple" ? [...columnKeys, key] : [key];
     columnAnchorRef.current = columnIndex;
     setColumnKeys(next);
-  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys]);
+  }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
   const revealCell = useCallback2((cell) => {
     const scroller = scrollerRef.current;
     const metric = metrics[cell.columnIndex];
@@ -3737,6 +3772,8 @@ function TableInner({
   const renderHeaderIcons = (columnIndex, left) => {
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
+    const isAxisSelected = selectedColumnKeySet.has(column.key);
+    const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
     const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
@@ -3744,21 +3781,21 @@ function TableInner({
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
+        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
+        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
       right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
+        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -4119,7 +4156,7 @@ function TableInner({
       return /* @__PURE__ */ jsx7(
         "div",
         {
-          className: "rvg-cell-render",
+          className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
           style: {
             left,
             top,
@@ -4138,6 +4175,7 @@ function TableInner({
   };
   const renderHeaderTitle = (columnIndex, left) => {
     const column = columns[columnIndex];
+    const isAxisSelected = selectedColumnKeySet.has(column.key);
     const isDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
     const currentScrollTop = scrollRef.current.top;
     const headerTop = fixedHeader ? 0 : -currentScrollTop;
@@ -4154,7 +4192,7 @@ function TableInner({
       );
     }
     if (column.rowSelection) {
-      if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow") return null;
+      if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow" || column.rowSelectionIndicator === "none") return null;
       const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
       const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
       return /* @__PURE__ */ jsx7(
@@ -4173,7 +4211,7 @@ function TableInner({
       return /* @__PURE__ */ jsx7(
         "div",
         {
-          className: `rvg-header-title is-custom${isDropTarget ? " is-drop-target" : ""}`,
+          className: `rvg-header-title is-custom${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
           "data-level": headerDepth - 1,
           "data-measure-key": column.key,
           style: {
@@ -4216,10 +4254,11 @@ function TableInner({
     const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex), headerActionSlotWidth) : null;
     const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
     const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
+    const isAxisSelected = cell.leaf && selectedColumnKeySet.has(column.key);
     return /* @__PURE__ */ jsxs7(
       "div",
       {
-        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
+        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isAxisSelected ? " is-axis-selected" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
         "data-level": cell.level,
         "data-measure-key": `group:${cell.key}:${cell.level}`,
         style: {
@@ -4483,12 +4522,16 @@ function TableInner({
       getSelectedRows: () => rows.filter((row, index) => selectedRowKeySet.has(getRowKey(row, index))),
       setSelectedRowKeys: (keys) => {
         if (!rowSelection) return;
+        setSelectionRange(null);
+        setSelection(null);
         const next = [...new Set(keys)];
         setRowKeys(rowSelectionMode === "single" ? next.slice(0, 1) : next);
       },
       getSelectedColumnKeys: () => [...columnKeys],
       setSelectedColumnKeys: (keys) => {
         if (!columnSelection) return;
+        setSelectionRange(null);
+        setSelection(null);
         const next = [...new Set(keys)].filter((key) => columns.some((column) => column.key === key && !column.rowNumber && !column.rowSelection && !column.rowDragHandle));
         setColumnKeys(typeof columnSelection === "object" && columnSelection.mode === "single" ? next.slice(0, 1) : next);
       },
@@ -4691,7 +4734,9 @@ function TableInner({
               }
               if (locateHeaderDragHandle(event.clientX, columnIndex)) return;
               if (columnIndex >= 0 && columns[columnIndex].rowSelection && rowSelection) {
-                if (columns[columnIndex].rowSelectionIndicator === "arrow") return;
+                if (columns[columnIndex].rowSelectionIndicator === "arrow" || columns[columnIndex].rowSelectionIndicator === "none") return;
+                setSelectionRange(null);
+                setSelection(null);
                 setRowKeys(rowKeys.length === rows.length ? [] : rows.map(getRowKey));
               } else if (columnIndex >= 0 && (columns[columnIndex].rowDragHandle || columns[columnIndex].rowNumber)) {
                 return;
@@ -4710,7 +4755,7 @@ function TableInner({
             const clickedRowSelector = Boolean(columns[cell.columnIndex].rowSelection);
             if (clickedRowSelector) {
               clickedCellRef.current = null;
-              selectRow(cell.rowIndex, event, columns[cell.columnIndex].rowSelectionIndicator !== "arrow");
+              selectRow(cell.rowIndex, event, !["arrow", "none"].includes(columns[cell.columnIndex].rowSelectionIndicator ?? "checkbox"));
               return;
             }
             if (event.detail > 1) return;
@@ -5009,6 +5054,8 @@ function TableInner({
         if (item === "select-row") {
           if (!rowSelection) return null;
           return renderContextMenuButton("cell-select-row", cellContext, selectedRowKeySet.has(cell.rowKey) ? labels.deselectRow : labels.selectRow, () => {
+            setSelectionRange(null);
+            setSelection(null);
             if (selectedRowKeySet.has(cell.rowKey)) setRowKeys(rowKeys.filter((key) => key !== cell.rowKey));
             else setRowKeys(rowSelectionMode === "single" ? [cell.rowKey] : [...rowKeys, cell.rowKey]);
           }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "select-row" }) });

package/package.json

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