@lensui/lens-table 0.1.18 → 0.1.19

package/README.md

@@ -98,6 +98,7 @@ export function Example() {
 | `verticalBorderless`         | `boolean`                                                                          | `false`         | 已兼容保留，建议改用 `borderless`。                                                                                                      |
 | `horizontalBorderless`       | `boolean`                                                                          | `false`         | 是否隐藏横向行分隔线及上下边框，同时保留纵向列分隔线。可与 `striped` 配合使用。                                                          |
 | `frameBorderless`            | `boolean`                                                                          | `false`         | 是否隐藏表格四周外框，同时保留内部行列分隔线。                                                                                          |
+| `rowStyle`                   | `(row, rowIndex) => { color?: string; backgroundColor?: string }`                   | -               | 自定义整行绘制样式，覆盖数据列及自动生成的选择列、序号列和拖拽列。                                                                       |
 | `striped`                    | `boolean \| string`                                                                 | `false`         | 是否显示斑马纹行背景。传`true` 使用主题变量，传颜色字符串可自定义斑马纹颜色，例如 `'#f6faff'`。                                     |
 | `highlight`                  | `{ editedCells?: boolean \| string; insertedRows?: boolean \| string }`             | `{}`            | 高亮反馈配置。`editedCells` 控制编辑过的单元格底色，`insertedRows` 控制乐观插入行底色；传 `true` 使用默认色，传颜色字符串可自定义。   |
 | `cellSpans`                  | `TableCellSpan[] \| ((ctx) => TableCellSpan \| { rowSpan?: number; colSpan?: number } \| null)` | `[]`            | 合并主体单元格配置。可传数组，也可传函数按单元格生成规则。推荐使用 `rowKey` 定位；横向合并会限制在同一个固定列分区内，工具列不会参与合并。 |

package/dist/index.cjs

@@ -1007,6 +1007,7 @@ function paintGrid(options) {
       const y = bodyTop + rowIndex * rowHeight - scrollTop + shift;
       const row = rows[rowIndex];
       const rowKey = getRowKey(row, rowIndex);
+      const rowStyle = options.rowStyle?.(row, rowIndex);
       for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
         if (layer === "scroll" ? columns[columnIndex].fixed !== void 0 : columns[columnIndex].fixed !== layer) continue;
         if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
@@ -1029,6 +1030,10 @@ function paintGrid(options) {
           ctx.fillStyle = striped && rowIndex % 2 === 1 ? colors.stripe : colors.background;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (rowStyle?.backgroundColor) {
+          ctx.fillStyle = rowStyle.backgroundColor;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         if (isAxisSelected) {
           ctx.fillStyle = colors.axisSelectionFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1074,14 +1079,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 : isAxisSelected ? 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 ?? rowStyle?.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 : isAxisSelected ? 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 ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1178,7 +1183,7 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? colors.text;
+            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1626,6 +1631,7 @@ function TableInner({
   horizontalBorderless = false,
   frameBorderless = false,
   striped = false,
+  rowStyle,
   highlight,
   cellSpans = [],
   loading = false,
@@ -1754,6 +1760,7 @@ function TableInner({
   }, [columns, headerCells, headerDepth]);
   const canvasRef = (0, import_react5.useRef)(null);
   const scrollerRef = (0, import_react5.useRef)(null);
+  const rootRef = (0, import_react5.useRef)(null);
   const frameRef = (0, import_react5.useRef)(null);
   const textFrameRef = (0, import_react5.useRef)(null);
   const toastTimerRef = (0, import_react5.useRef)(null);
@@ -2037,6 +2044,18 @@ function TableInner({
   const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
   const [selectionRange, setSelectionRange] = (0, import_react5.useState)(null);
   const rangeDragRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!selection) return void 0;
+    const handleOutsidePointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node) || rootRef.current?.contains(target)) return;
+      clickedCellRef.current = null;
+      setSelectionRange(null);
+      setSelection(null);
+    };
+    document.addEventListener("pointerdown", handleOutsidePointerDown);
+    return () => document.removeEventListener("pointerdown", handleOutsidePointerDown);
+  }, [selection, setSelection]);
   const applyRowOrder = (0, import_react5.useCallback)((sourceIndex, targetIndex) => {
     if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= rows.length || targetIndex >= rows.length) return;
     const nextEntries = rows.map((row, index) => ({ row, key: getDataRowKey(row, index) }));
@@ -2312,8 +2331,8 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
-  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -4596,7 +4615,7 @@ function TableInner({
   };
   const currentScroll = scrollRef.current;
   const scrollerBottom = Math.max(0, bottomSummaryHeight - horizontalScrollbarHeight);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "canvas",
@@ -4778,7 +4797,12 @@ function TableInner({
               return;
             }
             const cell = locateCell(event.clientX, event.clientY);
-            if (!cell) return;
+            if (!cell) {
+              clickedCellRef.current = null;
+              setSelectionRange(null);
+              setSelection(null);
+              return;
+            }
             if (columns[cell.columnIndex].rowDragHandle || columns[cell.columnIndex].rowNumber) {
               clickedCellRef.current = null;
               return;

package/dist/index.d.cts

@@ -334,6 +334,11 @@ type TableContextMenu<Row> = boolean | TableContextMenuConfig<Row>;
 interface TableProps<Row extends object> {
     columns: GridColumn<Row>[];
     rows: Row[];
+    /** Custom row paint style. Applies to data and generated utility columns. */
+    rowStyle?: (row: Row, rowIndex: number) => {
+        color?: string;
+        backgroundColor?: string;
+    };
     /** Stable row id. Defaults to the row's `id` field when omitted. */
     rowKey?: keyof Row | ((row: Row, index: number) => GridKey);
     width?: number | string;

package/dist/index.d.ts

@@ -334,6 +334,11 @@ type TableContextMenu<Row> = boolean | TableContextMenuConfig<Row>;
 interface TableProps<Row extends object> {
     columns: GridColumn<Row>[];
     rows: Row[];
+    /** Custom row paint style. Applies to data and generated utility columns. */
+    rowStyle?: (row: Row, rowIndex: number) => {
+        color?: string;
+        backgroundColor?: string;
+    };
     /** Stable row id. Defaults to the row's `id` field when omitted. */
     rowKey?: keyof Row | ((row: Row, index: number) => GridKey);
     width?: number | string;

package/dist/index.js

@@ -977,6 +977,7 @@ function paintGrid(options) {
       const y = bodyTop + rowIndex * rowHeight - scrollTop + shift;
       const row = rows[rowIndex];
       const rowKey = getRowKey(row, rowIndex);
+      const rowStyle = options.rowStyle?.(row, rowIndex);
       for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
         if (layer === "scroll" ? columns[columnIndex].fixed !== void 0 : columns[columnIndex].fixed !== layer) continue;
         if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
@@ -999,6 +1000,10 @@ function paintGrid(options) {
           ctx.fillStyle = striped && rowIndex % 2 === 1 ? colors.stripe : colors.background;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (rowStyle?.backgroundColor) {
+          ctx.fillStyle = rowStyle.backgroundColor;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         if (isAxisSelected) {
           ctx.fillStyle = colors.axisSelectionFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1044,14 +1049,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 : isAxisSelected ? 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 ?? rowStyle?.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 : isAxisSelected ? 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 ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1148,7 +1153,7 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? colors.text;
+            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1596,6 +1601,7 @@ function TableInner({
   horizontalBorderless = false,
   frameBorderless = false,
   striped = false,
+  rowStyle,
   highlight,
   cellSpans = [],
   loading = false,
@@ -1724,6 +1730,7 @@ function TableInner({
   }, [columns, headerCells, headerDepth]);
   const canvasRef = useRef2(null);
   const scrollerRef = useRef2(null);
+  const rootRef = useRef2(null);
   const frameRef = useRef2(null);
   const textFrameRef = useRef2(null);
   const toastTimerRef = useRef2(null);
@@ -2007,6 +2014,18 @@ function TableInner({
   const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
   const [selectionRange, setSelectionRange] = useState4(null);
   const rangeDragRef = useRef2(null);
+  useEffect2(() => {
+    if (!selection) return void 0;
+    const handleOutsidePointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node) || rootRef.current?.contains(target)) return;
+      clickedCellRef.current = null;
+      setSelectionRange(null);
+      setSelection(null);
+    };
+    document.addEventListener("pointerdown", handleOutsidePointerDown);
+    return () => document.removeEventListener("pointerdown", handleOutsidePointerDown);
+  }, [selection, setSelection]);
   const applyRowOrder = useCallback2((sourceIndex, targetIndex) => {
     if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= rows.length || targetIndex >= rows.length) return;
     const nextEntries = rows.map((row, index) => ({ row, key: getDataRowKey(row, index) }));
@@ -2282,8 +2301,8 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
-  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -4566,7 +4585,7 @@ function TableInner({
   };
   const currentScroll = scrollRef.current;
   const scrollerBottom = Math.max(0, bottomSummaryHeight - horizontalScrollbarHeight);
-  return /* @__PURE__ */ jsxs7("div", { className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ jsxs7("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx7(
         "canvas",
@@ -4748,7 +4767,12 @@ function TableInner({
               return;
             }
             const cell = locateCell(event.clientX, event.clientY);
-            if (!cell) return;
+            if (!cell) {
+              clickedCellRef.current = null;
+              setSelectionRange(null);
+              setSelection(null);
+              return;
+            }
             if (columns[cell.columnIndex].rowDragHandle || columns[cell.columnIndex].rowNumber) {
               clickedCellRef.current = null;
               return;

package/package.json

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