@lensui/lens-table 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -1440,7 +1440,7 @@ function Table({
   const hoveredRowIndexRef = (0, import_react5.useRef)(null);
   const [viewport, setViewport] = (0, import_react5.useState)({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
   const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = (0, import_react5.useState)(0);
-  const resolvedHeight = viewport.height || FALLBACK_HEIGHT;
+  const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
   const [scrollPosition, setScrollPosition] = (0, import_react5.useState)({ left: 0, top: 0 });
   const scrollRef = (0, import_react5.useRef)({ left: 0, top: 0 });
   const [selection, setSelection] = useControllableValue(selectedCell, defaultSelectedCell, onSelectedCellChange);
@@ -1588,14 +1588,15 @@ function Table({
   }, [columns, metrics]);
   const hasRowSelectionColumn = (0, import_react5.useMemo)(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
-  const hasSummaryRow = (0, import_react5.useMemo)(() => summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, summaryEnabled]);
+  const hasSummaryRow = (0, import_react5.useMemo)(() => rows.length > 0 && summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, rows.length, summaryEnabled]);
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
   const bodyTop = headerHeight + topSummaryHeight;
   const bodyContentHeight = rows.length === 0 ? EMPTY_BODY_HEIGHT : contentHeight;
   const realContentHeight = bodyTop + bodyContentHeight + bottomSummaryHeight + (contentWidth > viewport.width ? horizontalScrollbarHeight : 0);
   const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
-  const bodyViewportHeight = Math.max(0, effectiveHeight - (fixedHeader ? headerHeight : 0) - topSummaryHeight);
+  const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
+  const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight : 0) - topSummaryHeight);
   const [summaryState, setSummaryState] = (0, import_react5.useState)(() => ({ columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
   const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.columns !== columns || summaryState.rows !== rows);
   const summaryValues = hasSummaryRow && summaryState.columns === columns && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
@@ -1732,7 +1733,7 @@ function Table({
     if (!canvas || viewport.width <= 0) return;
     const ratio = Math.min(window.devicePixelRatio || 1, 2);
     const physicalWidth = Math.round(viewport.width * ratio);
-    const physicalHeight = Math.round(effectiveHeight * ratio);
+    const physicalHeight = Math.round(renderHeight * ratio);
     if (canvas.width !== physicalWidth) canvas.width = physicalWidth;
     if (canvas.height !== physicalHeight) canvas.height = physicalHeight;
     const context = canvas.getContext("2d");
@@ -1755,8 +1756,8 @@ function Table({
     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: effectiveHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
-  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, effectiveHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, 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, headerHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
+  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, 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]);
@@ -1865,14 +1866,14 @@ function Table({
         const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
         const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
         const verticalStart = fixedHeader ? bodyTop : 0;
-        if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) {
+        if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) {
           focus.style.display = "none";
         } else {
           const borderWidth = 2;
           const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
           const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
           const top = Math.round(Math.max(rawTop - borderWidth, verticalStart - 1));
-          const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
+          const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -1897,7 +1898,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, effectiveHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
   const locateColumn = (0, import_react5.useCallback)((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -2485,13 +2486,13 @@ function Table({
       const rowTop = (fixedHeader ? 0 : bodyTop) + rowIndex * rowHeight;
       const rowBottom = rowTop + rowHeight * (span?.rowSpan ?? 1);
       const cellWidth = getCellDisplayWidth(columnIndex, span?.colSpan ?? 1);
-      const visibleRowHeight = fixedHeader ? effectiveHeight - bodyTop : effectiveHeight;
+      const visibleRowHeight = fixedHeader ? renderHeight - bodyTop : renderHeight;
       if (rowTop < scroller.scrollTop) scroller.scrollTop = rowTop;
       if (rowBottom > scroller.scrollTop + visibleRowHeight) scroller.scrollTop = rowBottom - visibleRowHeight;
       if (columns[columnIndex].fixed === void 0 && metric.left < scroller.scrollLeft + fixedWidth) scroller.scrollLeft = Math.max(0, metric.left - fixedWidth);
       if (columns[columnIndex].fixed === void 0 && metric.left + cellWidth > scroller.scrollLeft + viewport.width - rightFixedWidth) scroller.scrollLeft = metric.left + cellWidth - viewport.width + rightFixedWidth;
     }
-  }, [beginEdit, bodyTop, columns, editing, effectiveHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
+  }, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
   const editorStyle = (0, import_react5.useMemo)(() => {
     if (!editing) return void 0;
     const metric = metrics[editing.columnIndex];
@@ -2715,7 +2716,7 @@ function Table({
       type: "cell",
       ...cell,
       left: Math.min(Math.max(0, clientX - root.left), Math.max(0, viewport.width - 190)),
-      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 350))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, renderHeight - 350))
     });
     onCellContextMenu?.({ ...cell, row: rows[cell.rowIndex], clientX, clientY });
   };
@@ -2726,7 +2727,7 @@ function Table({
       type: "header",
       columnIndex,
       left: Math.min(Math.max(0, clientX - root.left), Math.max(0, viewport.width - 180)),
-      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 68))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, renderHeight - 68))
     });
   };
   const getRowDragOffset = (rowIndex) => {
@@ -2956,7 +2957,7 @@ function Table({
     const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
-    if (rawLeft <= horizontalStart || rawLeft > horizontalEnd || rawTop <= verticalStart || rawTop > effectiveHeight) return null;
+    if (rawLeft <= horizontalStart || rawLeft > horizontalEnd || rawTop <= verticalStart || rawTop > renderHeight) return null;
     return { left: rawLeft, top: rawTop, bounds };
   })();
   const selectionOutlineStyle = (() => {
@@ -2973,12 +2974,12 @@ function Table({
     const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
-    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) return null;
+    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) return null;
     const borderWidth = 2;
     const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
     const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
     const top = Math.round(Math.max(rawTop - borderWidth, verticalStart - 1));
-    const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
+    const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
     return {
       left,
       top,
@@ -3093,8 +3094,10 @@ function Table({
   const renderSummaryCell = (columnIndex, left) => {
     const column = columns[columnIndex];
     const isUtility = column.rowSelection || column.rowDragHandle || column.rowNumber;
-    const summaryContent = summaryValues.has(column.key) ? summaryValues.get(column.key) : summaryEmptyValue;
-    const content = column.rowNumber ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : summaryPending ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rvg-summary-skeleton" }) : summaryContent;
+    const hasSummaryValue = summaryValues.has(column.key);
+    const summaryContent = hasSummaryValue ? summaryValues.get(column.key) : summaryEmptyValue;
+    const showSummarySkeleton = Boolean(column.summary) && summaryPending;
+    const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rvg-summary-skeleton" }) : summaryContent;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
@@ -3125,7 +3128,7 @@ function Table({
         {
           ref: canvasRef,
           className: "rvg-canvas",
-          style: { width: viewport.width, height: effectiveHeight },
+          style: { width: viewport.width, height: renderHeight },
           onMouseMove: (event) => {
             if (columnDragRef.current) return;
             const rect = event.currentTarget.getBoundingClientRect();
@@ -3303,7 +3306,7 @@ function Table({
           onContextMenu: handleContextMenu
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-text-layer", style: { width: viewport.width, height: effectiveHeight, marginTop: -effectiveHeight }, onContextMenu: handleContextMenu, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-text-layer", style: { width: viewport.width, height: renderHeight, marginTop: -renderHeight }, onContextMenu: handleContextMenu, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
@@ -3327,7 +3330,7 @@ function Table({
         columns.map((column, columnIndex) => column.fixed === "left" ? renderHeaderTitle(columnIndex, metrics[columnIndex].left) : null),
         columns.map((column, columnIndex) => column.fixed === "right" ? renderHeaderTitle(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -effectiveHeight } })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
     ] }),
     hasSummaryRow && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
@@ -3691,7 +3694,7 @@ function Table({
     rows.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-empty", style: { top: bodyTop }, children: emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DefaultEmptyState, { label: labels.empty }) }),
     loading && hasCustomLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-custom-loading", "aria-label": labels.refreshing, children: loadingContent }),
     loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-initial-loading", style: { top: headerHeight }, "aria-label": labels.initialLoading, children: [
-      Array.from({ length: Math.ceil((effectiveHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
+      Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
         const left = getDisplayedColumnLeft(columnIndex);
         const columnWidth = metrics[columnIndex].width;
         if (left + columnWidth <= 0 || left >= viewport.width) return null;

package/dist/index.js

@@ -1410,7 +1410,7 @@ function Table({
   const hoveredRowIndexRef = useRef2(null);
   const [viewport, setViewport] = useState4({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
   const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState4(0);
-  const resolvedHeight = viewport.height || FALLBACK_HEIGHT;
+  const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
   const [scrollPosition, setScrollPosition] = useState4({ left: 0, top: 0 });
   const scrollRef = useRef2({ left: 0, top: 0 });
   const [selection, setSelection] = useControllableValue(selectedCell, defaultSelectedCell, onSelectedCellChange);
@@ -1558,14 +1558,15 @@ function Table({
   }, [columns, metrics]);
   const hasRowSelectionColumn = useMemo(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
-  const hasSummaryRow = useMemo(() => summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, summaryEnabled]);
+  const hasSummaryRow = useMemo(() => rows.length > 0 && summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, rows.length, summaryEnabled]);
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
   const bodyTop = headerHeight + topSummaryHeight;
   const bodyContentHeight = rows.length === 0 ? EMPTY_BODY_HEIGHT : contentHeight;
   const realContentHeight = bodyTop + bodyContentHeight + bottomSummaryHeight + (contentWidth > viewport.width ? horizontalScrollbarHeight : 0);
   const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
-  const bodyViewportHeight = Math.max(0, effectiveHeight - (fixedHeader ? headerHeight : 0) - topSummaryHeight);
+  const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
+  const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight : 0) - topSummaryHeight);
   const [summaryState, setSummaryState] = useState4(() => ({ columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
   const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.columns !== columns || summaryState.rows !== rows);
   const summaryValues = hasSummaryRow && summaryState.columns === columns && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
@@ -1702,7 +1703,7 @@ function Table({
     if (!canvas || viewport.width <= 0) return;
     const ratio = Math.min(window.devicePixelRatio || 1, 2);
     const physicalWidth = Math.round(viewport.width * ratio);
-    const physicalHeight = Math.round(effectiveHeight * ratio);
+    const physicalHeight = Math.round(renderHeight * ratio);
     if (canvas.width !== physicalWidth) canvas.width = physicalWidth;
     if (canvas.height !== physicalHeight) canvas.height = physicalHeight;
     const context = canvas.getContext("2d");
@@ -1725,8 +1726,8 @@ function Table({
     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: effectiveHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
-  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, effectiveHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, 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, headerHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
+  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -1835,14 +1836,14 @@ function Table({
         const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
         const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
         const verticalStart = fixedHeader ? bodyTop : 0;
-        if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) {
+        if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) {
           focus.style.display = "none";
         } else {
           const borderWidth = 2;
           const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
           const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
           const top = Math.round(Math.max(rawTop - borderWidth, verticalStart - 1));
-          const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
+          const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -1867,7 +1868,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, effectiveHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
   const locateColumn = useCallback2((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -2455,13 +2456,13 @@ function Table({
       const rowTop = (fixedHeader ? 0 : bodyTop) + rowIndex * rowHeight;
       const rowBottom = rowTop + rowHeight * (span?.rowSpan ?? 1);
       const cellWidth = getCellDisplayWidth(columnIndex, span?.colSpan ?? 1);
-      const visibleRowHeight = fixedHeader ? effectiveHeight - bodyTop : effectiveHeight;
+      const visibleRowHeight = fixedHeader ? renderHeight - bodyTop : renderHeight;
       if (rowTop < scroller.scrollTop) scroller.scrollTop = rowTop;
       if (rowBottom > scroller.scrollTop + visibleRowHeight) scroller.scrollTop = rowBottom - visibleRowHeight;
       if (columns[columnIndex].fixed === void 0 && metric.left < scroller.scrollLeft + fixedWidth) scroller.scrollLeft = Math.max(0, metric.left - fixedWidth);
       if (columns[columnIndex].fixed === void 0 && metric.left + cellWidth > scroller.scrollLeft + viewport.width - rightFixedWidth) scroller.scrollLeft = metric.left + cellWidth - viewport.width + rightFixedWidth;
     }
-  }, [beginEdit, bodyTop, columns, editing, effectiveHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
+  }, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
   const editorStyle = useMemo(() => {
     if (!editing) return void 0;
     const metric = metrics[editing.columnIndex];
@@ -2685,7 +2686,7 @@ function Table({
       type: "cell",
       ...cell,
       left: Math.min(Math.max(0, clientX - root.left), Math.max(0, viewport.width - 190)),
-      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 350))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, renderHeight - 350))
     });
     onCellContextMenu?.({ ...cell, row: rows[cell.rowIndex], clientX, clientY });
   };
@@ -2696,7 +2697,7 @@ function Table({
       type: "header",
       columnIndex,
       left: Math.min(Math.max(0, clientX - root.left), Math.max(0, viewport.width - 180)),
-      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 68))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, renderHeight - 68))
     });
   };
   const getRowDragOffset = (rowIndex) => {
@@ -2926,7 +2927,7 @@ function Table({
     const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
-    if (rawLeft <= horizontalStart || rawLeft > horizontalEnd || rawTop <= verticalStart || rawTop > effectiveHeight) return null;
+    if (rawLeft <= horizontalStart || rawLeft > horizontalEnd || rawTop <= verticalStart || rawTop > renderHeight) return null;
     return { left: rawLeft, top: rawTop, bounds };
   })();
   const selectionOutlineStyle = (() => {
@@ -2943,12 +2944,12 @@ function Table({
     const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
-    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) return null;
+    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) return null;
     const borderWidth = 2;
     const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
     const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
     const top = Math.round(Math.max(rawTop - borderWidth, verticalStart - 1));
-    const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
+    const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
     return {
       left,
       top,
@@ -3063,8 +3064,10 @@ function Table({
   const renderSummaryCell = (columnIndex, left) => {
     const column = columns[columnIndex];
     const isUtility = column.rowSelection || column.rowDragHandle || column.rowNumber;
-    const summaryContent = summaryValues.has(column.key) ? summaryValues.get(column.key) : summaryEmptyValue;
-    const content = column.rowNumber ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : summaryPending ? /* @__PURE__ */ jsx7("span", { className: "rvg-summary-skeleton" }) : summaryContent;
+    const hasSummaryValue = summaryValues.has(column.key);
+    const summaryContent = hasSummaryValue ? summaryValues.get(column.key) : summaryEmptyValue;
+    const showSummarySkeleton = Boolean(column.summary) && summaryPending;
+    const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ jsx7("span", { className: "rvg-summary-skeleton" }) : summaryContent;
     return /* @__PURE__ */ jsx7(
       "div",
       {
@@ -3095,7 +3098,7 @@ function Table({
         {
           ref: canvasRef,
           className: "rvg-canvas",
-          style: { width: viewport.width, height: effectiveHeight },
+          style: { width: viewport.width, height: renderHeight },
           onMouseMove: (event) => {
             if (columnDragRef.current) return;
             const rect = event.currentTarget.getBoundingClientRect();
@@ -3273,7 +3276,7 @@ function Table({
           onContextMenu: handleContextMenu
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "rvg-text-layer", style: { width: viewport.width, height: effectiveHeight, marginTop: -effectiveHeight }, onContextMenu: handleContextMenu, children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rvg-text-layer", style: { width: viewport.width, height: renderHeight, marginTop: -renderHeight }, onContextMenu: handleContextMenu, children: [
         /* @__PURE__ */ jsx7("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsxs7(
           "div",
           {
@@ -3297,7 +3300,7 @@ function Table({
         columns.map((column, columnIndex) => column.fixed === "left" ? renderHeaderTitle(columnIndex, metrics[columnIndex].left) : null),
         columns.map((column, columnIndex) => column.fixed === "right" ? renderHeaderTitle(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -effectiveHeight } })
+      /* @__PURE__ */ jsx7("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
     ] }),
     hasSummaryRow && /* @__PURE__ */ jsxs7(
       "div",
@@ -3661,7 +3664,7 @@ function Table({
     rows.length === 0 && !loading && /* @__PURE__ */ jsx7("div", { className: "rvg-empty", style: { top: bodyTop }, children: emptyContent ?? /* @__PURE__ */ jsx7(DefaultEmptyState, { label: labels.empty }) }),
     loading && hasCustomLoading && /* @__PURE__ */ jsx7("div", { className: "rvg-custom-loading", "aria-label": labels.refreshing, children: loadingContent }),
     loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ jsxs7("div", { className: "rvg-initial-loading", style: { top: headerHeight }, "aria-label": labels.initialLoading, children: [
-      Array.from({ length: Math.ceil((effectiveHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ jsx7("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
+      Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ jsx7("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
         const left = getDisplayedColumnLeft(columnIndex);
         const columnWidth = metrics[columnIndex].width;
         if (left + columnWidth <= 0 || left >= viewport.width) return null;

package/package.json

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