@lensui/lens-table 0.1.8 → 0.1.10

package/README.md

@@ -96,6 +96,7 @@ export function Example() {
 | `locale`                     | `'zh-CN' \| 'en-US' \| LocaleConfig`                                                 | `'zh-CN'`       | 国际化配置。传字符串时使用内置中英文文案；传对象时可通过`language` 指定语言，并通过 `labels` 覆盖文案。                             |
 | `borderless`                 | `boolean`                                                                          | `false`         | 是否弱化竖向边框。开启后隐藏单元格之间的竖线，但保留横向分隔线。                                                                        |
 | `verticalBorderless`         | `boolean`                                                                          | `false`         | 已兼容保留，建议改用 `borderless`。                                                                                                      |
+| `horizontalBorderless`       | `boolean`                                                                          | `false`         | 是否隐藏横向行分隔线及上下边框，同时保留纵向列分隔线。可与 `striped` 配合使用。                                                          |
 | `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

@@ -692,6 +692,18 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
   );
 }
 
+// src/core/typography.ts
+var CELL_FONT = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+function getCellBaselineOffset(context) {
+  context.save();
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText("Mg");
+  context.restore();
+  const ascent = metrics.fontBoundingBoxAscent;
+  const descent = metrics.fontBoundingBoxDescent;
+  return Number.isFinite(ascent) && Number.isFinite(descent) ? (ascent - descent) / 2 : 0;
+}
+
 // src/components/editors/TextEditor.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
@@ -705,6 +717,7 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
+        style: { font: CELL_FONT, textAlign: style.textAlign },
         value,
         autoFocus: true,
         onChange: (event) => onChange(event.target.value),
@@ -929,7 +942,7 @@ function ellipsizeText(context, text, maxWidth) {
   return `${text.slice(0, start)}${ellipsis}`;
 }
 function paintGrid(options) {
-  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
+  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
@@ -946,7 +959,8 @@ function paintGrid(options) {
   ctx.clearRect(0, 0, width, height);
   ctx.fillStyle = colors.background;
   ctx.fillRect(0, 0, width, height);
-  ctx.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+  ctx.font = CELL_FONT;
+  const cellBaselineOffset = getCellBaselineOffset(ctx);
   ctx.textBaseline = "middle";
   const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
   const rightFixedWidth = columns.reduce((value, column, index) => column.fixed === "right" ? value + metrics[index].width : value, 0);
@@ -1051,7 +1065,7 @@ function paintGrid(options) {
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless) ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
-        if (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1) {
+        if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
         if (rowSpan > 1) {
@@ -1145,9 +1159,10 @@ function paintGrid(options) {
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
             ctx.fillStyle = cellStyle?.color ?? colors.text;
-            ctx.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+            ctx.font = CELL_FONT;
+            ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
-            ctx.fillText(label, textX, y + cellHeight / 2);
+            ctx.fillText(label, textX, y + cellHeight / 2 + cellBaselineOffset);
             ctx.restore();
           }
         }
@@ -1191,7 +1206,7 @@ function paintGrid(options) {
       }
       ctx.fillStyle = colors.grid;
       if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
-      ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
+      if (!horizontalBorderless) ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
       const column = columns[columnIndex];
       if (headerLeafTop === 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber && !column.renderHeader && column.title) {
         ctx.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
@@ -1227,12 +1242,12 @@ function paintGrid(options) {
     ctx.fillRect(rightFixedLeft - 1, 0, 1, height);
   }
   ctx.fillStyle = colors.grid;
-  ctx.fillRect(0, 0, width, 1);
+  if (!horizontalBorderless) ctx.fillRect(0, 0, width, 1);
   if (!verticalBorderless) {
     ctx.fillRect(0, 0, 1, height);
     ctx.fillRect(width - 1, 0, 1, height);
   }
-  if (!options.suppressFrameBottomBorder) ctx.fillRect(0, height - 1, width, 1);
+  if (!horizontalBorderless && !options.suppressFrameBottomBorder) ctx.fillRect(0, height - 1, width, 1);
   if (selectionRange) {
     const rowStart = Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex);
     const rowEnd = Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex);
@@ -1536,6 +1551,7 @@ function TableInner({
   locale = "zh-CN",
   borderless,
   verticalBorderless,
+  horizontalBorderless = false,
   striped = false,
   highlight,
   cellSpans = [],
@@ -1698,7 +1714,8 @@ function TableInner({
   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 = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
+  const [availableHeight, setAvailableHeight] = (0, import_react5.useState)(FALLBACK_HEIGHT);
+  const resolvedHeight = typeof height === "number" ? height : availableHeight;
   const [scrollPosition, setScrollPosition] = (0, import_react5.useState)({ left: 0, top: 0 });
   const scrollRef = (0, import_react5.useRef)({ left: 0, top: 0 });
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
@@ -2215,8 +2232,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, headerHeight, headerLeafTop, headerLeafHeight, 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, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
-  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, 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, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, 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 });
+  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, 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]);
@@ -2375,7 +2392,15 @@ function TableInner({
   (0, import_react5.useLayoutEffect)(() => {
     const element = scrollerRef.current;
     if (!element) return;
+    const root = element.parentElement;
     const update = () => {
+      if (root && typeof height !== "number") {
+        const renderedHeight = root.style.height;
+        root.style.height = height;
+        const nextAvailableHeight = root.clientHeight || FALLBACK_HEIGHT;
+        root.style.height = renderedHeight;
+        setAvailableHeight(nextAvailableHeight);
+      }
       const measuredHeight = element.clientHeight || (typeof height === "number" ? height : FALLBACK_HEIGHT);
       setViewport({ width: element.clientWidth, height: measuredHeight });
       setHorizontalScrollbarHeight(Math.max(0, element.offsetHeight - element.clientHeight));
@@ -2387,6 +2412,7 @@ function TableInner({
     }
     const observer = new ResizeObserver(update);
     observer.observe(element);
+    if (root?.parentElement) observer.observe(root.parentElement);
     return () => observer.disconnect();
   }, [height]);
   (0, import_react5.useEffect)(() => {
@@ -3571,11 +3597,21 @@ function TableInner({
     const visibleRight = Math.min(cellLeft + cellWidth, horizontalEnd, viewport.width);
     const visibleTop = Math.max(cellTop, verticalStart);
     const visibleBottom = Math.min(cellTop + cellHeight, renderHeight);
+    if (column.editor && column.editor.type !== "text") {
+      return {
+        left: visibleLeft,
+        top: visibleTop,
+        width: Math.max(0, visibleRight - visibleLeft),
+        height: Math.max(0, visibleBottom - visibleTop)
+      };
+    }
     return {
-      left: visibleLeft,
-      top: visibleTop,
-      width: Math.max(0, visibleRight - visibleLeft),
-      height: Math.max(0, visibleBottom - visibleTop)
+      left: cellLeft,
+      top: cellTop,
+      width: cellWidth,
+      height: cellHeight,
+      textAlign: column.align ?? "left",
+      clipPath: `inset(${Math.max(0, visibleTop - cellTop)}px ${Math.max(0, cellLeft + cellWidth - visibleRight)}px ${Math.max(0, cellTop + cellHeight - visibleBottom)}px ${Math.max(0, visibleLeft - cellLeft)}px)`
     };
   }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
   const handleColumnPointerDown = (0, import_react5.useCallback)((event) => {
@@ -4451,7 +4487,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" : ""}${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", { className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-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",

package/dist/index.css

@@ -105,6 +105,9 @@
   content: "";
   pointer-events: none;
 }
+.rvg-root.is-horizontal-borderless .rvg-text-layer::before {
+  display: none;
+}
 .rvg-vertical-scrollbar,
 .rvg-horizontal-scrollbar {
   position: absolute;
@@ -294,6 +297,10 @@
 .rvg-summary-row.is-top {
   border-bottom: 1px solid var(--rvg-color-grid);
 }
+.rvg-root.is-horizontal-borderless .rvg-summary-row {
+  border-top: 0;
+  border-bottom: 0;
+}
 .rvg-summary-scroll-clip {
   position: absolute;
   top: 0;
@@ -746,6 +753,9 @@
   background: var(--rvg-color-header-bg);
   box-sizing: border-box;
 }
+.rvg-root.is-horizontal-borderless .rvg-header-group {
+  border-bottom: 0;
+}
 .rvg-header-group.is-leaf {
   z-index: 2;
 }
@@ -1644,15 +1654,17 @@
   box-sizing: border-box;
 }
 .rvg-native-editor.has-clear {
-  padding-right: 32px;
+  padding-right: 10px;
 }
 .rvg-native-editor input {
   min-width: 0;
   width: 100%;
   height: 100%;
+  margin: 0;
   padding: 0;
-  transform: translateY(-1px);
   flex: 1;
+  appearance: none;
+  border-radius: 0;
   border: 0;
   outline: 0;
   background: transparent;
@@ -2419,12 +2431,18 @@
 .rvg-root.is-vertical-borderless .rvg-loading-row span {
   border-right: 0;
 }
+.rvg-root.is-horizontal-borderless .rvg-loading-row span {
+  border-bottom: 0;
+}
 .rvg-root.is-striped .rvg-loading-row:nth-child(even) span {
   background: var(--rvg-color-stripe) !important;
 }
 .rvg-root.is-vertical-borderless .rvg-initial-loading::after {
   border-left: 0;
 }
+.rvg-root.is-horizontal-borderless .rvg-initial-loading::after {
+  border-bottom: 0;
+}
 .rvg-loading-row i {
   display: block;
   height: 7px;
@@ -2528,3 +2546,14 @@
     opacity: 1;
   }
 }
+.rvg-native-editor input[type=number] {
+  -moz-appearance: textfield;
+}
+.rvg-native-editor input::-webkit-inner-spin-button,
+.rvg-native-editor input::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.rvg-native-editor .rvg-clear-trigger {
+  background: var(--rvg-color-bg);
+}

package/dist/index.d.cts

@@ -347,6 +347,8 @@ interface TableProps<Row extends object> {
     borderless?: boolean;
     /** @deprecated Use borderless instead. */
     verticalBorderless?: boolean;
+    /** Hide horizontal row and frame separators while keeping vertical grid lines. */
+    horizontalBorderless?: boolean;
     /** Paint alternating row backgrounds. Pass a color string to customize the stripe color. */
     striped?: boolean | string;
     /** Visual highlight feedback configuration. All entries default to false. */

package/dist/index.d.ts

@@ -347,6 +347,8 @@ interface TableProps<Row extends object> {
     borderless?: boolean;
     /** @deprecated Use borderless instead. */
     verticalBorderless?: boolean;
+    /** Hide horizontal row and frame separators while keeping vertical grid lines. */
+    horizontalBorderless?: boolean;
     /** Paint alternating row backgrounds. Pass a color string to customize the stripe color. */
     striped?: boolean | string;
     /** Visual highlight feedback configuration. All entries default to false. */

package/dist/index.js

@@ -662,6 +662,18 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
   );
 }
 
+// src/core/typography.ts
+var CELL_FONT = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+function getCellBaselineOffset(context) {
+  context.save();
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText("Mg");
+  context.restore();
+  const ascent = metrics.fontBoundingBoxAscent;
+  const descent = metrics.fontBoundingBoxDescent;
+  return Number.isFinite(ascent) && Number.isFinite(descent) ? (ascent - descent) / 2 : 0;
+}
+
 // src/components/editors/TextEditor.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
@@ -675,6 +687,7 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
+        style: { font: CELL_FONT, textAlign: style.textAlign },
         value,
         autoFocus: true,
         onChange: (event) => onChange(event.target.value),
@@ -899,7 +912,7 @@ function ellipsizeText(context, text, maxWidth) {
   return `${text.slice(0, start)}${ellipsis}`;
 }
 function paintGrid(options) {
-  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
+  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
@@ -916,7 +929,8 @@ function paintGrid(options) {
   ctx.clearRect(0, 0, width, height);
   ctx.fillStyle = colors.background;
   ctx.fillRect(0, 0, width, height);
-  ctx.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+  ctx.font = CELL_FONT;
+  const cellBaselineOffset = getCellBaselineOffset(ctx);
   ctx.textBaseline = "middle";
   const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
   const rightFixedWidth = columns.reduce((value, column, index) => column.fixed === "right" ? value + metrics[index].width : value, 0);
@@ -1021,7 +1035,7 @@ function paintGrid(options) {
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless) ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
-        if (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1) {
+        if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
         if (rowSpan > 1) {
@@ -1115,9 +1129,10 @@ function paintGrid(options) {
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
             ctx.fillStyle = cellStyle?.color ?? colors.text;
-            ctx.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+            ctx.font = CELL_FONT;
+            ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
-            ctx.fillText(label, textX, y + cellHeight / 2);
+            ctx.fillText(label, textX, y + cellHeight / 2 + cellBaselineOffset);
             ctx.restore();
           }
         }
@@ -1161,7 +1176,7 @@ function paintGrid(options) {
       }
       ctx.fillStyle = colors.grid;
       if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
-      ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
+      if (!horizontalBorderless) ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
       const column = columns[columnIndex];
       if (headerLeafTop === 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber && !column.renderHeader && column.title) {
         ctx.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
@@ -1197,12 +1212,12 @@ function paintGrid(options) {
     ctx.fillRect(rightFixedLeft - 1, 0, 1, height);
   }
   ctx.fillStyle = colors.grid;
-  ctx.fillRect(0, 0, width, 1);
+  if (!horizontalBorderless) ctx.fillRect(0, 0, width, 1);
   if (!verticalBorderless) {
     ctx.fillRect(0, 0, 1, height);
     ctx.fillRect(width - 1, 0, 1, height);
   }
-  if (!options.suppressFrameBottomBorder) ctx.fillRect(0, height - 1, width, 1);
+  if (!horizontalBorderless && !options.suppressFrameBottomBorder) ctx.fillRect(0, height - 1, width, 1);
   if (selectionRange) {
     const rowStart = Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex);
     const rowEnd = Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex);
@@ -1506,6 +1521,7 @@ function TableInner({
   locale = "zh-CN",
   borderless,
   verticalBorderless,
+  horizontalBorderless = false,
   striped = false,
   highlight,
   cellSpans = [],
@@ -1668,7 +1684,8 @@ function TableInner({
   const hoveredRowIndexRef = useRef2(null);
   const [viewport, setViewport] = useState4({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
   const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState4(0);
-  const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
+  const [availableHeight, setAvailableHeight] = useState4(FALLBACK_HEIGHT);
+  const resolvedHeight = typeof height === "number" ? height : availableHeight;
   const [scrollPosition, setScrollPosition] = useState4({ left: 0, top: 0 });
   const scrollRef = useRef2({ left: 0, top: 0 });
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
@@ -2185,8 +2202,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, headerHeight, headerLeafTop, headerLeafHeight, 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, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
-  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, 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, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, 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 });
+  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -2345,7 +2362,15 @@ function TableInner({
   useLayoutEffect2(() => {
     const element = scrollerRef.current;
     if (!element) return;
+    const root = element.parentElement;
     const update = () => {
+      if (root && typeof height !== "number") {
+        const renderedHeight = root.style.height;
+        root.style.height = height;
+        const nextAvailableHeight = root.clientHeight || FALLBACK_HEIGHT;
+        root.style.height = renderedHeight;
+        setAvailableHeight(nextAvailableHeight);
+      }
       const measuredHeight = element.clientHeight || (typeof height === "number" ? height : FALLBACK_HEIGHT);
       setViewport({ width: element.clientWidth, height: measuredHeight });
       setHorizontalScrollbarHeight(Math.max(0, element.offsetHeight - element.clientHeight));
@@ -2357,6 +2382,7 @@ function TableInner({
     }
     const observer = new ResizeObserver(update);
     observer.observe(element);
+    if (root?.parentElement) observer.observe(root.parentElement);
     return () => observer.disconnect();
   }, [height]);
   useEffect2(() => {
@@ -3541,11 +3567,21 @@ function TableInner({
     const visibleRight = Math.min(cellLeft + cellWidth, horizontalEnd, viewport.width);
     const visibleTop = Math.max(cellTop, verticalStart);
     const visibleBottom = Math.min(cellTop + cellHeight, renderHeight);
+    if (column.editor && column.editor.type !== "text") {
+      return {
+        left: visibleLeft,
+        top: visibleTop,
+        width: Math.max(0, visibleRight - visibleLeft),
+        height: Math.max(0, visibleBottom - visibleTop)
+      };
+    }
     return {
-      left: visibleLeft,
-      top: visibleTop,
-      width: Math.max(0, visibleRight - visibleLeft),
-      height: Math.max(0, visibleBottom - visibleTop)
+      left: cellLeft,
+      top: cellTop,
+      width: cellWidth,
+      height: cellHeight,
+      textAlign: column.align ?? "left",
+      clipPath: `inset(${Math.max(0, visibleTop - cellTop)}px ${Math.max(0, cellLeft + cellWidth - visibleRight)}px ${Math.max(0, cellTop + cellHeight - visibleBottom)}px ${Math.max(0, visibleLeft - cellLeft)}px)`
     };
   }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
   const handleColumnPointerDown = useCallback2((event) => {
@@ -4421,7 +4457,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" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  return /* @__PURE__ */ jsxs7("div", { className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-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",

package/package.json

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