@lensui/lens-table 0.1.11 → 0.1.13

package/README.md

@@ -89,7 +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`。数据较少时默认按真实内容高度收缩，数据较多时不超过该高度。 |
-| `layout`                     | `{ rowHeight?: number; headerHeight?: number }`                                    | `{ rowHeight: 36, headerHeight: 40 }` | 表格布局尺寸配置。推荐把行高、表头高度等样式相关参数放在这里；自定义多行表头会以 `headerHeight` 为最小高度自动撑开。              |
+| `layout`                     | `{ rowHeight?: number; headerHeight?: number; headerActionSize?: number }`          | `{ rowHeight: 36, headerHeight: 40, headerActionSize: 14 }` | 表格布局尺寸配置。`headerActionSize` 同步控制表头搜索、排序和拖拽图标的尺寸、占位及点击区域；自定义多行表头会以 `headerHeight` 为最小高度自动撑开。 |
 | `rowHeight`                  | `number`                                                                           | `36`            | 已兼容保留，建议改用 `layout.rowHeight`。                                                                                                  |
 | `headerHeight`               | `number`                                                                           | `40`            | 已兼容保留，建议改用 `layout.headerHeight`。                                                                                              |
 | `fixedHeader`                | `boolean`                                                                          | `true`          | 表头是否固定在顶部。                                                                                                                    |
@@ -97,6 +97,7 @@ export function Example() {
 | `borderless`                 | `boolean`                                                                          | `false`         | 是否弱化竖向边框。开启后隐藏单元格之间的竖线，但保留横向分隔线。                                                                        |
 | `verticalBorderless`         | `boolean`                                                                          | `false`         | 已兼容保留，建议改用 `borderless`。                                                                                                      |
 | `horizontalBorderless`       | `boolean`                                                                          | `false`         | 是否隐藏横向行分隔线及上下边框，同时保留纵向列分隔线。可与 `striped` 配合使用。                                                          |
+| `frameBorderless`            | `boolean`                                                                          | `false`         | 是否隐藏表格四周外框，同时保留内部行列分隔线。                                                                                          |
 | `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

@@ -822,8 +822,8 @@ function getHeaderTitleRequiredWidth(column, titleWidth) {
   const minimumReadableTitleWidth = Math.min(Math.ceil(titleWidth), 28);
   return minimumReadableTitleWidth + (column.align === "center" ? 20 : 22);
 }
-function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26) {
-  const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / HEADER_ACTION_SLOT_WIDTH));
+function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26, actionSlotWidth = HEADER_ACTION_SLOT_WIDTH) {
+  const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / actionSlotWidth));
   const candidates = [
     isColumnFilterable(column) ? "filter" : null,
     isColumnSortable(column) ? "sort" : null,
@@ -942,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, 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 { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, 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 };
@@ -1063,7 +1063,9 @@ function paintGrid(options) {
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
         ctx.fillStyle = colors.grid;
-        if (!verticalBorderless) ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
+        if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
+          ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
+        }
         if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
@@ -1182,6 +1184,30 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
+  if (extendVerticalGridLines && !verticalBorderless) {
+    const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
+    const extensionHeight = Math.max(0, height - extensionTop);
+    const paintExtendedColumnLines = (layer) => {
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.grid;
+      for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+        if (layer === "scroll" ? columns[columnIndex].fixed !== void 0 : columns[columnIndex].fixed !== layer) continue;
+        if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
+        if (frameBorderless && columnIndex === columns.length - 1) continue;
+        const x = getColumnX(columnIndex) + metrics[columnIndex].width - 1;
+        ctx.fillRect(x, extensionTop, 1, extensionHeight);
+      }
+      ctx.restore();
+    };
+    paintExtendedColumnLines("scroll");
+    paintExtendedColumnLines("left");
+    paintExtendedColumnLines("right");
+  }
   const headerY = fixedHeader ? 0 : -scrollTop;
   ctx.fillStyle = colors.header;
   ctx.fillRect(0, headerY, width, headerHeight);
@@ -1205,14 +1231,16 @@ function paintGrid(options) {
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       ctx.fillStyle = colors.grid;
-      if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
+      if (!verticalBorderless && !(frameBorderless && columnIndex === columns.length - 1)) {
+        ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
+      }
       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";
         const titleWidth = ctx.measureText(column.title).width;
-        const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth);
-        const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
+        const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth, headerActionSlotWidth);
+        const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
         const contentWidth = Math.max(0, metric.width - actionWidth);
         const padding = 10;
         const clipWidth = contentWidth;
@@ -1242,12 +1270,12 @@ function paintGrid(options) {
     ctx.fillRect(rightFixedLeft - 1, 0, 1, height);
   }
   ctx.fillStyle = colors.grid;
-  if (!horizontalBorderless) ctx.fillRect(0, 0, width, 1);
-  if (!verticalBorderless) {
+  if (!horizontalBorderless && !frameBorderless) ctx.fillRect(0, 0, width, 1);
+  if (!verticalBorderless && !frameBorderless) {
     ctx.fillRect(0, 0, 1, height);
     ctx.fillRect(width - 1, 0, 1, height);
   }
-  if (!horizontalBorderless && !options.suppressFrameBottomBorder) ctx.fillRect(0, height - 1, width, 1);
+  if (!horizontalBorderless && !frameBorderless && !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);
@@ -1556,6 +1584,7 @@ function TableInner({
   borderless,
   verticalBorderless,
   horizontalBorderless = false,
+  frameBorderless = false,
   striped = false,
   highlight,
   cellSpans = [],
@@ -1602,6 +1631,8 @@ function TableInner({
     setSourceColumns((current) => reconcileColumns(current, columnProps));
   }, [columnProps]);
   const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
+  const headerActionSize = Math.max(8, layout?.headerActionSize ?? 14);
+  const headerActionSlotWidth = headerActionSize + 2;
   const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const headerDepth = (0, import_react5.useMemo)(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
   const { language, labels } = (0, import_react5.useMemo)(() => resolveGridLocale(locale), [locale]);
@@ -2237,8 +2268,8 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, 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]);
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -2804,34 +2835,34 @@ function TableInner({
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
-    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let right = columnRight - (visibleActions.drag ? HEADER_ACTION_SLOT_WIDTH : 2);
+    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+    let right = columnRight - (visibleActions.drag ? headerActionSlotWidth : 2);
     if (visibleActions.sort) {
-      if (localX >= right - HEADER_ACTION_SLOT_WIDTH && localX < right) return "sort";
-      right -= HEADER_ACTION_SLOT_WIDTH;
+      if (localX >= right - headerActionSlotWidth && localX < right) return "sort";
+      right -= headerActionSlotWidth;
     }
-    if (visibleActions.filter && localX >= right - HEADER_ACTION_SLOT_WIDTH && localX < right) return "filter";
+    if (visibleActions.filter && localX >= right - headerActionSlotWidth && localX < right) return "filter";
     return null;
-  }, [columnDraggable, columns, getDisplayedColumnLeft, measureHeaderTitleWidth, metrics]);
+  }, [columnDraggable, columns, getDisplayedColumnLeft, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
   const isHeaderTitleTruncated = (0, import_react5.useCallback)((columnIndex) => {
     const canvas = canvasRef.current;
     if (columnIndex < 0 || !canvas) return false;
     const column = columns[columnIndex];
     const metric = metrics[columnIndex];
     const titleWidth = measureHeaderTitleWidth(columnIndex);
-    const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth);
-    const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
+    const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth, headerActionSlotWidth);
+    const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
     return getHeaderTitleRequiredWidth(column, titleWidth) > Math.max(0, metric.width - actionWidth);
-  }, [columnDraggable, columns, measureHeaderTitleWidth, metrics]);
+  }, [columnDraggable, columns, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
   const locateHeaderDragHandle = (0, import_react5.useCallback)((clientX, columnIndex) => {
     if (!columnDraggable || columnIndex < 0 || !canvasRef.current) return false;
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return false;
-    if (!getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex)).drag) return false;
+    if (!getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth).drag) return false;
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
-    return localX >= columnRight - 16 && localX < columnRight - 5;
-  }, [columnDraggable, columns, getDisplayedColumnLeft, measureHeaderTitleWidth, metrics]);
+    return localX >= columnRight - headerActionSlotWidth && localX < columnRight - 2;
+  }, [columnDraggable, columns, getDisplayedColumnLeft, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
   const getHeaderCellLeft = (0, import_react5.useCallback)((cell) => {
     const startMetric = metrics[cell.startIndex];
     const fixedSide = columns[cell.startIndex]?.fixed;
@@ -2896,8 +2927,8 @@ function TableInner({
     if (cell.leaf) return locateHeaderDragHandle(clientX, cell.startIndex);
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const right = getHeaderCellLeft(cell) + getHeaderCellWidth(cell);
-    return localX >= right - 16 && localX < right - 5;
-  }, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, locateHeaderDragHandle]);
+    return localX >= right - headerActionSlotWidth && localX < right - 2;
+  }, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, locateHeaderDragHandle]);
   const locateHeaderCell = (0, import_react5.useCallback)((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3053,26 +3084,32 @@ function TableInner({
             header.style.height = `${headerHeight}px`;
             header.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
             header.textContent = column.title;
-            const visibleActions = getVisibleHeaderActions(column, columnWidth, columnDraggable, measureHeaderTitleWidth(sourceIndex));
+            const visibleActions = getVisibleHeaderActions(column, columnWidth, columnDraggable, measureHeaderTitleWidth(sourceIndex), headerActionSlotWidth);
             let actionRight = 2;
             if (visibleActions.drag) {
               const icon = createHeaderDragHandleSvg();
               icon.classList.add("rvg-preview-header-icon");
+              icon.style.width = `${headerActionSize}px`;
+              icon.style.height = `${headerActionSize}px`;
               icon.style.right = `${actionRight}px`;
               header.appendChild(icon);
-              actionRight += HEADER_ACTION_SLOT_WIDTH;
+              actionRight += headerActionSlotWidth;
             }
             if (visibleActions.sort) {
               const direction = sortState?.columnKey === column.key ? sortState.direction : null;
               const icon = createHeaderSortSvg(direction);
               icon.classList.add("rvg-preview-header-icon");
+              icon.style.width = `${headerActionSize}px`;
+              icon.style.height = `${headerActionSize}px`;
               icon.style.right = `${actionRight}px`;
               header.appendChild(icon);
-              actionRight += HEADER_ACTION_SLOT_WIDTH;
+              actionRight += headerActionSlotWidth;
             }
             if (visibleActions.filter) {
               const icon = createHeaderSearchSvg(Boolean(filterValues[column.key]));
               icon.classList.add("rvg-preview-header-icon", "rvg-preview-header-search-icon");
+              icon.style.width = `${headerActionSize}px`;
+              icon.style.height = `${headerActionSize}px`;
               icon.style.right = `${actionRight}px`;
               header.appendChild(icon);
             }
@@ -3269,7 +3306,7 @@ function TableInner({
       cleanupDrag();
       cleanupDrop();
     };
-  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
+  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
   const locateCell = (0, import_react5.useCallback)((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3713,28 +3750,28 @@ function TableInner({
   const renderHeaderIcons = (columnIndex, left) => {
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
-    const top = headerLeafTop + (headerLeafHeight - 14) / 2;
-    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let right = left + metrics[columnIndex].width - (visibleActions.drag ? HEADER_ACTION_SLOT_WIDTH : 2);
+    const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
+    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+    let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
     const icons = [];
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - 16, top } }, "drag")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - 16, top }, direction }, "sort")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
-      right -= HEADER_ACTION_SLOT_WIDTH;
+      right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - 16, top: top + 1 } }, "filter")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -3755,8 +3792,8 @@ function TableInner({
       const context = canvas?.getContext("2d");
       if (context) context.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
       const titleWidth = context?.measureText(column.title).width ?? column.title.length * 13;
-      const visibleActions = cell?.leaf || !cell ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth) : null;
-      const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable ? HEADER_ACTION_SLOT_WIDTH : 0;
+      const visibleActions = cell?.leaf || !cell ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth, headerActionSlotWidth) : null;
+      const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable ? headerActionSlotWidth : 0;
       const contentWidth2 = Math.max(0, cellWidth - actionWidth);
       const maxTextWidth = Math.max(0, contentWidth2 - 20);
       const textWidth = Math.min(titleWidth, maxTextWidth);
@@ -3777,12 +3814,17 @@ function TableInner({
     } else if (action === "sort") {
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       label = direction === "asc" ? labels.sortAsc : direction === "desc" ? labels.sortDesc : labels.sortBoth;
-      anchorX = cellLeft + cellWidth - 22;
+      const visibleActions = getVisibleHeaderActions(column, cellWidth, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+      const right = cellLeft + cellWidth - (visibleActions.drag ? headerActionSlotWidth : 2);
+      anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
     } else if (action === "filter") {
       const value = filterValues[column.key];
       label = value ? labels.filterWithValue(value) : labels.filter;
-      anchorX = cellLeft + cellWidth - 40;
+      const visibleActions = getVisibleHeaderActions(column, cellWidth, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+      let right = cellLeft + cellWidth - (visibleActions.drag ? headerActionSlotWidth : 2);
+      if (visibleActions.sort) right -= headerActionSlotWidth;
+      anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
     }
     const placement = anchorX + 328 > viewport.width ? "left" : "right";
@@ -3795,7 +3837,7 @@ function TableInner({
       label,
       placement
     };
-  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, metrics, scrollPosition.top, sortState, viewport.width]);
+  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
   const isPointerOnHeaderTitle = (0, import_react5.useCallback)((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
@@ -3809,14 +3851,14 @@ function TableInner({
     const context = canvas.getContext("2d");
     if (context) context.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
     const titleWidth = context?.measureText(column.title).width ?? column.title.length * 13;
-    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth) : null;
-    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable ? HEADER_ACTION_SLOT_WIDTH : 0;
+    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth, headerActionSlotWidth) : null;
+    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable ? headerActionSlotWidth : 0;
     const contentWidth2 = Math.max(0, cellWidth - actionWidth);
     const textWidth = Math.min(titleWidth, Math.max(0, contentWidth2 - 20));
     const textLeft = column.align === "right" ? cellLeft + contentWidth2 - 10 - textWidth : column.align === "center" ? cellLeft + contentWidth2 / 2 - textWidth / 2 : cellLeft + 10;
     const textTop = rowTop + 8;
     return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
-  }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerRowOffsets]);
+  }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
   const headerTooltip = (() => {
     if (!visibleHeaderTooltip) return null;
     return visibleHeaderTooltip;
@@ -4139,8 +4181,8 @@ function TableInner({
       );
     }
     if (column.renderHeader) {
-      const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
+      const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
@@ -4184,13 +4226,13 @@ function TableInner({
     const headerTop = (fixedHeader ? 0 : -currentScrollTop) + (headerRowOffsets[cell.level] ?? 0);
     const left = fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex);
     const width2 = cell.leaf ? startMetric.width : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1);
-    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex)) : null;
-    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable && !cell.leaf ? HEADER_ACTION_SLOT_WIDTH : 0;
+    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex), headerActionSlotWidth) : null;
+    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
     const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
-        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isDropTarget ? " is-drop-target" : ""}`,
+        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
         "data-level": cell.level,
         "data-measure-key": `group:${cell.key}:${cell.level}`,
         style: {
@@ -4221,7 +4263,7 @@ function TableInner({
             HeaderDragIcon,
             {
               className: `rvg-header-icon rvg-header-drag-icon${hoveredHeaderAction?.columnIndex === cell.startIndex && hoveredHeaderAction.action === "drag" ? " is-hovered" : ""}`,
-              style: { left: width2 - 16, top: (rowHeightForLevel - 14) / 2 }
+              style: { left: width2 - headerActionSlotWidth, top: (rowHeightForLevel - headerActionSize) / 2 }
             }
           )
         ]
@@ -4487,12 +4529,13 @@ function TableInner({
     width,
     height: autoHeight ? effectiveHeight : height,
     minHeight: autoHeight || typeof height === "number" ? void 0 : FALLBACK_HEIGHT,
+    "--rvg-header-action-size": `${headerActionSize}px`,
     ...stripedColor ? { "--rvg-color-stripe": stripedColor } : null,
     ...style
   };
   const currentScroll = scrollRef.current;
   const scrollerBottom = Math.max(0, bottomSummaryHeight - horizontalScrollbarHeight);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${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" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "canvas",

package/dist/index.css

@@ -757,6 +757,9 @@
   background: var(--rvg-color-header-bg);
   box-sizing: border-box;
 }
+.rvg-root.is-frame-borderless .rvg-header-group.is-frame-right {
+  border-right: 0;
+}
 .rvg-root.is-horizontal-borderless .rvg-header-group {
   border-bottom: 0;
 }
@@ -817,6 +820,9 @@
   content: "";
   pointer-events: none;
 }
+.rvg-root.is-frame-borderless .rvg-header-icons::after {
+  display: none;
+}
 .rvg-root.is-vertical-borderless .rvg-header-icons::after {
   display: none;
 }
@@ -836,8 +842,8 @@
 }
 .rvg-header-icon {
   position: absolute;
-  width: 14px;
-  height: 14px;
+  width: var(--rvg-header-action-size, 14px);
+  height: var(--rvg-header-action-size, 14px);
   overflow: visible;
   color: var(--rvg-color-icon);
 }

package/dist/index.d.cts

@@ -121,6 +121,8 @@ interface TableLayoutConfig {
     rowHeight?: number;
     /** Header height in pixels. Defaults to 40. */
     headerHeight?: number;
+    /** Header action icon size in pixels. Defaults to 14. */
+    headerActionSize?: number;
 }
 interface TableCellSpan {
     /** Row index in the current rows array. Prefer rowKey when row order can change. */
@@ -349,6 +351,8 @@ interface TableProps<Row extends object> {
     verticalBorderless?: boolean;
     /** Hide horizontal row and frame separators while keeping vertical grid lines. */
     horizontalBorderless?: boolean;
+    /** Hide the outer table frame while keeping internal row and column separators. */
+    frameBorderless?: 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

@@ -121,6 +121,8 @@ interface TableLayoutConfig {
     rowHeight?: number;
     /** Header height in pixels. Defaults to 40. */
     headerHeight?: number;
+    /** Header action icon size in pixels. Defaults to 14. */
+    headerActionSize?: number;
 }
 interface TableCellSpan {
     /** Row index in the current rows array. Prefer rowKey when row order can change. */
@@ -349,6 +351,8 @@ interface TableProps<Row extends object> {
     verticalBorderless?: boolean;
     /** Hide horizontal row and frame separators while keeping vertical grid lines. */
     horizontalBorderless?: boolean;
+    /** Hide the outer table frame while keeping internal row and column separators. */
+    frameBorderless?: 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

@@ -792,8 +792,8 @@ function getHeaderTitleRequiredWidth(column, titleWidth) {
   const minimumReadableTitleWidth = Math.min(Math.ceil(titleWidth), 28);
   return minimumReadableTitleWidth + (column.align === "center" ? 20 : 22);
 }
-function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26) {
-  const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / HEADER_ACTION_SLOT_WIDTH));
+function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26, actionSlotWidth = HEADER_ACTION_SLOT_WIDTH) {
+  const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / actionSlotWidth));
   const candidates = [
     isColumnFilterable(column) ? "filter" : null,
     isColumnSortable(column) ? "sort" : null,
@@ -912,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, 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 { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, 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 };
@@ -1033,7 +1033,9 @@ function paintGrid(options) {
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
         ctx.fillStyle = colors.grid;
-        if (!verticalBorderless) ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
+        if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
+          ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
+        }
         if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
@@ -1152,6 +1154,30 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
+  if (extendVerticalGridLines && !verticalBorderless) {
+    const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
+    const extensionHeight = Math.max(0, height - extensionTop);
+    const paintExtendedColumnLines = (layer) => {
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.grid;
+      for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+        if (layer === "scroll" ? columns[columnIndex].fixed !== void 0 : columns[columnIndex].fixed !== layer) continue;
+        if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
+        if (frameBorderless && columnIndex === columns.length - 1) continue;
+        const x = getColumnX(columnIndex) + metrics[columnIndex].width - 1;
+        ctx.fillRect(x, extensionTop, 1, extensionHeight);
+      }
+      ctx.restore();
+    };
+    paintExtendedColumnLines("scroll");
+    paintExtendedColumnLines("left");
+    paintExtendedColumnLines("right");
+  }
   const headerY = fixedHeader ? 0 : -scrollTop;
   ctx.fillStyle = colors.header;
   ctx.fillRect(0, headerY, width, headerHeight);
@@ -1175,14 +1201,16 @@ function paintGrid(options) {
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       ctx.fillStyle = colors.grid;
-      if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
+      if (!verticalBorderless && !(frameBorderless && columnIndex === columns.length - 1)) {
+        ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
+      }
       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";
         const titleWidth = ctx.measureText(column.title).width;
-        const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth);
-        const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
+        const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth, headerActionSlotWidth);
+        const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
         const contentWidth = Math.max(0, metric.width - actionWidth);
         const padding = 10;
         const clipWidth = contentWidth;
@@ -1212,12 +1240,12 @@ function paintGrid(options) {
     ctx.fillRect(rightFixedLeft - 1, 0, 1, height);
   }
   ctx.fillStyle = colors.grid;
-  if (!horizontalBorderless) ctx.fillRect(0, 0, width, 1);
-  if (!verticalBorderless) {
+  if (!horizontalBorderless && !frameBorderless) ctx.fillRect(0, 0, width, 1);
+  if (!verticalBorderless && !frameBorderless) {
     ctx.fillRect(0, 0, 1, height);
     ctx.fillRect(width - 1, 0, 1, height);
   }
-  if (!horizontalBorderless && !options.suppressFrameBottomBorder) ctx.fillRect(0, height - 1, width, 1);
+  if (!horizontalBorderless && !frameBorderless && !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);
@@ -1526,6 +1554,7 @@ function TableInner({
   borderless,
   verticalBorderless,
   horizontalBorderless = false,
+  frameBorderless = false,
   striped = false,
   highlight,
   cellSpans = [],
@@ -1572,6 +1601,8 @@ function TableInner({
     setSourceColumns((current) => reconcileColumns(current, columnProps));
   }, [columnProps]);
   const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
+  const headerActionSize = Math.max(8, layout?.headerActionSize ?? 14);
+  const headerActionSlotWidth = headerActionSize + 2;
   const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const headerDepth = useMemo(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
   const { language, labels } = useMemo(() => resolveGridLocale(locale), [locale]);
@@ -2207,8 +2238,8 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, 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]);
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -2774,34 +2805,34 @@ function TableInner({
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
-    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let right = columnRight - (visibleActions.drag ? HEADER_ACTION_SLOT_WIDTH : 2);
+    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+    let right = columnRight - (visibleActions.drag ? headerActionSlotWidth : 2);
     if (visibleActions.sort) {
-      if (localX >= right - HEADER_ACTION_SLOT_WIDTH && localX < right) return "sort";
-      right -= HEADER_ACTION_SLOT_WIDTH;
+      if (localX >= right - headerActionSlotWidth && localX < right) return "sort";
+      right -= headerActionSlotWidth;
     }
-    if (visibleActions.filter && localX >= right - HEADER_ACTION_SLOT_WIDTH && localX < right) return "filter";
+    if (visibleActions.filter && localX >= right - headerActionSlotWidth && localX < right) return "filter";
     return null;
-  }, [columnDraggable, columns, getDisplayedColumnLeft, measureHeaderTitleWidth, metrics]);
+  }, [columnDraggable, columns, getDisplayedColumnLeft, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
   const isHeaderTitleTruncated = useCallback2((columnIndex) => {
     const canvas = canvasRef.current;
     if (columnIndex < 0 || !canvas) return false;
     const column = columns[columnIndex];
     const metric = metrics[columnIndex];
     const titleWidth = measureHeaderTitleWidth(columnIndex);
-    const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth);
-    const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
+    const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth, headerActionSlotWidth);
+    const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
     return getHeaderTitleRequiredWidth(column, titleWidth) > Math.max(0, metric.width - actionWidth);
-  }, [columnDraggable, columns, measureHeaderTitleWidth, metrics]);
+  }, [columnDraggable, columns, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
   const locateHeaderDragHandle = useCallback2((clientX, columnIndex) => {
     if (!columnDraggable || columnIndex < 0 || !canvasRef.current) return false;
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return false;
-    if (!getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex)).drag) return false;
+    if (!getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth).drag) return false;
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
-    return localX >= columnRight - 16 && localX < columnRight - 5;
-  }, [columnDraggable, columns, getDisplayedColumnLeft, measureHeaderTitleWidth, metrics]);
+    return localX >= columnRight - headerActionSlotWidth && localX < columnRight - 2;
+  }, [columnDraggable, columns, getDisplayedColumnLeft, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
   const getHeaderCellLeft = useCallback2((cell) => {
     const startMetric = metrics[cell.startIndex];
     const fixedSide = columns[cell.startIndex]?.fixed;
@@ -2866,8 +2897,8 @@ function TableInner({
     if (cell.leaf) return locateHeaderDragHandle(clientX, cell.startIndex);
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const right = getHeaderCellLeft(cell) + getHeaderCellWidth(cell);
-    return localX >= right - 16 && localX < right - 5;
-  }, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, locateHeaderDragHandle]);
+    return localX >= right - headerActionSlotWidth && localX < right - 2;
+  }, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, locateHeaderDragHandle]);
   const locateHeaderCell = useCallback2((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3023,26 +3054,32 @@ function TableInner({
             header.style.height = `${headerHeight}px`;
             header.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
             header.textContent = column.title;
-            const visibleActions = getVisibleHeaderActions(column, columnWidth, columnDraggable, measureHeaderTitleWidth(sourceIndex));
+            const visibleActions = getVisibleHeaderActions(column, columnWidth, columnDraggable, measureHeaderTitleWidth(sourceIndex), headerActionSlotWidth);
             let actionRight = 2;
             if (visibleActions.drag) {
               const icon = createHeaderDragHandleSvg();
               icon.classList.add("rvg-preview-header-icon");
+              icon.style.width = `${headerActionSize}px`;
+              icon.style.height = `${headerActionSize}px`;
               icon.style.right = `${actionRight}px`;
               header.appendChild(icon);
-              actionRight += HEADER_ACTION_SLOT_WIDTH;
+              actionRight += headerActionSlotWidth;
             }
             if (visibleActions.sort) {
               const direction = sortState?.columnKey === column.key ? sortState.direction : null;
               const icon = createHeaderSortSvg(direction);
               icon.classList.add("rvg-preview-header-icon");
+              icon.style.width = `${headerActionSize}px`;
+              icon.style.height = `${headerActionSize}px`;
               icon.style.right = `${actionRight}px`;
               header.appendChild(icon);
-              actionRight += HEADER_ACTION_SLOT_WIDTH;
+              actionRight += headerActionSlotWidth;
             }
             if (visibleActions.filter) {
               const icon = createHeaderSearchSvg(Boolean(filterValues[column.key]));
               icon.classList.add("rvg-preview-header-icon", "rvg-preview-header-search-icon");
+              icon.style.width = `${headerActionSize}px`;
+              icon.style.height = `${headerActionSize}px`;
               icon.style.right = `${actionRight}px`;
               header.appendChild(icon);
             }
@@ -3239,7 +3276,7 @@ function TableInner({
       cleanupDrag();
       cleanupDrop();
     };
-  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
+  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
   const locateCell = useCallback2((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3683,28 +3720,28 @@ function TableInner({
   const renderHeaderIcons = (columnIndex, left) => {
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
-    const top = headerLeafTop + (headerLeafHeight - 14) / 2;
-    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let right = left + metrics[columnIndex].width - (visibleActions.drag ? HEADER_ACTION_SLOT_WIDTH : 2);
+    const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
+    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+    let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
     const icons = [];
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - 16, top } }, "drag")
+        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - 16, top }, direction }, "sort")
+        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
-      right -= HEADER_ACTION_SLOT_WIDTH;
+      right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - 16, top: top + 1 } }, "filter")
+        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -3725,8 +3762,8 @@ function TableInner({
       const context = canvas?.getContext("2d");
       if (context) context.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
       const titleWidth = context?.measureText(column.title).width ?? column.title.length * 13;
-      const visibleActions = cell?.leaf || !cell ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth) : null;
-      const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable ? HEADER_ACTION_SLOT_WIDTH : 0;
+      const visibleActions = cell?.leaf || !cell ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth, headerActionSlotWidth) : null;
+      const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable ? headerActionSlotWidth : 0;
       const contentWidth2 = Math.max(0, cellWidth - actionWidth);
       const maxTextWidth = Math.max(0, contentWidth2 - 20);
       const textWidth = Math.min(titleWidth, maxTextWidth);
@@ -3747,12 +3784,17 @@ function TableInner({
     } else if (action === "sort") {
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       label = direction === "asc" ? labels.sortAsc : direction === "desc" ? labels.sortDesc : labels.sortBoth;
-      anchorX = cellLeft + cellWidth - 22;
+      const visibleActions = getVisibleHeaderActions(column, cellWidth, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+      const right = cellLeft + cellWidth - (visibleActions.drag ? headerActionSlotWidth : 2);
+      anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
     } else if (action === "filter") {
       const value = filterValues[column.key];
       label = value ? labels.filterWithValue(value) : labels.filter;
-      anchorX = cellLeft + cellWidth - 40;
+      const visibleActions = getVisibleHeaderActions(column, cellWidth, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+      let right = cellLeft + cellWidth - (visibleActions.drag ? headerActionSlotWidth : 2);
+      if (visibleActions.sort) right -= headerActionSlotWidth;
+      anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
     }
     const placement = anchorX + 328 > viewport.width ? "left" : "right";
@@ -3765,7 +3807,7 @@ function TableInner({
       label,
       placement
     };
-  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, metrics, scrollPosition.top, sortState, viewport.width]);
+  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
   const isPointerOnHeaderTitle = useCallback2((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
@@ -3779,14 +3821,14 @@ function TableInner({
     const context = canvas.getContext("2d");
     if (context) context.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
     const titleWidth = context?.measureText(column.title).width ?? column.title.length * 13;
-    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth) : null;
-    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable ? HEADER_ACTION_SLOT_WIDTH : 0;
+    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth, headerActionSlotWidth) : null;
+    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable ? headerActionSlotWidth : 0;
     const contentWidth2 = Math.max(0, cellWidth - actionWidth);
     const textWidth = Math.min(titleWidth, Math.max(0, contentWidth2 - 20));
     const textLeft = column.align === "right" ? cellLeft + contentWidth2 - 10 - textWidth : column.align === "center" ? cellLeft + contentWidth2 / 2 - textWidth / 2 : cellLeft + 10;
     const textTop = rowTop + 8;
     return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
-  }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerRowOffsets]);
+  }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
   const headerTooltip = (() => {
     if (!visibleHeaderTooltip) return null;
     return visibleHeaderTooltip;
@@ -4109,8 +4151,8 @@ function TableInner({
       );
     }
     if (column.renderHeader) {
-      const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
+      const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
+      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
       return /* @__PURE__ */ jsx7(
         "div",
         {
@@ -4154,13 +4196,13 @@ function TableInner({
     const headerTop = (fixedHeader ? 0 : -currentScrollTop) + (headerRowOffsets[cell.level] ?? 0);
     const left = fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex);
     const width2 = cell.leaf ? startMetric.width : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1);
-    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex)) : null;
-    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable && !cell.leaf ? HEADER_ACTION_SLOT_WIDTH : 0;
+    const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex), headerActionSlotWidth) : null;
+    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
     const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
     return /* @__PURE__ */ jsxs7(
       "div",
       {
-        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isDropTarget ? " is-drop-target" : ""}`,
+        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
         "data-level": cell.level,
         "data-measure-key": `group:${cell.key}:${cell.level}`,
         style: {
@@ -4191,7 +4233,7 @@ function TableInner({
             HeaderDragIcon,
             {
               className: `rvg-header-icon rvg-header-drag-icon${hoveredHeaderAction?.columnIndex === cell.startIndex && hoveredHeaderAction.action === "drag" ? " is-hovered" : ""}`,
-              style: { left: width2 - 16, top: (rowHeightForLevel - 14) / 2 }
+              style: { left: width2 - headerActionSlotWidth, top: (rowHeightForLevel - headerActionSize) / 2 }
             }
           )
         ]
@@ -4457,12 +4499,13 @@ function TableInner({
     width,
     height: autoHeight ? effectiveHeight : height,
     minHeight: autoHeight || typeof height === "number" ? void 0 : FALLBACK_HEIGHT,
+    "--rvg-header-action-size": `${headerActionSize}px`,
     ...stripedColor ? { "--rvg-color-stripe": stripedColor } : null,
     ...style
   };
   const currentScroll = scrollRef.current;
   const scrollerBottom = Math.max(0, bottomSummaryHeight - horizontalScrollbarHeight);
-  return /* @__PURE__ */ jsxs7("div", { className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${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" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ jsxs7("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx7(
         "canvas",

package/package.json

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