@lensui/lens-table 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +25 -7
  3. package/dist/index.d.cts +4 -0
  4. package/dist/index.d.ts +4 -0
  5. package/dist/index.js +25 -7
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -111,7 +111,7 @@ export function Example() {
111
111
  | `defaultSelectedCell` | `GridSelectionTarget \| null` | `null` | 默认选中单元格。传 `columnKey`，行可使用 `rowKey` 或 `rowIndex` 定位。 |
112
112
  | `onSelectedCellChange` | `(selection) => void` | - | 单元格选中变化回调，`selection.value` 为当前单元格的原始值。 |
113
113
  | `rangeSelection` | `boolean` | `false` | 是否允许鼠标拖动选择多个单元格。开启后支持范围复制、范围右键菜单和右下角拖拽扩展范围。 |
114
- | `rowSelection` | `boolean \| RowSelectionConfig` | `false` | 开启行选择。可传`{ mode: 'single' \| 'multiple', showCheckbox: false }` 隐藏选择框并通过点击数据单元格选择行；默认显示选择框。默认自动生成左侧选择列，不需要在 `columns` 中配置。 |
114
+ | `rowSelection` | `boolean \| RowSelectionConfig` | `false` | 开启行选择。支持 `mode`、`showCheckbox`、`indicator: 'checkbox' \| 'arrow'` 和 `columnWidth`；箭头样式未选中时为空白。默认自动生成左侧选择列。 |
115
115
  | `selectedRowKeys` | `GridKey[]` | 非受控 | 受控行选择 key 列表。 |
116
116
  | `defaultSelectedRowKeys` | `GridKey[]` | `[]` | 非受控模式下默认选中的行 key。 |
117
117
  | `onSelectedRowChange` | `(keys, rows, indices) => void` | - | 行选择变化回调。 |
package/dist/index.cjs CHANGED
@@ -834,7 +834,8 @@ function getVisibleHeaderActions(column, width, columnDraggable = false, titleWi
834
834
  }
835
835
  function getMinimumColumnWidth(column, columnDraggable = false) {
836
836
  if (column.rowDragHandle) return 36;
837
- if (column.rowSelection || column.rowNumber) return 44;
837
+ if (column.rowSelection) return Math.max(24, column.width ?? 44);
838
+ if (column.rowNumber) return 44;
838
839
  return 60;
839
840
  }
840
841
  function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
@@ -1112,7 +1113,21 @@ function paintGrid(options) {
1112
1113
  const checked = selectedRowKeys.has(rowKey);
1113
1114
  ctx.save();
1114
1115
  ctx.lineWidth = 1;
1115
- if (rowSelectionMode === "single") {
1116
+ if (column.rowSelectionIndicator === "arrow") {
1117
+ if (checked) {
1118
+ ctx.beginPath();
1119
+ ctx.moveTo(iconLeft + 3.5, iconTop + 8);
1120
+ ctx.lineTo(iconLeft + 12.5, iconTop + 8);
1121
+ ctx.moveTo(iconLeft + 8.5, iconTop + 4);
1122
+ ctx.lineTo(iconLeft + 12.5, iconTop + 8);
1123
+ ctx.lineTo(iconLeft + 8.5, iconTop + 12);
1124
+ ctx.strokeStyle = colors.selection;
1125
+ ctx.lineWidth = 1.75;
1126
+ ctx.lineCap = "round";
1127
+ ctx.lineJoin = "round";
1128
+ ctx.stroke();
1129
+ }
1130
+ } else if (rowSelectionMode === "single") {
1116
1131
  ctx.beginPath();
1117
1132
  ctx.arc(iconLeft + 8, iconTop + 8, 6.25, 0, Math.PI * 2);
1118
1133
  ctx.fillStyle = colors.background;
@@ -1160,7 +1175,7 @@ function paintGrid(options) {
1160
1175
  ctx.beginPath();
1161
1176
  ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
1162
1177
  ctx.clip();
1163
- ctx.fillStyle = cellStyle?.color ?? colors.text;
1178
+ ctx.fillStyle = column.rowNumber && selectedRowKeys.has(rowKey) ? colors.selection : cellStyle?.color ?? colors.text;
1164
1179
  ctx.font = createCellFont(bodyFontSize);
1165
1180
  ctx.textBaseline = "alphabetic";
1166
1181
  ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1675,6 +1690,8 @@ function TableInner({
1675
1690
  const leafSourceColumns = (0, import_react5.useMemo)(() => flattenDataColumns(sourceColumns), [sourceColumns]);
1676
1691
  const sourceColumnWidthsRef = (0, import_react5.useRef)(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
1677
1692
  const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
1693
+ const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
1694
+ const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
1678
1695
  (0, import_react5.useEffect)(() => {
1679
1696
  if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
1680
1697
  console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
@@ -1686,7 +1703,7 @@ function TableInner({
1686
1703
  utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
1687
1704
  }
1688
1705
  if (showRowCheckbox) {
1689
- utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: 44, align: "center", fixed: "left", rowSelection: true });
1706
+ utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
1690
1707
  }
1691
1708
  if (rowNumber) {
1692
1709
  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 +1713,7 @@ function TableInner({
1696
1713
  return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
1697
1714
  });
1698
1715
  return [...utilityColumns, ...dataColumns];
1699
- }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, showRowCheckbox, sourceRows.length]);
1716
+ }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
1700
1717
  const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
1701
1718
  const headerCells = (0, import_react5.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
1702
1719
  const activeCustomHeaderLevels = (0, import_react5.useMemo)(() => {
@@ -4167,7 +4184,7 @@ function TableInner({
4167
4184
  );
4168
4185
  }
4169
4186
  if (column.rowSelection) {
4170
- if (rowSelectionMode === "single") return null;
4187
+ if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow") return null;
4171
4188
  const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
4172
4189
  const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
4173
4190
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4704,6 +4721,7 @@ function TableInner({
4704
4721
  }
4705
4722
  if (locateHeaderDragHandle(event.clientX, columnIndex)) return;
4706
4723
  if (columnIndex >= 0 && columns[columnIndex].rowSelection && rowSelection) {
4724
+ if (columns[columnIndex].rowSelectionIndicator === "arrow") return;
4707
4725
  setRowKeys(rowKeys.length === rows.length ? [] : rows.map(getRowKey));
4708
4726
  } else if (columnIndex >= 0 && (columns[columnIndex].rowDragHandle || columns[columnIndex].rowNumber)) {
4709
4727
  return;
@@ -4722,7 +4740,7 @@ function TableInner({
4722
4740
  const clickedRowSelector = Boolean(columns[cell.columnIndex].rowSelection);
4723
4741
  if (clickedRowSelector) {
4724
4742
  clickedCellRef.current = null;
4725
- selectRow(cell.rowIndex, event, true);
4743
+ selectRow(cell.rowIndex, event, columns[cell.columnIndex].rowSelectionIndicator !== "arrow");
4726
4744
  return;
4727
4745
  }
4728
4746
  if (event.detail > 1) return;
package/dist/index.d.cts CHANGED
@@ -159,6 +159,10 @@ interface AxisSelectionConfig {
159
159
  interface RowSelectionConfig extends AxisSelectionConfig {
160
160
  /** Show the selection column. Defaults to true; when false, click body cells to select rows. */
161
161
  showCheckbox?: boolean;
162
+ /** Selection marker style. Arrow stays blank until selected. Defaults to checkbox. */
163
+ indicator?: 'checkbox' | 'arrow';
164
+ /** Width of the generated selection column. Defaults to 44. */
165
+ columnWidth?: number;
162
166
  }
163
167
  interface TableRowNumberConfig {
164
168
  /** Fix the row number column to the left. Defaults to true. */
package/dist/index.d.ts CHANGED
@@ -159,6 +159,10 @@ interface AxisSelectionConfig {
159
159
  interface RowSelectionConfig extends AxisSelectionConfig {
160
160
  /** Show the selection column. Defaults to true; when false, click body cells to select rows. */
161
161
  showCheckbox?: boolean;
162
+ /** Selection marker style. Arrow stays blank until selected. Defaults to checkbox. */
163
+ indicator?: 'checkbox' | 'arrow';
164
+ /** Width of the generated selection column. Defaults to 44. */
165
+ columnWidth?: number;
162
166
  }
163
167
  interface TableRowNumberConfig {
164
168
  /** Fix the row number column to the left. Defaults to true. */
package/dist/index.js CHANGED
@@ -804,7 +804,8 @@ function getVisibleHeaderActions(column, width, columnDraggable = false, titleWi
804
804
  }
805
805
  function getMinimumColumnWidth(column, columnDraggable = false) {
806
806
  if (column.rowDragHandle) return 36;
807
- if (column.rowSelection || column.rowNumber) return 44;
807
+ if (column.rowSelection) return Math.max(24, column.width ?? 44);
808
+ if (column.rowNumber) return 44;
808
809
  return 60;
809
810
  }
810
811
  function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
@@ -1082,7 +1083,21 @@ function paintGrid(options) {
1082
1083
  const checked = selectedRowKeys.has(rowKey);
1083
1084
  ctx.save();
1084
1085
  ctx.lineWidth = 1;
1085
- if (rowSelectionMode === "single") {
1086
+ if (column.rowSelectionIndicator === "arrow") {
1087
+ if (checked) {
1088
+ ctx.beginPath();
1089
+ ctx.moveTo(iconLeft + 3.5, iconTop + 8);
1090
+ ctx.lineTo(iconLeft + 12.5, iconTop + 8);
1091
+ ctx.moveTo(iconLeft + 8.5, iconTop + 4);
1092
+ ctx.lineTo(iconLeft + 12.5, iconTop + 8);
1093
+ ctx.lineTo(iconLeft + 8.5, iconTop + 12);
1094
+ ctx.strokeStyle = colors.selection;
1095
+ ctx.lineWidth = 1.75;
1096
+ ctx.lineCap = "round";
1097
+ ctx.lineJoin = "round";
1098
+ ctx.stroke();
1099
+ }
1100
+ } else if (rowSelectionMode === "single") {
1086
1101
  ctx.beginPath();
1087
1102
  ctx.arc(iconLeft + 8, iconTop + 8, 6.25, 0, Math.PI * 2);
1088
1103
  ctx.fillStyle = colors.background;
@@ -1130,7 +1145,7 @@ function paintGrid(options) {
1130
1145
  ctx.beginPath();
1131
1146
  ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
1132
1147
  ctx.clip();
1133
- ctx.fillStyle = cellStyle?.color ?? colors.text;
1148
+ ctx.fillStyle = column.rowNumber && selectedRowKeys.has(rowKey) ? colors.selection : cellStyle?.color ?? colors.text;
1134
1149
  ctx.font = createCellFont(bodyFontSize);
1135
1150
  ctx.textBaseline = "alphabetic";
1136
1151
  ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1645,6 +1660,8 @@ function TableInner({
1645
1660
  const leafSourceColumns = useMemo(() => flattenDataColumns(sourceColumns), [sourceColumns]);
1646
1661
  const sourceColumnWidthsRef = useRef2(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
1647
1662
  const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
1663
+ const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
1664
+ const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
1648
1665
  useEffect2(() => {
1649
1666
  if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
1650
1667
  console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
@@ -1656,7 +1673,7 @@ function TableInner({
1656
1673
  utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
1657
1674
  }
1658
1675
  if (showRowCheckbox) {
1659
- utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: 44, align: "center", fixed: "left", rowSelection: true });
1676
+ utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
1660
1677
  }
1661
1678
  if (rowNumber) {
1662
1679
  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 +1683,7 @@ function TableInner({
1666
1683
  return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
1667
1684
  });
1668
1685
  return [...utilityColumns, ...dataColumns];
1669
- }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, showRowCheckbox, sourceRows.length]);
1686
+ }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
1670
1687
  const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
1671
1688
  const headerCells = useMemo(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
1672
1689
  const activeCustomHeaderLevels = useMemo(() => {
@@ -4137,7 +4154,7 @@ function TableInner({
4137
4154
  );
4138
4155
  }
4139
4156
  if (column.rowSelection) {
4140
- if (rowSelectionMode === "single") return null;
4157
+ if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow") return null;
4141
4158
  const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
4142
4159
  const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
4143
4160
  return /* @__PURE__ */ jsx7(
@@ -4674,6 +4691,7 @@ function TableInner({
4674
4691
  }
4675
4692
  if (locateHeaderDragHandle(event.clientX, columnIndex)) return;
4676
4693
  if (columnIndex >= 0 && columns[columnIndex].rowSelection && rowSelection) {
4694
+ if (columns[columnIndex].rowSelectionIndicator === "arrow") return;
4677
4695
  setRowKeys(rowKeys.length === rows.length ? [] : rows.map(getRowKey));
4678
4696
  } else if (columnIndex >= 0 && (columns[columnIndex].rowDragHandle || columns[columnIndex].rowNumber)) {
4679
4697
  return;
@@ -4692,7 +4710,7 @@ function TableInner({
4692
4710
  const clickedRowSelector = Boolean(columns[cell.columnIndex].rowSelection);
4693
4711
  if (clickedRowSelector) {
4694
4712
  clickedCellRef.current = null;
4695
- selectRow(cell.rowIndex, event, true);
4713
+ selectRow(cell.rowIndex, event, columns[cell.columnIndex].rowSelectionIndicator !== "arrow");
4696
4714
  return;
4697
4715
  }
4698
4716
  if (event.detail > 1) return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lensui/lens-table",
3
- "version": "0.1.13",
3
+ "version": "0.1.15",
4
4
  "description": "A lightweight, canvas-rendered React table component for LensUI.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",