@lensui/lens-table 0.1.2 → 0.1.3

package/README.md

@@ -88,16 +88,17 @@ export function Example() {
 | `rows`                       | `Row[]`                                                                            | 必填              | 表格数据。组件不会直接修改数据，编辑后通过事件通知外部更新。                                                                            |
 | `rowKey`                     | `keyof Row \| ((row, index) => string \| number)`                                    | `id`            | 行唯一标识。默认读取每行的`id` 字段；如果数据不是 `id` 主键，请显式传入字段名或函数。                                               |
 | `width`                      | `number \| string`                                                                  | `100%`          | 表格宽度。数字按像素处理，字符串可传`100%`、`80vw` 等。                                                                             |
-| `height`                     | `number \| string`                                                                  | `100%`          | 表格高度。默认继承父容器高度；如果父容器没有可计算高度，则回落到`480px`。                                                             |
-| `autoHeight`                 | `boolean`                                                                          | `false`         | 是否按真实内容高度收缩表格。开启后数据较少时使用 `表头 + 行数 * 行高 + 合计行` 的高度，数据较多时不超过 `height`。                  |
-| `rowHeight`                  | `number`                                                                           | `40`            | 每行高度，固定行高用于高性能虚拟滚动。                                                                                                  |
-| `headerHeight`               | `number`                                                                           | `44`            | 表头高度，单位 px。                                                                                                                     |
+| `height`                     | `number \| string`                                                                  | `100%`          | 表格最大高度。默认继承父容器高度；如果父容器没有可计算高度，则回落到`480px`。数据较少时默认按真实内容高度收缩，数据较多时不超过该高度。 |
+| `layout`                     | `{ rowHeight?: number; headerHeight?: number }`                                    | `{ rowHeight: 36, headerHeight: 40 }` | 表格布局尺寸配置。推荐把行高、表头高度等样式相关参数放在这里；自定义多行表头会以 `headerHeight` 为最小高度自动撑开。              |
+| `rowHeight`                  | `number`                                                                           | `36`            | 已兼容保留，建议改用 `layout.rowHeight`。                                                                                                  |
+| `headerHeight`               | `number`                                                                           | `40`            | 已兼容保留，建议改用 `layout.headerHeight`。                                                                                              |
 | `fixedHeader`                | `boolean`                                                                          | `true`          | 表头是否固定在顶部。                                                                                                                    |
 | `locale`                     | `'zh-CN' \| 'en-US' \| LocaleConfig`                                                 | `'zh-CN'`       | 国际化配置。传字符串时使用内置中英文文案；传对象时可通过`language` 指定语言，并通过 `labels` 覆盖文案。                             |
-| `verticalBorderless`         | `boolean`                                                                          | `false`         | 是否弱化竖向边框。开启后隐藏单元格之间的竖线，但保留横向分隔线。                                                                        |
+| `borderless`                 | `boolean`                                                                          | `false`         | 是否弱化竖向边框。开启后隐藏单元格之间的竖线，但保留横向分隔线。                                                                        |
+| `verticalBorderless`         | `boolean`                                                                          | `false`         | 已兼容保留，建议改用 `borderless`。                                                                                                      |
 | `striped`                    | `boolean \| string`                                                                 | `false`         | 是否显示斑马纹行背景。传`true` 使用主题变量，传颜色字符串可自定义斑马纹颜色，例如 `'#f6faff'`。                                     |
 | `highlight`                  | `{ editedCells?: boolean \| string; insertedRows?: boolean \| string }`             | `{}`            | 高亮反馈配置。`editedCells` 控制编辑过的单元格底色，`insertedRows` 控制乐观插入行底色；传 `true` 使用默认色，传颜色字符串可自定义。   |
-| `cellSpans`                  | `Array<{ rowKey?: GridKey; rowIndex?: number; columnKey: string; rowSpan?: number; colSpan?: number }>` | `[]`            | 合并主体单元格配置。推荐使用 `rowKey` 定位；横向合并会限制在同一个固定列分区内，工具列不会参与合并。                                  |
+| `cellSpans`                  | `TableCellSpan[] \| ((ctx) => TableCellSpan \| { rowSpan?: number; colSpan?: number } \| null)` | `[]`            | 合并主体单元格配置。可传数组，也可传函数按单元格生成规则。推荐使用 `rowKey` 定位；横向合并会限制在同一个固定列分区内，工具列不会参与合并。 |
 | `loading`                    | `boolean`                                                                          | `false`         | 显示加载态。                                                                                                                            |
 | `loadingContent`             | `ReactNode`                                                                        | -                 | 自定义加载内容。传入后，首次加载和刷新加载不再区分，都会统一展示这个内容。                                                              |
 | `virtualized`                | `boolean \| { enabled?: boolean; overscan?: number }`                               | `true`          | 虚拟渲染配置。传`false` 时渲染全部行列；传对象时可通过 `enabled` 开关，并用 `overscan` 配置可见范围外的缓冲行列数量，默认 `4`。 |
@@ -169,6 +170,19 @@ export function Example() {
 />
 ```
 
+也可以传函数按单元格声明规则。函数返回值会默认使用当前单元格作为锚点，因此只需要返回跨度：
+
+```tsx
+<Table
+  columns={columns}
+  rows={rows}
+  cellSpans={({ rowIndex, column }) => {
+    if (column.key === 'department' && rowIndex % 3 === 0) return { rowSpan: 2 };
+    return null;
+  }}
+/>
+```
+
 `rowKey` 优先于 `rowIndex`，在排序、过滤或插入删除行后更稳定。被合并覆盖的单元格不会单独绘制或命中，点击覆盖区域会选中合并区域的锚点单元格。横向合并不会跨越固定左列、滚动列、固定右列这三个区域；如果声明跨区，组件会自动收缩到当前区域内。
 
 ## Column 参数
@@ -177,6 +191,7 @@ export function Example() {
 | -------------- | -------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
 | `key`        | `string`                                                                 | 必填                 | 列唯一标识。排序、筛选、选择、编辑回调都使用它。                                            |
 | `title`      | `string`                                                                 | 必填                 | 表头展示文本。                                                                              |
+| `renderHeader` | `(column) => ReactNode`                                                | -                    | 自定义表头 React 内容。多行内容会自动撑开表头高度；`title` 仍用于 tooltip、拖拽预览和回退文本。 |
 | `dataIndex`  | `keyof Row`                                                              | -                    | 从行数据中读取和写入的字段。工具列可不传。                                                  |
 | `width`      | `number`                                                                 | `140`              | 列宽，单位 px。最小宽度由内部布局保护。                                                     |
 | `fixed`      | `'left' \| 'right'`                                                       | -                    | 固定列位置。左/右固定列会覆盖滚动列并显示阴影。                                             |

package/dist/index.cjs

@@ -814,8 +814,9 @@ function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
   });
   const viewportWidth = options.viewportWidth ?? 0;
   if (viewportWidth <= left || columns.length === 0) return metrics;
-  const stretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right" && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-  const targets = stretchable.length > 0 ? stretchable : columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right");
+  const unsetWidthStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.width === void 0 && column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const dataStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const targets = unsetWidthStretchable.length > 0 ? unsetWidthStretchable : dataStretchable.length > 0 ? dataStretchable : [];
   if (targets.length === 0) return metrics;
   const extra = viewportWidth - left;
   const baseTotal = targets.reduce((sum, { index }) => sum + metrics[index].width, 0);
@@ -1069,7 +1070,7 @@ function paintGrid(options) {
       if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
       ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
       const column = columns[columnIndex];
-      if (!column.rowSelection && !column.rowDragHandle && !column.rowNumber && column.title) {
+      if (!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);
@@ -1328,12 +1329,14 @@ function Table({
   rowKey,
   width = "100%",
   height = "100%",
-  autoHeight = false,
-  rowHeight = 36,
-  headerHeight = 40,
+  autoHeight = true,
+  layout,
+  rowHeight: rowHeightProp,
+  headerHeight: headerHeightProp,
   fixedHeader = true,
   locale = "zh-CN",
-  verticalBorderless = false,
+  borderless,
+  verticalBorderless,
   striped = false,
   highlight,
   cellSpans = [],
@@ -1375,8 +1378,13 @@ function Table({
   style,
   ariaLabel = "Data grid"
 }) {
+  const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
+  const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const { language, labels } = (0, import_react5.useMemo)(() => resolveGridLocale(locale), [locale]);
-  const hasVerticalBorders = !verticalBorderless;
+  const customHeaderContentRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const [measuredHeaderHeight, setMeasuredHeaderHeight] = (0, import_react5.useState)(0);
+  const headerHeight = Math.max(baseHeaderHeight, measuredHeaderHeight);
+  const hasVerticalBorders = !(borderless ?? verticalBorderless ?? false);
   const hasStripedRows = Boolean(striped);
   const stripedColor = typeof striped === "string" ? striped : void 0;
   const editedCellsHighlight = highlight?.editedCells ?? false;
@@ -1482,6 +1490,28 @@ function Table({
     if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
     if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
   }, []);
+  const measureCustomHeaderHeight = (0, import_react5.useCallback)(() => {
+    let nextHeight = 0;
+    customHeaderContentRefs.current.forEach((node) => {
+      nextHeight = Math.max(nextHeight, Math.ceil(node.scrollHeight) + 16);
+    });
+    setMeasuredHeaderHeight((current) => current === nextHeight ? current : nextHeight);
+  }, []);
+  (0, import_react5.useLayoutEffect)(() => {
+    const activeCustomHeaderKeys = new Set(columns.filter((column) => column.renderHeader).map((column) => column.key));
+    customHeaderContentRefs.current.forEach((_, key) => {
+      if (!activeCustomHeaderKeys.has(key)) customHeaderContentRefs.current.delete(key);
+    });
+    if (customHeaderContentRefs.current.size === 0) {
+      setMeasuredHeaderHeight(0);
+      return;
+    }
+    measureCustomHeaderHeight();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measureCustomHeaderHeight);
+    customHeaderContentRefs.current.forEach((node) => observer.observe(node));
+    return () => observer.disconnect();
+  }, [columns, measureCustomHeaderHeight, viewport.width]);
   const [filterEditor, setFilterEditor] = (0, import_react5.useState)(null);
   const [contextMenu, setContextMenu] = (0, import_react5.useState)(null);
   const [insertCounts, setInsertCounts] = (0, import_react5.useState)({ before: 1, after: 1 });
@@ -1490,6 +1520,7 @@ function Table({
   const [insertBusy, setInsertBusy] = (0, import_react5.useState)(false);
   const [deleteBusy, setDeleteBusy] = (0, import_react5.useState)(false);
   const [toast, setToast] = (0, import_react5.useState)(null);
+  const [resizeGuideX, setResizeGuideX] = (0, import_react5.useState)(null);
   const [hoveredHeaderAction, setHoveredHeaderAction] = (0, import_react5.useState)(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0, import_react5.useState)(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = (0, import_react5.useState)(null);
@@ -1643,14 +1674,30 @@ function Table({
     rowIndexByKeyRef.current.set(key, index);
     return key;
   }, [getDataRowKey]);
+  const resolvedCellSpans = (0, import_react5.useMemo)(() => {
+    if (Array.isArray(cellSpans)) return cellSpans;
+    const spans = [];
+    rows.forEach((row, rowIndex) => {
+      columns.forEach((column, columnIndex) => {
+        const span = cellSpans({ row, rowIndex, column, columnIndex, rows, columns });
+        if (!span) return;
+        spans.push({
+          rowIndex,
+          columnKey: column.key,
+          ...span
+        });
+      });
+    });
+    return spans;
+  }, [cellSpans, columns, rows]);
   const cellSpanLookup = (0, import_react5.useMemo)(() => {
-    if (cellSpans.length === 0) return createEmptyCellSpanLookup();
+    if (resolvedCellSpans.length === 0) return createEmptyCellSpanLookup();
     const rowIndexByKey = /* @__PURE__ */ new Map();
     rows.forEach((row, index) => rowIndexByKey.set(getRowKey(row, index), index));
     const columnIndexByKey = new Map(columns.map((column, index) => [column.key, index]));
     const lookup = createEmptyCellSpanLookup();
     const occupied = /* @__PURE__ */ new Set();
-    for (const span of cellSpans) {
+    for (const span of resolvedCellSpans) {
       const rowIndex = span.rowKey !== void 0 ? rowIndexByKey.get(span.rowKey) : span.rowIndex;
       const columnIndex = columnIndexByKey.get(span.columnKey);
       if (rowIndex === void 0 || columnIndex === void 0) continue;
@@ -1686,7 +1733,7 @@ function Table({
       }
     }
     return lookup;
-  }, [cellSpans, columns, getRowKey, rows]);
+  }, [columns, getRowKey, resolvedCellSpans, rows]);
   const selectedRowKeySet = (0, import_react5.useMemo)(() => new Set(rowKeys), [rowKeys]);
   const selectedColumnKeySet = (0, import_react5.useMemo)(() => new Set(columnKeys), [columnKeys]);
   const insertedRowKeySet = (0, import_react5.useMemo)(() => insertedRowKeys, [insertedRowKeys]);
@@ -1939,6 +1986,16 @@ function Table({
     }
     return closest;
   }, [columnResizable, columns, getDisplayedColumnLeft, metrics]);
+  const findResizeNeighbor = (0, import_react5.useCallback)((columnIndex) => {
+    const resizedColumn = columns[columnIndex];
+    for (let index = columnIndex + 1; index < columns.length; index += 1) {
+      const column = columns[index];
+      if (column.rowSelection || column.rowDragHandle || column.rowNumber) continue;
+      if (resizedColumn?.fixed && column.fixed !== resizedColumn.fixed) return -1;
+      return index;
+    }
+    return -1;
+  }, [columns]);
   const locateHeaderAction = (0, import_react5.useCallback)((clientX, columnIndex) => {
     if (columnIndex < 0 || !canvasRef.current) return null;
     const column = columns[columnIndex];
@@ -2517,26 +2574,48 @@ function Table({
     if (resizeIndex >= 0) {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
-      columnDragRef.current = { type: "resize", columnIndex: resizeIndex, startX: event.clientX, startWidth: metrics[resizeIndex].width };
+      const neighborIndex = findResizeNeighbor(resizeIndex);
+      const startGuideX = getDisplayedColumnLeft(resizeIndex) + metrics[resizeIndex].width;
+      columnDragRef.current = {
+        type: "resize",
+        columnIndex: resizeIndex,
+        startX: event.clientX,
+        startWidth: metrics[resizeIndex].width,
+        startGuideX,
+        neighborIndex,
+        startNeighborWidth: neighborIndex >= 0 ? metrics[neighborIndex].width : 0
+      };
       suppressClickRef.current = true;
-      setDragGuide(getDisplayedColumnLeft(resizeIndex) + metrics[resizeIndex].width);
+      setResizeGuideX(startGuideX);
       return;
     }
-  }, [fixedHeader, getDisplayedColumnLeft, headerHeight, locateResizeHandle, metrics, setDragGuide]);
+  }, [findResizeNeighbor, fixedHeader, getDisplayedColumnLeft, headerHeight, locateResizeHandle, metrics]);
   const handleColumnPointerMove = (0, import_react5.useCallback)((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
-    const width2 = Math.max(getMinimumColumnWidth(columns[drag.columnIndex], columnDraggable), Math.round(drag.startWidth + event.clientX - drag.startX));
-    onColumnResize?.(columns[drag.columnIndex].key, width2);
-    setDragGuide(getDisplayedColumnLeft(drag.columnIndex) + width2);
-  }, [columnDraggable, columns, getDisplayedColumnLeft, onColumnResize, setDragGuide]);
+    const column = columns[drag.columnIndex];
+    const minWidth = getMinimumColumnWidth(column, columnDraggable);
+    let delta = Math.round(event.clientX - drag.startX);
+    if (drag.neighborIndex >= 0) {
+      const neighbor = columns[drag.neighborIndex];
+      const minNeighborWidth = getMinimumColumnWidth(neighbor, columnDraggable);
+      delta = Math.max(minWidth - drag.startWidth, Math.min(drag.startNeighborWidth - minNeighborWidth, delta));
+      onColumnResize?.(column.key, drag.startWidth + delta);
+      onColumnResize?.(neighbor.key, drag.startNeighborWidth - delta);
+      setResizeGuideX(drag.startGuideX + delta);
+      return;
+    }
+    const width2 = Math.max(minWidth, Math.round(drag.startWidth + delta));
+    onColumnResize?.(column.key, width2);
+    setResizeGuideX(drag.startGuideX + width2 - drag.startWidth);
+  }, [columnDraggable, columns, onColumnResize]);
   const handleColumnPointerUp = (0, import_react5.useCallback)((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
     columnDragRef.current = null;
-    setDragGuide(null);
-  }, [setDragGuide]);
+    setResizeGuideX(null);
+  }, []);
   const queueSortStateChange = (0, import_react5.useCallback)((next) => {
     setDisplaySortState(next);
     if (sortDebounceRef.current !== null) clearTimeout(sortDebounceRef.current);
@@ -2943,6 +3022,35 @@ function Table({
         column.key
       );
     }
+    if (column.renderHeader) {
+      const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
+      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          className: "rvg-header-title is-custom",
+          style: {
+            left,
+            top: fixedHeader ? 0 : -currentScrollTop,
+            width: Math.max(0, metrics[columnIndex].width - actionWidth),
+            height: headerHeight,
+            justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
+            textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              ref: (node) => {
+                if (node) customHeaderContentRefs.current.set(column.key, node);
+                else customHeaderContentRefs.current.delete(column.key);
+              },
+              children: column.renderHeader(column)
+            }
+          )
+        },
+        column.key
+      );
+    }
     return null;
   };
   const rangeHandlePosition = (() => {
@@ -3646,6 +3754,13 @@ function Table({
     ] }) }),
     toast && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `rvg-toast is-${toast.type}`, role: "status", children: toast.message }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: "rvg-column-guide is-resizing",
+        style: { display: "block", transform: `translateX(${Math.round(resizeGuideX)}px)` }
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),
     filterEditor && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: filterRef, className: "rvg-filter", style: { left: filterEditor.left, top: filterEditor.top }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(

package/dist/index.css

@@ -150,6 +150,15 @@
   white-space: nowrap;
   user-select: text;
 }
+.rvg-header-title.is-custom {
+  overflow: visible;
+  white-space: normal;
+}
+.rvg-header-title.is-custom > span {
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+}
 .rvg-row-drag-icon {
   position: absolute;
   display: grid;
@@ -1154,14 +1163,18 @@
   z-index: 6;
   background: var(--rvg-color-bg);
 }
+.rvg-choice-editor {
+  line-height: 1;
+}
 .rvg-time-editor {
   position: absolute;
   z-index: 6;
   display: flex;
-  padding: 0 28px 0 8px;
+  padding: 0 28px 0 9px;
   align-items: center;
   gap: 3px;
   background: var(--rvg-color-bg);
+  line-height: 1;
 }
 .rvg-time-field-group {
   display: contents;
@@ -1169,6 +1182,7 @@
 .rvg-time-editor input {
   min-width: 0;
   height: 100%;
+  transform: translateY(-1px);
   flex: 1;
   padding: 0;
   border: 0;
@@ -1180,17 +1194,18 @@
     ui-sans-serif,
     system-ui,
     sans-serif;
-  line-height: 1;
+  line-height: normal;
 }
 .rvg-native-editor {
   position: absolute;
   z-index: 6;
   display: flex;
-  padding: 0 8px;
+  padding: 0 9px;
   align-items: center;
   gap: 6px;
   overflow: hidden;
   background: var(--rvg-color-bg);
+  line-height: 1;
 }
 .rvg-native-editor.has-clear {
   padding-right: 32px;
@@ -1198,18 +1213,20 @@
 .rvg-native-editor input {
   min-width: 0;
   width: 100%;
-  height: 20px;
+  height: 100%;
   padding: 0;
+  transform: translateY(-1px);
   flex: 1;
   border: 0;
   outline: 0;
   background: transparent;
   color: var(--rvg-color-text);
   font:
-    13px/20px Inter,
+    13px Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  line-height: normal;
   box-sizing: border-box;
 }
 .rvg-native-editor span {
@@ -1448,13 +1465,14 @@
 }
 .rvg-choice-editor [data-part=trigger] {
   padding: 0 28px 0 9px;
+  line-height: 1;
 }
 .rvg-date-value {
-  padding-top: 0;
-  padding-bottom: 2px;
+  padding: 0 8px 2px 9px;
 }
 .rvg-choice-editor [data-part=value-text] {
   min-width: 0;
+  transform: translateY(-1px);
   overflow: hidden;
   font: inherit;
   line-height: normal;

package/dist/index.d.cts

@@ -116,6 +116,12 @@ interface TableHighlightConfig {
     /** Highlight rows inserted optimistically through the built-in insert action. Pass a color string to customize the fill. Defaults to false. */
     insertedRows?: boolean | string;
 }
+interface TableLayoutConfig {
+    /** Fixed body row height in pixels. Defaults to 36. */
+    rowHeight?: number;
+    /** Header height in pixels. Defaults to 40. */
+    headerHeight?: number;
+}
 interface TableCellSpan {
     /** Row index in the current rows array. Prefer rowKey when row order can change. */
     rowIndex?: number;
@@ -128,6 +134,16 @@ interface TableCellSpan {
     /** Number of columns covered by the merged cell. Defaults to 1. */
     colSpan?: number;
 }
+interface TableCellSpanRuleContext<Row extends object> {
+    row: Row;
+    rowIndex: number;
+    column: GridColumn<Row>;
+    columnIndex: number;
+    rows: Row[];
+    columns: GridColumn<Row>[];
+}
+type TableCellSpanRule<Row extends object> = (context: TableCellSpanRuleContext<Row>) => TableCellSpan | Omit<TableCellSpan, 'rowIndex' | 'rowKey' | 'columnKey'> | false | null | undefined;
+type TableCellSpans<Row extends object> = TableCellSpan[] | TableCellSpanRule<Row>;
 interface TableResolvedCellSpan {
     rowIndex: number;
     columnIndex: number;
@@ -149,6 +165,8 @@ interface GridColumn<Row> {
     key: string;
     /** Header label painted in the text layer. */
     title: string;
+    /** Custom React content rendered in the header DOM overlay. */
+    renderHeader?: (column: GridColumn<Row>) => ReactNode;
     /** Row field used as this column's cell value. Omit for utility columns. */
     dataIndex?: keyof Row;
     /** Preferred column width in pixels. Layout helpers enforce minimums. */
@@ -282,20 +300,26 @@ interface TableProps<Row extends object> {
     width?: number | string;
     /** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
     height?: number | string;
-    /** Shrink the grid to its real content height when there are fewer rows than the configured height can display. */
+    /** Shrink the grid to its real content height when there are fewer rows than the configured max height can display. Defaults to true. */
     autoHeight?: boolean;
+    /** Layout and sizing configuration. Prefer this over rowHeight/headerHeight for new code. */
+    layout?: TableLayoutConfig;
+    /** @deprecated Use layout.rowHeight instead. */
     rowHeight?: number;
+    /** @deprecated Use layout.headerHeight instead. */
     headerHeight?: number;
     fixedHeader?: boolean;
     locale?: TableLocaleConfig;
-    /** Hide vertical grid lines while keeping horizontal row separators. */
+    /** Hide vertical grid lines while keeping horizontal row separators. Prefer borderless for new code. */
+    borderless?: boolean;
+    /** @deprecated Use borderless instead. */
     verticalBorderless?: 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. */
     highlight?: TableHighlightConfig;
     /** Merged body cell configuration. Utility columns are ignored and horizontal spans are limited to the same fixed column region. */
-    cellSpans?: TableCellSpan[];
+    cellSpans?: TableCellSpans<Row>;
     loading?: boolean;
     /** Custom loading content. When provided, it is used for both initial loading and refresh loading. */
     loadingContent?: ReactNode;
@@ -348,7 +372,7 @@ interface ViewportRange {
     columnEnd: number;
 }
 
-declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
+declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, layout, rowHeight: rowHeightProp, headerHeight: headerHeightProp, fixedHeader, locale, borderless, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
 
 type LayoutColumn<Row> = GridColumn<Row> & {
     rowSelection?: boolean;
@@ -395,4 +419,4 @@ declare function hitTestColumn(metrics: ColumnMetric[], contentX: number): numbe
 
 type TableFilterValues = Record<string, string>;
 
-export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };
+export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type TableCellSpanRule, type TableCellSpanRuleContext, type TableCellSpans, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLayoutConfig, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableCellSpanRule as VelocityGridCellSpanRule, type TableCellSpanRuleContext as VelocityGridCellSpanRuleContext, type TableCellSpans as VelocityGridCellSpans, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLayoutConfig as VelocityGridLayoutConfig, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };

package/dist/index.d.ts

@@ -116,6 +116,12 @@ interface TableHighlightConfig {
     /** Highlight rows inserted optimistically through the built-in insert action. Pass a color string to customize the fill. Defaults to false. */
     insertedRows?: boolean | string;
 }
+interface TableLayoutConfig {
+    /** Fixed body row height in pixels. Defaults to 36. */
+    rowHeight?: number;
+    /** Header height in pixels. Defaults to 40. */
+    headerHeight?: number;
+}
 interface TableCellSpan {
     /** Row index in the current rows array. Prefer rowKey when row order can change. */
     rowIndex?: number;
@@ -128,6 +134,16 @@ interface TableCellSpan {
     /** Number of columns covered by the merged cell. Defaults to 1. */
     colSpan?: number;
 }
+interface TableCellSpanRuleContext<Row extends object> {
+    row: Row;
+    rowIndex: number;
+    column: GridColumn<Row>;
+    columnIndex: number;
+    rows: Row[];
+    columns: GridColumn<Row>[];
+}
+type TableCellSpanRule<Row extends object> = (context: TableCellSpanRuleContext<Row>) => TableCellSpan | Omit<TableCellSpan, 'rowIndex' | 'rowKey' | 'columnKey'> | false | null | undefined;
+type TableCellSpans<Row extends object> = TableCellSpan[] | TableCellSpanRule<Row>;
 interface TableResolvedCellSpan {
     rowIndex: number;
     columnIndex: number;
@@ -149,6 +165,8 @@ interface GridColumn<Row> {
     key: string;
     /** Header label painted in the text layer. */
     title: string;
+    /** Custom React content rendered in the header DOM overlay. */
+    renderHeader?: (column: GridColumn<Row>) => ReactNode;
     /** Row field used as this column's cell value. Omit for utility columns. */
     dataIndex?: keyof Row;
     /** Preferred column width in pixels. Layout helpers enforce minimums. */
@@ -282,20 +300,26 @@ interface TableProps<Row extends object> {
     width?: number | string;
     /** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
     height?: number | string;
-    /** Shrink the grid to its real content height when there are fewer rows than the configured height can display. */
+    /** Shrink the grid to its real content height when there are fewer rows than the configured max height can display. Defaults to true. */
     autoHeight?: boolean;
+    /** Layout and sizing configuration. Prefer this over rowHeight/headerHeight for new code. */
+    layout?: TableLayoutConfig;
+    /** @deprecated Use layout.rowHeight instead. */
     rowHeight?: number;
+    /** @deprecated Use layout.headerHeight instead. */
     headerHeight?: number;
     fixedHeader?: boolean;
     locale?: TableLocaleConfig;
-    /** Hide vertical grid lines while keeping horizontal row separators. */
+    /** Hide vertical grid lines while keeping horizontal row separators. Prefer borderless for new code. */
+    borderless?: boolean;
+    /** @deprecated Use borderless instead. */
     verticalBorderless?: 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. */
     highlight?: TableHighlightConfig;
     /** Merged body cell configuration. Utility columns are ignored and horizontal spans are limited to the same fixed column region. */
-    cellSpans?: TableCellSpan[];
+    cellSpans?: TableCellSpans<Row>;
     loading?: boolean;
     /** Custom loading content. When provided, it is used for both initial loading and refresh loading. */
     loadingContent?: ReactNode;
@@ -348,7 +372,7 @@ interface ViewportRange {
     columnEnd: number;
 }
 
-declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
+declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, layout, rowHeight: rowHeightProp, headerHeight: headerHeightProp, fixedHeader, locale, borderless, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
 
 type LayoutColumn<Row> = GridColumn<Row> & {
     rowSelection?: boolean;
@@ -395,4 +419,4 @@ declare function hitTestColumn(metrics: ColumnMetric[], contentX: number): numbe
 
 type TableFilterValues = Record<string, string>;
 
-export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };
+export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type TableCellSpanRule, type TableCellSpanRuleContext, type TableCellSpans, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLayoutConfig, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableCellSpanRule as VelocityGridCellSpanRule, type TableCellSpanRuleContext as VelocityGridCellSpanRuleContext, type TableCellSpans as VelocityGridCellSpans, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLayoutConfig as VelocityGridLayoutConfig, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };

package/dist/index.js

@@ -784,8 +784,9 @@ function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
   });
   const viewportWidth = options.viewportWidth ?? 0;
   if (viewportWidth <= left || columns.length === 0) return metrics;
-  const stretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right" && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-  const targets = stretchable.length > 0 ? stretchable : columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed !== "right");
+  const unsetWidthStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.width === void 0 && column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const dataStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const targets = unsetWidthStretchable.length > 0 ? unsetWidthStretchable : dataStretchable.length > 0 ? dataStretchable : [];
   if (targets.length === 0) return metrics;
   const extra = viewportWidth - left;
   const baseTotal = targets.reduce((sum, { index }) => sum + metrics[index].width, 0);
@@ -1039,7 +1040,7 @@ function paintGrid(options) {
       if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
       ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
       const column = columns[columnIndex];
-      if (!column.rowSelection && !column.rowDragHandle && !column.rowNumber && column.title) {
+      if (!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);
@@ -1298,12 +1299,14 @@ function Table({
   rowKey,
   width = "100%",
   height = "100%",
-  autoHeight = false,
-  rowHeight = 36,
-  headerHeight = 40,
+  autoHeight = true,
+  layout,
+  rowHeight: rowHeightProp,
+  headerHeight: headerHeightProp,
   fixedHeader = true,
   locale = "zh-CN",
-  verticalBorderless = false,
+  borderless,
+  verticalBorderless,
   striped = false,
   highlight,
   cellSpans = [],
@@ -1345,8 +1348,13 @@ function Table({
   style,
   ariaLabel = "Data grid"
 }) {
+  const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
+  const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const { language, labels } = useMemo(() => resolveGridLocale(locale), [locale]);
-  const hasVerticalBorders = !verticalBorderless;
+  const customHeaderContentRefs = useRef2(/* @__PURE__ */ new Map());
+  const [measuredHeaderHeight, setMeasuredHeaderHeight] = useState4(0);
+  const headerHeight = Math.max(baseHeaderHeight, measuredHeaderHeight);
+  const hasVerticalBorders = !(borderless ?? verticalBorderless ?? false);
   const hasStripedRows = Boolean(striped);
   const stripedColor = typeof striped === "string" ? striped : void 0;
   const editedCellsHighlight = highlight?.editedCells ?? false;
@@ -1452,6 +1460,28 @@ function Table({
     if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
     if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
   }, []);
+  const measureCustomHeaderHeight = useCallback2(() => {
+    let nextHeight = 0;
+    customHeaderContentRefs.current.forEach((node) => {
+      nextHeight = Math.max(nextHeight, Math.ceil(node.scrollHeight) + 16);
+    });
+    setMeasuredHeaderHeight((current) => current === nextHeight ? current : nextHeight);
+  }, []);
+  useLayoutEffect2(() => {
+    const activeCustomHeaderKeys = new Set(columns.filter((column) => column.renderHeader).map((column) => column.key));
+    customHeaderContentRefs.current.forEach((_, key) => {
+      if (!activeCustomHeaderKeys.has(key)) customHeaderContentRefs.current.delete(key);
+    });
+    if (customHeaderContentRefs.current.size === 0) {
+      setMeasuredHeaderHeight(0);
+      return;
+    }
+    measureCustomHeaderHeight();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measureCustomHeaderHeight);
+    customHeaderContentRefs.current.forEach((node) => observer.observe(node));
+    return () => observer.disconnect();
+  }, [columns, measureCustomHeaderHeight, viewport.width]);
   const [filterEditor, setFilterEditor] = useState4(null);
   const [contextMenu, setContextMenu] = useState4(null);
   const [insertCounts, setInsertCounts] = useState4({ before: 1, after: 1 });
@@ -1460,6 +1490,7 @@ function Table({
   const [insertBusy, setInsertBusy] = useState4(false);
   const [deleteBusy, setDeleteBusy] = useState4(false);
   const [toast, setToast] = useState4(null);
+  const [resizeGuideX, setResizeGuideX] = useState4(null);
   const [hoveredHeaderAction, setHoveredHeaderAction] = useState4(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState4(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = useState4(null);
@@ -1613,14 +1644,30 @@ function Table({
     rowIndexByKeyRef.current.set(key, index);
     return key;
   }, [getDataRowKey]);
+  const resolvedCellSpans = useMemo(() => {
+    if (Array.isArray(cellSpans)) return cellSpans;
+    const spans = [];
+    rows.forEach((row, rowIndex) => {
+      columns.forEach((column, columnIndex) => {
+        const span = cellSpans({ row, rowIndex, column, columnIndex, rows, columns });
+        if (!span) return;
+        spans.push({
+          rowIndex,
+          columnKey: column.key,
+          ...span
+        });
+      });
+    });
+    return spans;
+  }, [cellSpans, columns, rows]);
   const cellSpanLookup = useMemo(() => {
-    if (cellSpans.length === 0) return createEmptyCellSpanLookup();
+    if (resolvedCellSpans.length === 0) return createEmptyCellSpanLookup();
     const rowIndexByKey = /* @__PURE__ */ new Map();
     rows.forEach((row, index) => rowIndexByKey.set(getRowKey(row, index), index));
     const columnIndexByKey = new Map(columns.map((column, index) => [column.key, index]));
     const lookup = createEmptyCellSpanLookup();
     const occupied = /* @__PURE__ */ new Set();
-    for (const span of cellSpans) {
+    for (const span of resolvedCellSpans) {
       const rowIndex = span.rowKey !== void 0 ? rowIndexByKey.get(span.rowKey) : span.rowIndex;
       const columnIndex = columnIndexByKey.get(span.columnKey);
       if (rowIndex === void 0 || columnIndex === void 0) continue;
@@ -1656,7 +1703,7 @@ function Table({
       }
     }
     return lookup;
-  }, [cellSpans, columns, getRowKey, rows]);
+  }, [columns, getRowKey, resolvedCellSpans, rows]);
   const selectedRowKeySet = useMemo(() => new Set(rowKeys), [rowKeys]);
   const selectedColumnKeySet = useMemo(() => new Set(columnKeys), [columnKeys]);
   const insertedRowKeySet = useMemo(() => insertedRowKeys, [insertedRowKeys]);
@@ -1909,6 +1956,16 @@ function Table({
     }
     return closest;
   }, [columnResizable, columns, getDisplayedColumnLeft, metrics]);
+  const findResizeNeighbor = useCallback2((columnIndex) => {
+    const resizedColumn = columns[columnIndex];
+    for (let index = columnIndex + 1; index < columns.length; index += 1) {
+      const column = columns[index];
+      if (column.rowSelection || column.rowDragHandle || column.rowNumber) continue;
+      if (resizedColumn?.fixed && column.fixed !== resizedColumn.fixed) return -1;
+      return index;
+    }
+    return -1;
+  }, [columns]);
   const locateHeaderAction = useCallback2((clientX, columnIndex) => {
     if (columnIndex < 0 || !canvasRef.current) return null;
     const column = columns[columnIndex];
@@ -2487,26 +2544,48 @@ function Table({
     if (resizeIndex >= 0) {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
-      columnDragRef.current = { type: "resize", columnIndex: resizeIndex, startX: event.clientX, startWidth: metrics[resizeIndex].width };
+      const neighborIndex = findResizeNeighbor(resizeIndex);
+      const startGuideX = getDisplayedColumnLeft(resizeIndex) + metrics[resizeIndex].width;
+      columnDragRef.current = {
+        type: "resize",
+        columnIndex: resizeIndex,
+        startX: event.clientX,
+        startWidth: metrics[resizeIndex].width,
+        startGuideX,
+        neighborIndex,
+        startNeighborWidth: neighborIndex >= 0 ? metrics[neighborIndex].width : 0
+      };
       suppressClickRef.current = true;
-      setDragGuide(getDisplayedColumnLeft(resizeIndex) + metrics[resizeIndex].width);
+      setResizeGuideX(startGuideX);
       return;
     }
-  }, [fixedHeader, getDisplayedColumnLeft, headerHeight, locateResizeHandle, metrics, setDragGuide]);
+  }, [findResizeNeighbor, fixedHeader, getDisplayedColumnLeft, headerHeight, locateResizeHandle, metrics]);
   const handleColumnPointerMove = useCallback2((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
-    const width2 = Math.max(getMinimumColumnWidth(columns[drag.columnIndex], columnDraggable), Math.round(drag.startWidth + event.clientX - drag.startX));
-    onColumnResize?.(columns[drag.columnIndex].key, width2);
-    setDragGuide(getDisplayedColumnLeft(drag.columnIndex) + width2);
-  }, [columnDraggable, columns, getDisplayedColumnLeft, onColumnResize, setDragGuide]);
+    const column = columns[drag.columnIndex];
+    const minWidth = getMinimumColumnWidth(column, columnDraggable);
+    let delta = Math.round(event.clientX - drag.startX);
+    if (drag.neighborIndex >= 0) {
+      const neighbor = columns[drag.neighborIndex];
+      const minNeighborWidth = getMinimumColumnWidth(neighbor, columnDraggable);
+      delta = Math.max(minWidth - drag.startWidth, Math.min(drag.startNeighborWidth - minNeighborWidth, delta));
+      onColumnResize?.(column.key, drag.startWidth + delta);
+      onColumnResize?.(neighbor.key, drag.startNeighborWidth - delta);
+      setResizeGuideX(drag.startGuideX + delta);
+      return;
+    }
+    const width2 = Math.max(minWidth, Math.round(drag.startWidth + delta));
+    onColumnResize?.(column.key, width2);
+    setResizeGuideX(drag.startGuideX + width2 - drag.startWidth);
+  }, [columnDraggable, columns, onColumnResize]);
   const handleColumnPointerUp = useCallback2((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
     columnDragRef.current = null;
-    setDragGuide(null);
-  }, [setDragGuide]);
+    setResizeGuideX(null);
+  }, []);
   const queueSortStateChange = useCallback2((next) => {
     setDisplaySortState(next);
     if (sortDebounceRef.current !== null) clearTimeout(sortDebounceRef.current);
@@ -2913,6 +2992,35 @@ function Table({
         column.key
       );
     }
+    if (column.renderHeader) {
+      const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
+      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18;
+      return /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: "rvg-header-title is-custom",
+          style: {
+            left,
+            top: fixedHeader ? 0 : -currentScrollTop,
+            width: Math.max(0, metrics[columnIndex].width - actionWidth),
+            height: headerHeight,
+            justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
+            textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
+          },
+          children: /* @__PURE__ */ jsx7(
+            "span",
+            {
+              ref: (node) => {
+                if (node) customHeaderContentRefs.current.set(column.key, node);
+                else customHeaderContentRefs.current.delete(column.key);
+              },
+              children: column.renderHeader(column)
+            }
+          )
+        },
+        column.key
+      );
+    }
     return null;
   };
   const rangeHandlePosition = (() => {
@@ -3616,6 +3724,13 @@ function Table({
     ] }) }),
     toast && /* @__PURE__ */ jsx7("div", { className: `rvg-toast is-${toast.type}`, role: "status", children: toast.message }),
     /* @__PURE__ */ jsx7("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    resizeGuideX !== null && /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "rvg-column-guide is-resizing",
+        style: { display: "block", transform: `translateX(${Math.round(resizeGuideX)}px)` }
+      }
+    ),
     /* @__PURE__ */ jsx7("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),
     filterEditor && /* @__PURE__ */ jsxs7("div", { ref: filterRef, className: "rvg-filter", style: { left: filterEditor.left, top: filterEditor.top }, children: [
       /* @__PURE__ */ jsx7(

package/package.json

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