@lensui/lens-table 0.1.9 → 0.1.11

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` 定位；横向合并会限制在同一个固定列分区内，工具列不会参与合并。 |
@@ -578,6 +579,7 @@ const columns: GridColumn<Row>[] = [
     '--rvg-color-bg': '#0f172a',
     '--rvg-color-text': '#e5e7eb',
     '--rvg-color-grid': '#334155',
+    '--rvg-font-size-body': '12px',
   } as React.CSSProperties}
 />
 ```
@@ -586,6 +588,7 @@ const columns: GridColumn<Row>[] = [
 
 | 变量                                | 说明                                                                               |
 | ----------------------------------- | ---------------------------------------------------------------------------------- |
+| `--rvg-font-size-body`            | 数据正文及单元格编辑器字号，默认 `13px`；不影响表头字号。                         |
 | `--rvg-color-bg`                  | 表格背景色。                                                                       |
 | `--rvg-color-header-bg`           | 表头背景色。                                                                       |
 | `--rvg-color-text`                | 主文本颜色。                                                                       |

package/dist/index.cjs

@@ -705,6 +705,7 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
+        style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
         value,
         autoFocus: true,
         onChange: (event) => onChange(event.target.value),
@@ -893,6 +894,18 @@ function hitTestColumn(metrics, contentX) {
   return index < metrics.length ? index : -1;
 }
 
+// src/core/typography.ts
+var createCellFont = (fontSize = 13) => `${fontSize}px 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/core/render.ts
 var getCellCoordKey = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
 var COLORS = {
@@ -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, bodyFontSize, 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 = createCellFont(bodyFontSize);
+  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 = createCellFont(bodyFontSize);
+            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);
@@ -1453,6 +1468,10 @@ var waitForPaint = () => new Promise((resolve) => {
 function readThemeColor(styles, name, fallback) {
   return styles.getPropertyValue(name).trim() || fallback;
 }
+function readThemePixel(styles, name, fallback) {
+  const value = Number.parseFloat(styles.getPropertyValue(name));
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
 function getDefaultRowKey(row, index) {
   const id = row.id;
   return typeof id === "string" || typeof id === "number" ? id : index;
@@ -1536,6 +1555,7 @@ function TableInner({
   locale = "zh-CN",
   borderless,
   verticalBorderless,
+  horizontalBorderless = false,
   striped = false,
   highlight,
   cellSpans = [],
@@ -2196,6 +2216,7 @@ function TableInner({
     const context = canvas.getContext("2d");
     if (!context) return;
     const themeStyles = getComputedStyle(canvas);
+    const bodyFontSize = readThemePixel(themeStyles, "--rvg-font-size-body", 13);
     const themeColors = {
       background: readThemeColor(themeStyles, "--rvg-color-bg", "#ffffff"),
       header: readThemeColor(themeStyles, "--rvg-color-header-bg", "#f5f6f7"),
@@ -2216,8 +2237,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, bodyFontSize, 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]);
@@ -3581,11 +3602,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) => {
@@ -4461,7 +4492,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",
@@ -4521,7 +4552,10 @@ function TableInner({
                 } else {
                   const label = getCellLabel(cell.rowIndex, cell.columnIndex);
                   const context = event.currentTarget.getContext("2d");
-                  if (context) context.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+                  if (context) {
+                    const bodyFontSize = readThemePixel(getComputedStyle(event.currentTarget), "--rvg-font-size-body", 13);
+                    context.font = `${bodyFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+                  }
                   const truncated = Boolean(label && context && context.measureText(label).width + 20 > metrics[cell.columnIndex].width);
                   if (!label || !tooltipConfig.cell && !truncated) {
                     showCellTooltipAfterDelay(null);

package/dist/index.css

@@ -1,5 +1,6 @@
 /* src/style.css */
 :root {
+  --rvg-font-size-body: 13px;
   --rvg-color-bg: #fff;
   --rvg-color-header-bg: #f5f6f7;
   --rvg-color-grid: #e3e6e8;
@@ -105,6 +106,9 @@
   content: "";
   pointer-events: none;
 }
+.rvg-root.is-horizontal-borderless .rvg-text-layer::before {
+  display: none;
+}
 .rvg-vertical-scrollbar,
 .rvg-horizontal-scrollbar {
   position: absolute;
@@ -202,11 +206,12 @@
   padding: 0 10px;
   overflow: hidden;
   color: var(--rvg-color-text);
-  font:
-    13px Inter,
+  font-family:
+    Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  font-size: 13px;
   white-space: nowrap;
   user-select: text;
   pointer-events: auto;
@@ -217,6 +222,7 @@
   cursor: default;
 }
 .rvg-cell-text {
+  font-size: var(--rvg-font-size-body);
   transition: transform 140ms ease, opacity 100ms ease;
 }
 .rvg-row-drop-settling .rvg-cell-text {
@@ -248,11 +254,12 @@
   align-items: center;
   overflow: hidden;
   color: var(--rvg-color-text);
-  font:
-    13px Inter,
+  font-family:
+    Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  font-size: var(--rvg-font-size-body);
   white-space: nowrap;
   pointer-events: none;
   box-sizing: border-box;
@@ -294,6 +301,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 +757,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;
 }
@@ -1577,7 +1591,7 @@
   background: var(--rvg-color-bg);
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -1625,7 +1639,7 @@
   background: transparent;
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -1644,21 +1658,23 @@
   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;
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -1891,7 +1907,7 @@
   background: var(--rvg-color-bg);
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -2419,12 +2435,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 +2550,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

@@ -675,6 +675,7 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
+        style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
         value,
         autoFocus: true,
         onChange: (event) => onChange(event.target.value),
@@ -863,6 +864,18 @@ function hitTestColumn(metrics, contentX) {
   return index < metrics.length ? index : -1;
 }
 
+// src/core/typography.ts
+var createCellFont = (fontSize = 13) => `${fontSize}px 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/core/render.ts
 var getCellCoordKey = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
 var COLORS = {
@@ -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, bodyFontSize, 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 = createCellFont(bodyFontSize);
+  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 = createCellFont(bodyFontSize);
+            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);
@@ -1423,6 +1438,10 @@ var waitForPaint = () => new Promise((resolve) => {
 function readThemeColor(styles, name, fallback) {
   return styles.getPropertyValue(name).trim() || fallback;
 }
+function readThemePixel(styles, name, fallback) {
+  const value = Number.parseFloat(styles.getPropertyValue(name));
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
 function getDefaultRowKey(row, index) {
   const id = row.id;
   return typeof id === "string" || typeof id === "number" ? id : index;
@@ -1506,6 +1525,7 @@ function TableInner({
   locale = "zh-CN",
   borderless,
   verticalBorderless,
+  horizontalBorderless = false,
   striped = false,
   highlight,
   cellSpans = [],
@@ -2166,6 +2186,7 @@ function TableInner({
     const context = canvas.getContext("2d");
     if (!context) return;
     const themeStyles = getComputedStyle(canvas);
+    const bodyFontSize = readThemePixel(themeStyles, "--rvg-font-size-body", 13);
     const themeColors = {
       background: readThemeColor(themeStyles, "--rvg-color-bg", "#ffffff"),
       header: readThemeColor(themeStyles, "--rvg-color-header-bg", "#f5f6f7"),
@@ -2186,8 +2207,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, bodyFontSize, 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]);
@@ -3551,11 +3572,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) => {
@@ -4431,7 +4462,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",
@@ -4491,7 +4522,10 @@ function TableInner({
                 } else {
                   const label = getCellLabel(cell.rowIndex, cell.columnIndex);
                   const context = event.currentTarget.getContext("2d");
-                  if (context) context.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+                  if (context) {
+                    const bodyFontSize = readThemePixel(getComputedStyle(event.currentTarget), "--rvg-font-size-body", 13);
+                    context.font = `${bodyFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+                  }
                   const truncated = Boolean(label && context && context.measureText(label).width + 20 > metrics[cell.columnIndex].width);
                   if (!label || !tooltipConfig.cell && !truncated) {
                     showCellTooltipAfterDelay(null);

package/package.json

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