@lensui/lens-table 0.1.14 → 0.1.16

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: 'single' \| 'multiple', showCheckbox: false }` 隐藏选择框并通过点击数据单元格选择行；默认显示选择框。默认自动生成左侧选择列，不需要在 `columns` 中配置。                        |
+| `rowSelection`               | `boolean \| RowSelectionConfig`                                                     | `false`         | 开启行选择。支持 `mode`、`showCheckbox`、`indicator: 'checkbox' \| 'arrow'` 和 `columnWidth`；箭头样式未选中时为空白。默认自动生成左侧选择列。 |
 | `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

@@ -834,7 +834,8 @@ function getVisibleHeaderActions(column, width, columnDraggable = false, titleWi
 }
 function getMinimumColumnWidth(column, columnDraggable = false) {
   if (column.rowDragHandle) return 36;
-  if (column.rowSelection || column.rowNumber) return 44;
+  if (column.rowSelection) return Math.max(24, column.width ?? 44);
+  if (column.rowNumber) return 44;
   return 60;
 }
 function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
@@ -919,6 +920,7 @@ var COLORS = {
   selection: "#1677ff",
   selectionFill: "#edf4ff",
   axisSelectionFill: "#e8f2ff",
+  axisSelectionText: "#202124",
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
@@ -1017,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;
@@ -1026,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);
         }
@@ -1071,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) {
@@ -1112,7 +1115,21 @@ function paintGrid(options) {
           const checked = selectedRowKeys.has(rowKey);
           ctx.save();
           ctx.lineWidth = 1;
-          if (rowSelectionMode === "single") {
+          if (column.rowSelectionIndicator === "arrow") {
+            if (checked) {
+              ctx.beginPath();
+              ctx.moveTo(iconLeft + 3.5, iconTop + 8);
+              ctx.lineTo(iconLeft + 12.5, iconTop + 8);
+              ctx.moveTo(iconLeft + 8.5, iconTop + 4);
+              ctx.lineTo(iconLeft + 12.5, iconTop + 8);
+              ctx.lineTo(iconLeft + 8.5, iconTop + 12);
+              ctx.strokeStyle = colors.axisSelectionText;
+              ctx.lineWidth = 1.75;
+              ctx.lineCap = "round";
+              ctx.lineJoin = "round";
+              ctx.stroke();
+            }
+          } else if (rowSelectionMode === "single") {
             ctx.beginPath();
             ctx.arc(iconLeft + 8, iconTop + 8, 6.25, 0, Math.PI * 2);
             ctx.fillStyle = colors.background;
@@ -1160,7 +1177,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";
@@ -1675,6 +1692,8 @@ function TableInner({
   const leafSourceColumns = (0, import_react5.useMemo)(() => flattenDataColumns(sourceColumns), [sourceColumns]);
   const sourceColumnWidthsRef = (0, import_react5.useRef)(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
+  const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
+  const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
   (0, import_react5.useEffect)(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
       console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
@@ -1686,7 +1705,7 @@ function TableInner({
       utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
     }
     if (showRowCheckbox) {
-      utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: 44, align: "center", fixed: "left", rowSelection: true });
+      utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
     }
     if (rowNumber) {
       utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
@@ -1696,7 +1715,7 @@ function TableInner({
       return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
     });
     return [...utilityColumns, ...dataColumns];
-  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, showRowCheckbox, sourceRows.length]);
+  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
   const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
   const headerCells = (0, import_react5.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
   const activeCustomHeaderLevels = (0, import_react5.useMemo)(() => {
@@ -2259,6 +2278,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"),
@@ -4132,7 +4152,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,
@@ -4167,7 +4187,7 @@ function TableInner({
       );
     }
     if (column.rowSelection) {
-      if (rowSelectionMode === "single") return null;
+      if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow") return null;
       const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
       const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4704,6 +4724,7 @@ function TableInner({
               }
               if (locateHeaderDragHandle(event.clientX, columnIndex)) return;
               if (columnIndex >= 0 && columns[columnIndex].rowSelection && rowSelection) {
+                if (columns[columnIndex].rowSelectionIndicator === "arrow") return;
                 setRowKeys(rowKeys.length === rows.length ? [] : rows.map(getRowKey));
               } else if (columnIndex >= 0 && (columns[columnIndex].rowDragHandle || columns[columnIndex].rowNumber)) {
                 return;
@@ -4722,7 +4743,7 @@ function TableInner({
             const clickedRowSelector = Boolean(columns[cell.columnIndex].rowSelection);
             if (clickedRowSelector) {
               clickedCellRef.current = null;
-              selectRow(cell.rowIndex, event, true);
+              selectRow(cell.rowIndex, event, columns[cell.columnIndex].rowSelectionIndicator !== "arrow");
               return;
             }
             if (event.detail > 1) return;

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;

package/dist/index.d.cts

@@ -159,6 +159,10 @@ interface AxisSelectionConfig {
 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';
+    /** Width of the generated selection column. Defaults to 44. */
+    columnWidth?: number;
 }
 interface TableRowNumberConfig {
     /** Fix the row number column to the left. Defaults to true. */

package/dist/index.d.ts

@@ -159,6 +159,10 @@ interface AxisSelectionConfig {
 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';
+    /** Width of the generated selection column. Defaults to 44. */
+    columnWidth?: number;
 }
 interface TableRowNumberConfig {
     /** Fix the row number column to the left. Defaults to true. */

package/dist/index.js

@@ -804,7 +804,8 @@ function getVisibleHeaderActions(column, width, columnDraggable = false, titleWi
 }
 function getMinimumColumnWidth(column, columnDraggable = false) {
   if (column.rowDragHandle) return 36;
-  if (column.rowSelection || column.rowNumber) return 44;
+  if (column.rowSelection) return Math.max(24, column.width ?? 44);
+  if (column.rowNumber) return 44;
   return 60;
 }
 function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
@@ -889,6 +890,7 @@ var COLORS = {
   selection: "#1677ff",
   selectionFill: "#edf4ff",
   axisSelectionFill: "#e8f2ff",
+  axisSelectionText: "#202124",
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
@@ -987,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;
@@ -996,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);
         }
@@ -1041,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) {
@@ -1082,7 +1085,21 @@ function paintGrid(options) {
           const checked = selectedRowKeys.has(rowKey);
           ctx.save();
           ctx.lineWidth = 1;
-          if (rowSelectionMode === "single") {
+          if (column.rowSelectionIndicator === "arrow") {
+            if (checked) {
+              ctx.beginPath();
+              ctx.moveTo(iconLeft + 3.5, iconTop + 8);
+              ctx.lineTo(iconLeft + 12.5, iconTop + 8);
+              ctx.moveTo(iconLeft + 8.5, iconTop + 4);
+              ctx.lineTo(iconLeft + 12.5, iconTop + 8);
+              ctx.lineTo(iconLeft + 8.5, iconTop + 12);
+              ctx.strokeStyle = colors.axisSelectionText;
+              ctx.lineWidth = 1.75;
+              ctx.lineCap = "round";
+              ctx.lineJoin = "round";
+              ctx.stroke();
+            }
+          } else if (rowSelectionMode === "single") {
             ctx.beginPath();
             ctx.arc(iconLeft + 8, iconTop + 8, 6.25, 0, Math.PI * 2);
             ctx.fillStyle = colors.background;
@@ -1130,7 +1147,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";
@@ -1645,6 +1662,8 @@ function TableInner({
   const leafSourceColumns = useMemo(() => flattenDataColumns(sourceColumns), [sourceColumns]);
   const sourceColumnWidthsRef = useRef2(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
+  const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
+  const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
   useEffect2(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
       console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
@@ -1656,7 +1675,7 @@ function TableInner({
       utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
     }
     if (showRowCheckbox) {
-      utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: 44, align: "center", fixed: "left", rowSelection: true });
+      utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
     }
     if (rowNumber) {
       utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
@@ -1666,7 +1685,7 @@ function TableInner({
       return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
     });
     return [...utilityColumns, ...dataColumns];
-  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, showRowCheckbox, sourceRows.length]);
+  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
   const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
   const headerCells = useMemo(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
   const activeCustomHeaderLevels = useMemo(() => {
@@ -2229,6 +2248,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"),
@@ -4102,7 +4122,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,
@@ -4137,7 +4157,7 @@ function TableInner({
       );
     }
     if (column.rowSelection) {
-      if (rowSelectionMode === "single") return null;
+      if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow") return null;
       const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
       const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
       return /* @__PURE__ */ jsx7(
@@ -4674,6 +4694,7 @@ function TableInner({
               }
               if (locateHeaderDragHandle(event.clientX, columnIndex)) return;
               if (columnIndex >= 0 && columns[columnIndex].rowSelection && rowSelection) {
+                if (columns[columnIndex].rowSelectionIndicator === "arrow") return;
                 setRowKeys(rowKeys.length === rows.length ? [] : rows.map(getRowKey));
               } else if (columnIndex >= 0 && (columns[columnIndex].rowDragHandle || columns[columnIndex].rowNumber)) {
                 return;
@@ -4692,7 +4713,7 @@ function TableInner({
             const clickedRowSelector = Boolean(columns[cell.columnIndex].rowSelection);
             if (clickedRowSelector) {
               clickedCellRef.current = null;
-              selectRow(cell.rowIndex, event, true);
+              selectRow(cell.rowIndex, event, columns[cell.columnIndex].rowSelectionIndicator !== "arrow");
               return;
             }
             if (event.detail > 1) return;

package/package.json

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