@lensui/lens-table 0.1.0 → 0.1.1

package/README.md

@@ -89,6 +89,7 @@ export function Example() {
 | `rowKey`                     | `keyof Row \| ((row, index) => string \| number)`                                    | `id`            | 行唯一标识。默认读取每行的`id` 字段；如果数据不是 `id` 主键，请显式传入字段名或函数。                                               |
 | `width`                      | `number \| string`                                                                  | `100%`          | 表格宽度。数字按像素处理，字符串可传`100%`、`80vw` 等。                                                                             |
 | `height`                     | `number \| string`                                                                  | `100%`          | 表格高度。默认继承父容器高度；如果父容器没有可计算高度，则回落到`480px`。                                                             |
+| `autoHeight`                 | `boolean`                                                                          | `false`         | 是否按真实内容高度收缩表格。开启后数据较少时使用 `表头 + 行数 * 行高 + 合计行` 的高度，数据较多时不超过 `height`。                  |
 | `rowHeight`                  | `number`                                                                           | `40`            | 每行高度，固定行高用于高性能虚拟滚动。                                                                                                  |
 | `headerHeight`               | `number`                                                                           | `44`            | 表头高度，单位 px。                                                                                                                     |
 | `fixedHeader`                | `boolean`                                                                          | `true`          | 表头是否固定在顶部。                                                                                                                    |

package/dist/index.cjs

@@ -333,6 +333,7 @@ function LoadingSpinnerIcon() {
 // src/components/editors/ChoiceEditor.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCancel }) {
+  const editorStyle = typeof style.width === "number" ? { ...style, width: Math.max(0, style.width - 1) } : style;
   const collection = (0, import_select.createListCollection)({
     items: options,
     itemToValue: (item) => item.value,
@@ -342,7 +343,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
     import_select.Select.Root,
     {
       className: "rvg-choice-editor",
-      style,
+      style: editorStyle,
       collection,
       value: value ? [value] : [],
       defaultOpen: true,
@@ -801,14 +802,38 @@ function getMinimumColumnWidth(column, columnDraggable = false) {
   if (column.rowSelection || column.rowNumber) return 44;
   return 60;
 }
-function buildColumnMetrics(columns, columnDraggable = false) {
+function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
+  const options = typeof columnDraggableOrOptions === "boolean" ? { columnDraggable: columnDraggableOrOptions } : columnDraggableOrOptions;
+  const columnDraggable = options.columnDraggable ?? false;
   let left = 0;
-  return columns.map((column) => {
+  const metrics = columns.map((column) => {
     const width = Math.max(getMinimumColumnWidth(column, columnDraggable), column.width ?? DEFAULT_COLUMN_WIDTH);
     const metric = { left, width, right: left + width };
     left += width;
     return metric;
   });
+  const viewportWidth = options.viewportWidth ?? 0;
+  if (viewportWidth <= left || columns.length === 0) return metrics;
+  const stretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right" && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const targets = stretchable.length > 0 ? stretchable : columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right");
+  if (targets.length === 0) return metrics;
+  const extra = viewportWidth - left;
+  const baseTotal = targets.reduce((sum, { index }) => sum + metrics[index].width, 0);
+  let assigned = 0;
+  const targetIndexSet = new Set(targets.map(({ index }) => index));
+  const nextWidths = metrics.map((metric, index) => {
+    if (!targetIndexSet.has(index)) return metric.width;
+    const isLastTarget = index === targets[targets.length - 1].index;
+    const addition = isLastTarget ? extra - assigned : Math.floor(extra * (metric.width / baseTotal));
+    assigned += addition;
+    return metric.width + addition;
+  });
+  left = 0;
+  return nextWidths.map((width) => {
+    const metric = { left, width, right: left + width };
+    left += width;
+    return metric;
+  });
 }
 function lowerBound(metrics, value) {
   let low = 0;
@@ -1229,6 +1254,7 @@ function useControllableValue(value, defaultValue, onChange) {
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
+var EMPTY_BODY_HEIGHT = 240;
 var VIRTUAL_OVERSCAN = 4;
 var TOOLTIP_DELAY = 1e3;
 var SUMMARY_CHUNK_SIZE = 5e3;
@@ -1302,6 +1328,7 @@ function Table({
   rowKey,
   width = "100%",
   height = "100%",
+  autoHeight = false,
   rowHeight = 36,
   headerHeight = 40,
   fixedHeader = true,
@@ -1544,7 +1571,7 @@ function Table({
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
-  const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, columnDraggable), [columnDraggable, columns]);
+  const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, { columnDraggable, viewportWidth: viewport.width }), [columnDraggable, columns, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
   const fixedWidth = (0, import_react5.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "left" ? Math.max(width2, metrics[index].right) : width2, 0), [columns, metrics]);
@@ -1565,7 +1592,10 @@ function Table({
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
   const bodyTop = headerHeight + topSummaryHeight;
-  const bodyViewportHeight = Math.max(0, resolvedHeight - (fixedHeader ? headerHeight : 0) - 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 [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();
@@ -1701,9 +1731,8 @@ function Table({
     const canvas = canvasRef.current;
     if (!canvas || viewport.width <= 0) return;
     const ratio = Math.min(window.devicePixelRatio || 1, 2);
-    const displayHeight = resolvedHeight;
     const physicalWidth = Math.round(viewport.width * ratio);
-    const physicalHeight = Math.round(displayHeight * ratio);
+    const physicalHeight = Math.round(effectiveHeight * ratio);
     if (canvas.width !== physicalWidth) canvas.width = physicalWidth;
     if (canvas.height !== physicalHeight) canvas.height = physicalHeight;
     const context = canvas.getContext("2d");
@@ -1726,8 +1755,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: resolvedHeight, 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, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, resolvedHeight, rowDragPreview, rowHeight, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+    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]);
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -1836,14 +1865,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 >= resolvedHeight) {
+        if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) {
           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, resolvedHeight));
+          const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -1868,7 +1897,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, resolvedHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, effectiveHeight, 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;
@@ -2456,13 +2485,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 ? resolvedHeight - bodyTop : resolvedHeight;
+      const visibleRowHeight = fixedHeader ? effectiveHeight - bodyTop : effectiveHeight;
       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, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, resolvedHeight, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
+  }, [beginEdit, bodyTop, columns, editing, effectiveHeight, 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];
@@ -2686,7 +2715,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, resolvedHeight - 350))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 350))
     });
     onCellContextMenu?.({ ...cell, row: rows[cell.rowIndex], clientX, clientY });
   };
@@ -2697,7 +2726,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, resolvedHeight - 68))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 68))
     });
   };
   const getRowDragOffset = (rowIndex) => {
@@ -2927,7 +2956,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 > resolvedHeight) return null;
+    if (rawLeft <= horizontalStart || rawLeft > horizontalEnd || rawTop <= verticalStart || rawTop > effectiveHeight) return null;
     return { left: rawLeft, top: rawTop, bounds };
   })();
   const selectionOutlineStyle = (() => {
@@ -2944,12 +2973,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 >= resolvedHeight) return null;
+    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) 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, resolvedHeight));
+    const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
     return {
       left,
       top,
@@ -3082,8 +3111,8 @@ function Table({
   };
   const rootStyle = {
     width,
-    height,
-    minHeight: typeof height === "number" ? void 0 : FALLBACK_HEIGHT,
+    height: autoHeight ? effectiveHeight : height,
+    minHeight: autoHeight || typeof height === "number" ? void 0 : FALLBACK_HEIGHT,
     ...stripedColor ? { "--rvg-color-stripe": stripedColor } : null,
     ...style
   };
@@ -3096,7 +3125,7 @@ function Table({
         {
           ref: canvasRef,
           className: "rvg-canvas",
-          style: { width: viewport.width, height: resolvedHeight },
+          style: { width: viewport.width, height: effectiveHeight },
           onMouseMove: (event) => {
             if (columnDragRef.current) return;
             const rect = event.currentTarget.getBoundingClientRect();
@@ -3274,7 +3303,7 @@ function Table({
           onContextMenu: handleContextMenu
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-text-layer", style: { width: viewport.width, height: resolvedHeight, marginTop: -resolvedHeight }, onContextMenu: handleContextMenu, children: [
+      /* @__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.jsx)("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
@@ -3298,7 +3327,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: -resolvedHeight } })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -effectiveHeight } })
     ] }),
     hasSummaryRow && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
@@ -3659,10 +3688,10 @@ function Table({
       ] })
     ] }),
     renderEditor(),
-    rows.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-empty", children: emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DefaultEmptyState, { label: labels.empty }) }),
+    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((resolvedHeight - 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((effectiveHeight - 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.d.cts

@@ -282,6 +282,8 @@ interface TableProps<Row extends object> {
     width?: number | string;
     /** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
     height?: number | string;
+    /** Shrink the grid to its real content height when there are fewer rows than the configured height can display. */
+    autoHeight?: boolean;
     rowHeight?: number;
     headerHeight?: number;
     fixedHeader?: boolean;
@@ -346,8 +348,13 @@ interface ViewportRange {
     columnEnd: number;
 }
 
-declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
+declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
 
+type LayoutColumn<Row> = GridColumn<Row> & {
+    rowSelection?: boolean;
+    rowDragHandle?: boolean;
+    rowNumber?: boolean;
+};
 /**
  * Cached horizontal geometry for one column.
  *
@@ -360,11 +367,15 @@ interface ColumnMetric {
     width: number;
     right: number;
 }
+interface BuildColumnMetricsOptions {
+    columnDraggable?: boolean;
+    viewportWidth?: number;
+}
 /**
  * Build cumulative column positions used by both canvas painting and DOM
  * overlay placement.
  */
-declare function buildColumnMetrics<Row>(columns: GridColumn<Row>[], columnDraggable?: boolean): ColumnMetric[];
+declare function buildColumnMetrics<Row>(columns: LayoutColumn<Row>[], columnDraggableOrOptions?: boolean | BuildColumnMetricsOptions): ColumnMetric[];
 /**
  * Compute the row and column slice that should be painted for the current
  * viewport.

package/dist/index.d.ts

@@ -282,6 +282,8 @@ interface TableProps<Row extends object> {
     width?: number | string;
     /** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
     height?: number | string;
+    /** Shrink the grid to its real content height when there are fewer rows than the configured height can display. */
+    autoHeight?: boolean;
     rowHeight?: number;
     headerHeight?: number;
     fixedHeader?: boolean;
@@ -346,8 +348,13 @@ interface ViewportRange {
     columnEnd: number;
 }
 
-declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
+declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
 
+type LayoutColumn<Row> = GridColumn<Row> & {
+    rowSelection?: boolean;
+    rowDragHandle?: boolean;
+    rowNumber?: boolean;
+};
 /**
  * Cached horizontal geometry for one column.
  *
@@ -360,11 +367,15 @@ interface ColumnMetric {
     width: number;
     right: number;
 }
+interface BuildColumnMetricsOptions {
+    columnDraggable?: boolean;
+    viewportWidth?: number;
+}
 /**
  * Build cumulative column positions used by both canvas painting and DOM
  * overlay placement.
  */
-declare function buildColumnMetrics<Row>(columns: GridColumn<Row>[], columnDraggable?: boolean): ColumnMetric[];
+declare function buildColumnMetrics<Row>(columns: LayoutColumn<Row>[], columnDraggableOrOptions?: boolean | BuildColumnMetricsOptions): ColumnMetric[];
 /**
  * Compute the row and column slice that should be painted for the current
  * viewport.

package/dist/index.js

@@ -303,6 +303,7 @@ function LoadingSpinnerIcon() {
 // src/components/editors/ChoiceEditor.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCancel }) {
+  const editorStyle = typeof style.width === "number" ? { ...style, width: Math.max(0, style.width - 1) } : style;
   const collection = createListCollection({
     items: options,
     itemToValue: (item) => item.value,
@@ -312,7 +313,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
     Select.Root,
     {
       className: "rvg-choice-editor",
-      style,
+      style: editorStyle,
       collection,
       value: value ? [value] : [],
       defaultOpen: true,
@@ -771,14 +772,38 @@ function getMinimumColumnWidth(column, columnDraggable = false) {
   if (column.rowSelection || column.rowNumber) return 44;
   return 60;
 }
-function buildColumnMetrics(columns, columnDraggable = false) {
+function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
+  const options = typeof columnDraggableOrOptions === "boolean" ? { columnDraggable: columnDraggableOrOptions } : columnDraggableOrOptions;
+  const columnDraggable = options.columnDraggable ?? false;
   let left = 0;
-  return columns.map((column) => {
+  const metrics = columns.map((column) => {
     const width = Math.max(getMinimumColumnWidth(column, columnDraggable), column.width ?? DEFAULT_COLUMN_WIDTH);
     const metric = { left, width, right: left + width };
     left += width;
     return metric;
   });
+  const viewportWidth = options.viewportWidth ?? 0;
+  if (viewportWidth <= left || columns.length === 0) return metrics;
+  const stretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right" && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const targets = stretchable.length > 0 ? stretchable : columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right");
+  if (targets.length === 0) return metrics;
+  const extra = viewportWidth - left;
+  const baseTotal = targets.reduce((sum, { index }) => sum + metrics[index].width, 0);
+  let assigned = 0;
+  const targetIndexSet = new Set(targets.map(({ index }) => index));
+  const nextWidths = metrics.map((metric, index) => {
+    if (!targetIndexSet.has(index)) return metric.width;
+    const isLastTarget = index === targets[targets.length - 1].index;
+    const addition = isLastTarget ? extra - assigned : Math.floor(extra * (metric.width / baseTotal));
+    assigned += addition;
+    return metric.width + addition;
+  });
+  left = 0;
+  return nextWidths.map((width) => {
+    const metric = { left, width, right: left + width };
+    left += width;
+    return metric;
+  });
 }
 function lowerBound(metrics, value) {
   let low = 0;
@@ -1199,6 +1224,7 @@ function useControllableValue(value, defaultValue, onChange) {
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
+var EMPTY_BODY_HEIGHT = 240;
 var VIRTUAL_OVERSCAN = 4;
 var TOOLTIP_DELAY = 1e3;
 var SUMMARY_CHUNK_SIZE = 5e3;
@@ -1272,6 +1298,7 @@ function Table({
   rowKey,
   width = "100%",
   height = "100%",
+  autoHeight = false,
   rowHeight = 36,
   headerHeight = 40,
   fixedHeader = true,
@@ -1514,7 +1541,7 @@ function Table({
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
-  const metrics = useMemo(() => buildColumnMetrics(columns, columnDraggable), [columnDraggable, columns]);
+  const metrics = useMemo(() => buildColumnMetrics(columns, { columnDraggable, viewportWidth: viewport.width }), [columnDraggable, columns, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
   const fixedWidth = useMemo(() => columns.reduce((width2, column, index) => column.fixed === "left" ? Math.max(width2, metrics[index].right) : width2, 0), [columns, metrics]);
@@ -1535,7 +1562,10 @@ function Table({
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
   const bodyTop = headerHeight + topSummaryHeight;
-  const bodyViewportHeight = Math.max(0, resolvedHeight - (fixedHeader ? headerHeight : 0) - 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 [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();
@@ -1671,9 +1701,8 @@ function Table({
     const canvas = canvasRef.current;
     if (!canvas || viewport.width <= 0) return;
     const ratio = Math.min(window.devicePixelRatio || 1, 2);
-    const displayHeight = resolvedHeight;
     const physicalWidth = Math.round(viewport.width * ratio);
-    const physicalHeight = Math.round(displayHeight * ratio);
+    const physicalHeight = Math.round(effectiveHeight * ratio);
     if (canvas.width !== physicalWidth) canvas.width = physicalWidth;
     if (canvas.height !== physicalHeight) canvas.height = physicalHeight;
     const context = canvas.getContext("2d");
@@ -1696,8 +1725,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: resolvedHeight, 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, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, resolvedHeight, rowDragPreview, rowHeight, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+    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]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -1806,14 +1835,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 >= resolvedHeight) {
+        if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) {
           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, resolvedHeight));
+          const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -1838,7 +1867,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, resolvedHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, effectiveHeight, 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;
@@ -2426,13 +2455,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 ? resolvedHeight - bodyTop : resolvedHeight;
+      const visibleRowHeight = fixedHeader ? effectiveHeight - bodyTop : effectiveHeight;
       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, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, resolvedHeight, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
+  }, [beginEdit, bodyTop, columns, editing, effectiveHeight, 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];
@@ -2656,7 +2685,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, resolvedHeight - 350))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 350))
     });
     onCellContextMenu?.({ ...cell, row: rows[cell.rowIndex], clientX, clientY });
   };
@@ -2667,7 +2696,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, resolvedHeight - 68))
+      top: Math.min(Math.max(0, clientY - root.top), Math.max(0, effectiveHeight - 68))
     });
   };
   const getRowDragOffset = (rowIndex) => {
@@ -2897,7 +2926,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 > resolvedHeight) return null;
+    if (rawLeft <= horizontalStart || rawLeft > horizontalEnd || rawTop <= verticalStart || rawTop > effectiveHeight) return null;
     return { left: rawLeft, top: rawTop, bounds };
   })();
   const selectionOutlineStyle = (() => {
@@ -2914,12 +2943,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 >= resolvedHeight) return null;
+    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= effectiveHeight) 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, resolvedHeight));
+    const bottom = Math.round(Math.min(rawBottom + 1, effectiveHeight));
     return {
       left,
       top,
@@ -3052,8 +3081,8 @@ function Table({
   };
   const rootStyle = {
     width,
-    height,
-    minHeight: typeof height === "number" ? void 0 : FALLBACK_HEIGHT,
+    height: autoHeight ? effectiveHeight : height,
+    minHeight: autoHeight || typeof height === "number" ? void 0 : FALLBACK_HEIGHT,
     ...stripedColor ? { "--rvg-color-stripe": stripedColor } : null,
     ...style
   };
@@ -3066,7 +3095,7 @@ function Table({
         {
           ref: canvasRef,
           className: "rvg-canvas",
-          style: { width: viewport.width, height: resolvedHeight },
+          style: { width: viewport.width, height: effectiveHeight },
           onMouseMove: (event) => {
             if (columnDragRef.current) return;
             const rect = event.currentTarget.getBoundingClientRect();
@@ -3244,7 +3273,7 @@ function Table({
           onContextMenu: handleContextMenu
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "rvg-text-layer", style: { width: viewport.width, height: resolvedHeight, marginTop: -resolvedHeight }, onContextMenu: handleContextMenu, children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rvg-text-layer", style: { width: viewport.width, height: effectiveHeight, marginTop: -effectiveHeight }, onContextMenu: handleContextMenu, children: [
         /* @__PURE__ */ jsx7("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsxs7(
           "div",
           {
@@ -3268,7 +3297,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: -resolvedHeight } })
+      /* @__PURE__ */ jsx7("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -effectiveHeight } })
     ] }),
     hasSummaryRow && /* @__PURE__ */ jsxs7(
       "div",
@@ -3629,10 +3658,10 @@ function Table({
       ] })
     ] }),
     renderEditor(),
-    rows.length === 0 && !loading && /* @__PURE__ */ jsx7("div", { className: "rvg-empty", children: emptyContent ?? /* @__PURE__ */ jsx7(DefaultEmptyState, { label: labels.empty }) }),
+    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((resolvedHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ jsx7("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
+      Array.from({ length: Math.ceil((effectiveHeight - 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.0",
+  "version": "0.1.1",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",