@lensui/lens-table 0.1.16 → 0.1.18

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`                                                    | -                 | 行选择变化回调。                                                                                                                        |

package/dist/index.cjs

@@ -1115,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);
@@ -1201,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") {
@@ -1221,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;
@@ -1239,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) {
@@ -1272,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();
@@ -1634,6 +1657,7 @@ function TableInner({
   onSortChange,
   onFilterChange,
   onCellChange,
+  editTrigger = "double-click",
   onCellClick,
   onCellDoubleClick,
   onCellContextMenu,
@@ -3378,6 +3402,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;
@@ -3392,9 +3419,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;
@@ -3402,23 +3432,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];
@@ -3770,6 +3803,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);
@@ -3777,21 +3812,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;
@@ -4171,6 +4206,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;
@@ -4187,7 +4223,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)(
@@ -4206,7 +4242,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: {
@@ -4249,10 +4285,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: {
@@ -4516,12 +4553,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);
       },
@@ -4724,7 +4765,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;
@@ -4743,7 +4786,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;
@@ -4759,6 +4802,7 @@ function TableInner({
               selectRow(cell.rowIndex, event);
             }
             revealCell(cell);
+            if (editTrigger === "single-click") beginEdit(cell);
           },
           onDoubleClick: (event) => {
             const cell = clickedCellRef.current ?? locateCell(event.clientX, event.clientY);
@@ -4767,7 +4811,7 @@ function TableInner({
             if (column.rowNumber || column.rowSelection || column.rowDragHandle) return;
             const row = rows[cell.rowIndex];
             onCellDoubleClick?.({ ...cell, row, column, value: column.dataIndex === void 0 ? void 0 : row[column.dataIndex] }, event);
-            if (!event.defaultPrevented) beginEdit(cell);
+            if (!event.defaultPrevented && editTrigger === "double-click") beginEdit(cell);
           },
           onContextMenu: handleContextMenu
         }
@@ -5042,6 +5086,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

@@ -773,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;
@@ -854,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;
 }
@@ -413,6 +413,8 @@ interface TableProps<Row extends object> {
     /** Overrides the built-in text filtering. Return the rows that match the internally managed filter values. */
     onFilterChange?: (rows: Row[], values: Readonly<Record<string, string>>) => Row[];
     onCellChange?: (change: CellChange<Row>) => void | Promise<void>;
+    /** Starts editing from a single or double click. Defaults to double-click. */
+    editTrigger?: 'single-click' | 'double-click';
     /** Fires on a data cell click, before the default selection behavior. */
     onCellClick?: (cell: TableCellContext<Row>, event: MouseEvent<HTMLElement>) => void;
     /** Fires before double-click editing. preventDefault() cancels editing. */

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;
 }
@@ -413,6 +413,8 @@ interface TableProps<Row extends object> {
     /** Overrides the built-in text filtering. Return the rows that match the internally managed filter values. */
     onFilterChange?: (rows: Row[], values: Readonly<Record<string, string>>) => Row[];
     onCellChange?: (change: CellChange<Row>) => void | Promise<void>;
+    /** Starts editing from a single or double click. Defaults to double-click. */
+    editTrigger?: 'single-click' | 'double-click';
     /** Fires on a data cell click, before the default selection behavior. */
     onCellClick?: (cell: TableCellContext<Row>, event: MouseEvent<HTMLElement>) => void;
     /** Fires before double-click editing. preventDefault() cancels editing. */

package/dist/index.js

@@ -1085,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);
@@ -1171,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") {
@@ -1191,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;
@@ -1209,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) {
@@ -1242,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();
@@ -1604,6 +1627,7 @@ function TableInner({
   onSortChange,
   onFilterChange,
   onCellChange,
+  editTrigger = "double-click",
   onCellClick,
   onCellDoubleClick,
   onCellContextMenu,
@@ -3348,6 +3372,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;
@@ -3362,9 +3389,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;
@@ -3372,23 +3402,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];
@@ -3740,6 +3773,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);
@@ -3747,21 +3782,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;
@@ -4141,6 +4176,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;
@@ -4157,7 +4193,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(
@@ -4176,7 +4212,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: {
@@ -4219,10 +4255,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: {
@@ -4486,12 +4523,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);
       },
@@ -4694,7 +4735,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;
@@ -4713,7 +4756,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;
@@ -4729,6 +4772,7 @@ function TableInner({
               selectRow(cell.rowIndex, event);
             }
             revealCell(cell);
+            if (editTrigger === "single-click") beginEdit(cell);
           },
           onDoubleClick: (event) => {
             const cell = clickedCellRef.current ?? locateCell(event.clientX, event.clientY);
@@ -4737,7 +4781,7 @@ function TableInner({
             if (column.rowNumber || column.rowSelection || column.rowDragHandle) return;
             const row = rows[cell.rowIndex];
             onCellDoubleClick?.({ ...cell, row, column, value: column.dataIndex === void 0 ? void 0 : row[column.dataIndex] }, event);
-            if (!event.defaultPrevented) beginEdit(cell);
+            if (!event.defaultPrevented && editTrigger === "double-click") beginEdit(cell);
           },
           onContextMenu: handleContextMenu
         }
@@ -5012,6 +5056,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.16",
+  "version": "0.1.18",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",