@lensui/lens-table 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -893,6 +893,8 @@ function ellipsizeText(context, text, maxWidth) {
 }
 function paintGrid(options) {
   const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview } = options;
+  const headerLeafTop = options.headerLeafTop ?? 0;
+  const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
   const bodyTop = options.bodyTop ?? headerHeight;
   const getCellSpan = (rowIndex, columnIndex) => options.cellSpans.get(getCellCoordKey(rowIndex, columnIndex));
@@ -909,9 +911,16 @@ function paintGrid(options) {
   ctx.fillRect(0, 0, width, height);
   ctx.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
   ctx.textBaseline = "middle";
-  const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? Math.max(value, metrics[index].right) : value, 0);
+  const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
   const rightFixedWidth = columns.reduce((value, column, index) => column.fixed === "right" ? value + metrics[index].width : value, 0);
   const rightFixedLeft = width - rightFixedWidth;
+  const leftOffsets = /* @__PURE__ */ new Map();
+  let leftOffset = 0;
+  for (let index = 0; index < columns.length; index += 1) {
+    if (columns[index].fixed !== "left") continue;
+    leftOffsets.set(index, leftOffset);
+    leftOffset += metrics[index].width;
+  }
   const rightOffsets = /* @__PURE__ */ new Map();
   let rightOffset = 0;
   for (let index = columns.length - 1; index >= 0; index -= 1) {
@@ -919,8 +928,14 @@ function paintGrid(options) {
     rightOffsets.set(index, rightOffset);
     rightOffset += metrics[index].width;
   }
+  const scrollableLefts = /* @__PURE__ */ new Map();
+  let scrollableLeft = leftFixedWidth;
+  for (let index = 0; index < columns.length; index += 1) {
+    scrollableLefts.set(index, scrollableLeft);
+    if (columns[index].fixed === void 0) scrollableLeft += metrics[index].width;
+  }
   const getColumnX = (index) => {
-    return columns[index].fixed === "left" ? metrics[index].left : columns[index].fixed === "right" ? width - (rightOffsets.get(index) ?? 0) - metrics[index].width : metrics[index].left - scrollLeft;
+    return columns[index].fixed === "left" ? leftOffsets.get(index) ?? 0 : columns[index].fixed === "right" ? width - (rightOffsets.get(index) ?? 0) - metrics[index].width : (scrollableLefts.get(index) ?? leftFixedWidth) - scrollLeft;
   };
   const paintBodyColumns = (layer) => {
     const rowStart = Math.max(0, range.rowStart - Math.max(0, options.maxRowSpan - 1));
@@ -1070,7 +1085,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.renderHeader && column.title) {
+      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);
@@ -1087,11 +1102,11 @@ function paintGrid(options) {
         const textX = titleAlign === "right" ? x + contentWidth - padding : titleAlign === "center" ? x + centeredTextX : x + padding;
         ctx.save();
         ctx.beginPath();
-        ctx.rect(x + 2, headerY + 1, Math.max(0, clipWidth - 4), headerHeight - 2);
+        ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
         ctx.fillStyle = colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
-        ctx.fillText(title, textX, headerY + headerHeight / 2);
+        ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
       }
     }
@@ -1099,22 +1114,6 @@ function paintGrid(options) {
   paintHeaderColumns("scroll");
   paintHeaderColumns("left");
   paintHeaderColumns("right");
-  if (leftFixedWidth > 0 && scrollLeft > 0) {
-    const shadowWidth = 10;
-    const shadow = ctx.createLinearGradient(leftFixedWidth, 0, leftFixedWidth + shadowWidth, 0);
-    shadow.addColorStop(0, "rgba(5, 5, 5, 0.06)");
-    shadow.addColorStop(1, "rgba(5, 5, 5, 0)");
-    ctx.fillStyle = shadow;
-    ctx.fillRect(leftFixedWidth, 0, shadowWidth, height);
-  }
-  if (rightFixedWidth > 0 && scrollLeft < (metrics[metrics.length - 1]?.right ?? 0) - width) {
-    const shadowWidth = 10;
-    const shadow = ctx.createLinearGradient(rightFixedLeft - shadowWidth, 0, rightFixedLeft, 0);
-    shadow.addColorStop(0, "rgba(5, 5, 5, 0)");
-    shadow.addColorStop(1, "rgba(5, 5, 5, 0.06)");
-    ctx.fillStyle = shadow;
-    ctx.fillRect(rightFixedLeft - shadowWidth, 0, shadowWidth, height);
-  }
   if (rightFixedWidth > 0 && !verticalBorderless) {
     ctx.fillStyle = colors.grid;
     ctx.fillRect(rightFixedLeft - 1, 0, 1, height);
@@ -1266,6 +1265,45 @@ var getRowNumberColumnWidth = (rowCount) => {
   const digits = String(Math.max(1, rowCount)).length;
   return digits <= 4 ? 44 : 44 + (digits - 4) * 8;
 };
+function getColumnDepth(column) {
+  if (!column.children?.length) return 1;
+  return 1 + Math.max(...column.children.map(getColumnDepth));
+}
+function flattenDataColumns(columns, inheritedFixed, insideGroup = false) {
+  return columns.flatMap((column) => {
+    if (!column.children?.length) {
+      return insideGroup ? [{ ...column, fixed: inheritedFixed }] : [column];
+    }
+    return flattenDataColumns(column.children, column.fixed ?? inheritedFixed, true);
+  });
+}
+function buildHeaderCells(sourceColumns, utilityColumnCount, depth) {
+  const cells = [];
+  let leafIndex = utilityColumnCount;
+  const walk = (column, level, inheritedFixed, insideGroup, rootIndex, parentKey) => {
+    const fixedColumn = insideGroup ? { ...column, fixed: inheritedFixed } : column;
+    if (!fixedColumn.children?.length) {
+      const startIndex2 = leafIndex;
+      leafIndex += 1;
+      cells.push({ key: fixedColumn.key, column: fixedColumn, level: depth - 1, startIndex: startIndex2, endIndex: startIndex2, leaf: true, parentKey, rootIndex });
+      return { startIndex: startIndex2, endIndex: startIndex2 };
+    }
+    const startIndex = leafIndex;
+    fixedColumn.children.forEach((child) => walk(child, level + 1, fixedColumn.fixed, true, rootIndex, fixedColumn.key));
+    const endIndex = leafIndex - 1;
+    cells.push({ key: fixedColumn.key, column: fixedColumn, level, startIndex, endIndex, leaf: false, parentKey, rootIndex });
+    return { startIndex, endIndex };
+  };
+  sourceColumns.forEach((column, index) => walk(column, 0, void 0, false, index));
+  return cells;
+}
+function hasNestedFixedColumns(columns, insideGroup = false) {
+  return columns.some((column) => insideGroup && column.fixed !== void 0 || (column.children?.length ? hasNestedFixedColumns(column.children, true) : false));
+}
+function isProductionRuntime() {
+  const env = globalThis.process?.env?.NODE_ENV;
+  return env === "production";
+}
 var createPendingInsertId = () => `table-inserted-${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`}`;
 var waitForPaint = () => new Promise((resolve) => {
   requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
@@ -1380,10 +1418,24 @@ function Table({
 }) {
   const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
   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]);
   const customHeaderContentRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
-  const [measuredHeaderHeight, setMeasuredHeaderHeight] = (0, import_react5.useState)(0);
-  const headerHeight = Math.max(baseHeaderHeight, measuredHeaderHeight);
+  const customHeaderMeasurementsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = (0, import_react5.useState)([]);
+  const headerRowHeights = (0, import_react5.useMemo)(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
+  const headerRowOffsets = (0, import_react5.useMemo)(() => {
+    const offsets = [];
+    let top = 0;
+    headerRowHeights.forEach((height2) => {
+      offsets.push(top);
+      top += height2;
+    });
+    return offsets;
+  }, [headerRowHeights]);
+  const headerHeight = headerRowHeights.reduce((total, height2) => total + height2, 0);
+  const headerLeafTop = headerRowOffsets[headerDepth - 1] ?? 0;
+  const headerLeafHeight = headerRowHeights[headerDepth - 1] ?? baseHeaderHeight;
   const hasVerticalBorders = !(borderless ?? verticalBorderless ?? false);
   const hasStripedRows = Boolean(striped);
   const stripedColor = typeof striped === "string" ? striped : void 0;
@@ -1403,6 +1455,13 @@ function Table({
   const summaryEmptyValue = typeof summary === "object" ? summary.emptyValue ?? "" : "";
   const contextMenuEnabled = contextMenuConfig !== false;
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
+  const [resizedColumnWidths, setResizedColumnWidths] = (0, import_react5.useState)({});
+  const leafSourceColumns = (0, import_react5.useMemo)(() => flattenDataColumns(sourceColumns), [sourceColumns]);
+  (0, import_react5.useEffect)(() => {
+    if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
+      console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
+    }
+  }, [sourceColumns]);
   const columns = (0, import_react5.useMemo)(() => {
     const utilityColumns = [];
     if (rowDraggable) {
@@ -1414,9 +1473,24 @@ function Table({
     if (rowNumber) {
       utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: "left", rowNumber: true });
     }
-    return [...utilityColumns, ...sourceColumns];
-  }, [rowDraggable, rowNumber, rowSelection, sourceColumns, sourceRows.length]);
+    const dataColumns = leafSourceColumns.map((column) => {
+      const resizedWidth = resizedColumnWidths[column.key];
+      return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
+    });
+    return [...utilityColumns, ...dataColumns];
+  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelection, sourceRows.length]);
   const utilityColumnCount = (rowDraggable ? 1 : 0) + (rowSelection ? 1 : 0) + (rowNumber ? 1 : 0);
+  const headerCells = (0, import_react5.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
+  const activeCustomHeaderLevels = (0, import_react5.useMemo)(() => {
+    const levels = /* @__PURE__ */ new Map();
+    columns.forEach((column) => {
+      if (column.renderHeader) levels.set(column.key, headerDepth - 1);
+    });
+    headerCells.forEach((cell) => {
+      if (cell.column.renderHeader) levels.set(`group:${cell.key}:${cell.level}`, cell.level);
+    });
+    return levels;
+  }, [columns, headerCells, headerDepth]);
   const canvasRef = (0, import_react5.useRef)(null);
   const scrollerRef = (0, import_react5.useRef)(null);
   const frameRef = (0, import_react5.useRef)(null);
@@ -1434,6 +1508,14 @@ function Table({
   const dragGuideRef = (0, import_react5.useRef)(null);
   const rowDragGuideRef = (0, import_react5.useRef)(null);
   const selectionFocusRef = (0, import_react5.useRef)(null);
+  const verticalScrollbarRef = (0, import_react5.useRef)(null);
+  const verticalScrollbarThumbRef = (0, import_react5.useRef)(null);
+  const verticalScrollbarDragRef = (0, import_react5.useRef)(null);
+  const horizontalScrollbarRef = (0, import_react5.useRef)(null);
+  const horizontalScrollbarThumbRef = (0, import_react5.useRef)(null);
+  const horizontalScrollbarDragRef = (0, import_react5.useRef)(null);
+  const verticalScrollbarVisibilityTimerRef = (0, import_react5.useRef)(null);
+  const horizontalScrollbarVisibilityTimerRef = (0, import_react5.useRef)(null);
   const rowByKeyRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
   const rowIndexByKeyRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
   const headerIconsRef = (0, import_react5.useRef)(null);
@@ -1486,24 +1568,57 @@ function Table({
     rangeDragRef.current = null;
     setSelectionRange(null);
   }, [rangeSelection]);
+  (0, import_react5.useEffect)(() => {
+    setResizedColumnWidths((current) => {
+      const sourceColumnByKey = new Map(leafSourceColumns.map((column) => [column.key, column]));
+      let changed = false;
+      const next = {};
+      Object.entries(current).forEach(([key, value]) => {
+        const sourceColumn = sourceColumnByKey.get(key);
+        if (!sourceColumn) {
+          changed = true;
+          return;
+        }
+        if (sourceColumn.width !== void 0 && sourceColumn.width !== value) {
+          changed = true;
+          return;
+        }
+        next[key] = value;
+      });
+      return changed ? next : current;
+    });
+  }, [leafSourceColumns]);
   (0, import_react5.useEffect)(() => () => {
     if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
     if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
   }, []);
   const measureCustomHeaderHeight = (0, import_react5.useCallback)(() => {
-    let nextHeight = 0;
+    const nextHeights = Array.from({ length: headerDepth }, () => baseHeaderHeight);
     customHeaderContentRefs.current.forEach((node) => {
-      nextHeight = Math.max(nextHeight, Math.ceil(node.scrollHeight) + 16);
+      const headerCell = node.closest(".rvg-header-title");
+      const key = headerCell?.dataset.measureKey;
+      const level = key ? activeCustomHeaderLevels.get(key) : void 0;
+      if (!key || level === void 0 || level < 0 || level >= nextHeights.length) return;
+      customHeaderMeasurementsRef.current.set(key, { level, height: Math.ceil(node.scrollHeight) + 16 });
     });
-    setMeasuredHeaderHeight((current) => current === nextHeight ? current : nextHeight);
-  }, []);
+    customHeaderMeasurementsRef.current.forEach((measurement, key) => {
+      if (!activeCustomHeaderLevels.has(key)) return;
+      nextHeights[measurement.level] = Math.max(nextHeights[measurement.level], measurement.height);
+    });
+    setMeasuredHeaderRowHeights((current) => {
+      const changed = nextHeights.length !== current.length || nextHeights.some((height2, index) => height2 !== current[index]);
+      return changed ? nextHeights : current;
+    });
+  }, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
   (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 (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
+    });
+    customHeaderMeasurementsRef.current.forEach((_, key) => {
+      if (!activeCustomHeaderLevels.has(key)) customHeaderMeasurementsRef.current.delete(key);
     });
-    if (customHeaderContentRefs.current.size === 0) {
-      setMeasuredHeaderHeight(0);
+    if (activeCustomHeaderLevels.size === 0) {
+      setMeasuredHeaderRowHeights([]);
       return;
     }
     measureCustomHeaderHeight();
@@ -1511,7 +1626,7 @@ function Table({
     const observer = new ResizeObserver(measureCustomHeaderHeight);
     customHeaderContentRefs.current.forEach((node) => observer.observe(node));
     return () => observer.disconnect();
-  }, [columns, measureCustomHeaderHeight, viewport.width]);
+  }, [activeCustomHeaderLevels, 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 });
@@ -1521,6 +1636,7 @@ function Table({
   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 [resizeGuideTop, setResizeGuideTop] = (0, import_react5.useState)(0);
   const [hoveredHeaderAction, setHoveredHeaderAction] = (0, import_react5.useState)(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0, import_react5.useState)(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = (0, import_react5.useState)(null);
@@ -1605,7 +1721,17 @@ function Table({
   const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, { columnDraggable, viewportWidth: viewport.width }), [columnDraggable, columns, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
-  const fixedWidth = (0, import_react5.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "left" ? Math.max(width2, metrics[index].right) : width2, 0), [columns, metrics]);
+  const fixedWidth = (0, import_react5.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
+  const leftFixedOffsets = (0, import_react5.useMemo)(() => {
+    const offsets = /* @__PURE__ */ new Map();
+    let offset = 0;
+    for (let index = 0; index < columns.length; index += 1) {
+      if (columns[index].fixed !== "left") continue;
+      offsets.set(index, offset);
+      offset += metrics[index].width;
+    }
+    return offsets;
+  }, [columns, metrics]);
   const rightFixedWidth = (0, import_react5.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "right" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
   const rightFixedOffsets = (0, import_react5.useMemo)(() => {
     const offsets = /* @__PURE__ */ new Map();
@@ -1617,6 +1743,16 @@ function Table({
     }
     return offsets;
   }, [columns, metrics]);
+  const scrollableColumnLefts = (0, import_react5.useMemo)(() => {
+    const lefts = [];
+    let width2 = fixedWidth;
+    for (let index = 0; index < columns.length; index += 1) {
+      lefts[index] = width2;
+      if (columns[index].fixed === void 0) width2 += metrics[index].width;
+    }
+    return lefts;
+  }, [columns, fixedWidth, metrics]);
+  const getScrollableColumnLeft = (0, import_react5.useCallback)((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
   const hasRowSelectionColumn = (0, import_react5.useMemo)(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
   const hasSummaryRow = (0, import_react5.useMemo)(() => rows.length > 0 && summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, rows.length, summaryEnabled]);
@@ -1627,7 +1763,7 @@ function Table({
   const realContentHeight = bodyTop + bodyContentHeight + bottomSummaryHeight + (contentWidth > viewport.width ? horizontalScrollbarHeight : 0);
   const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
   const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
-  const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight : 0) - topSummaryHeight);
+  const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
   const [summaryState, setSummaryState] = (0, import_react5.useState)(() => ({ columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
   const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.columns !== columns || summaryState.rows !== rows);
   const summaryValues = hasSummaryRow && summaryState.columns === columns && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
@@ -1803,8 +1939,8 @@ function Table({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
-  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerHeight, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
+  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -1841,6 +1977,8 @@ function Table({
     if (sortDebounceRef.current !== null) clearTimeout(sortDebounceRef.current);
     if (textFrameRef.current !== null) cancelAnimationFrame(textFrameRef.current);
     if (toastTimerRef.current !== null) clearTimeout(toastTimerRef.current);
+    if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
+    if (horizontalScrollbarVisibilityTimerRef.current !== null) clearTimeout(horizontalScrollbarVisibilityTimerRef.current);
   }, []);
   (0, import_react5.useEffect)(() => {
     const scroller = scrollerRef.current;
@@ -1892,9 +2030,204 @@ function Table({
     scroller.addEventListener("scroll", lockScroll);
     return () => scroller.removeEventListener("scroll", lockScroll);
   }, [insertBusy]);
+  const showCustomScrollbar = (0, import_react5.useCallback)((axis, persist = false) => {
+    const showVertical = axis === "vertical" || axis === "both";
+    const showHorizontal = axis === "horizontal" || axis === "both";
+    if (showVertical) {
+      verticalScrollbarRef.current?.classList.add("is-active");
+      if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
+      if (!persist) {
+        verticalScrollbarVisibilityTimerRef.current = setTimeout(() => {
+          verticalScrollbarRef.current?.classList.remove("is-active");
+          verticalScrollbarVisibilityTimerRef.current = null;
+        }, 900);
+      }
+    }
+    if (showHorizontal) {
+      horizontalScrollbarRef.current?.classList.add("is-active");
+      if (horizontalScrollbarVisibilityTimerRef.current !== null) clearTimeout(horizontalScrollbarVisibilityTimerRef.current);
+      if (!persist) {
+        horizontalScrollbarVisibilityTimerRef.current = setTimeout(() => {
+          horizontalScrollbarRef.current?.classList.remove("is-active");
+          horizontalScrollbarVisibilityTimerRef.current = null;
+        }, 900);
+      }
+    }
+  }, []);
+  const keepCustomScrollbarVisible = (0, import_react5.useCallback)((axis) => {
+    showCustomScrollbar(axis, true);
+  }, [showCustomScrollbar]);
+  const releaseCustomScrollbarVisible = (0, import_react5.useCallback)((axis) => {
+    if (axis === "vertical" && verticalScrollbarDragRef.current) return;
+    if (axis === "horizontal" && horizontalScrollbarDragRef.current) return;
+    showCustomScrollbar(axis);
+  }, [showCustomScrollbar]);
+  const updateCustomScrollbars = (0, import_react5.useCallback)(() => {
+    const scroller = scrollerRef.current;
+    const verticalTrack = verticalScrollbarRef.current;
+    const verticalThumb = verticalScrollbarThumbRef.current;
+    const horizontalTrack = horizontalScrollbarRef.current;
+    const horizontalThumb = horizontalScrollbarThumbRef.current;
+    if (!scroller || !verticalTrack || !verticalThumb || !horizontalTrack || !horizontalThumb) return;
+    const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
+    if (maxScrollTop <= 1 || renderHeight <= 0) {
+      verticalTrack.style.display = "none";
+    } else {
+      const top = fixedHeader ? bodyTop : 0;
+      const bottom = bottomSummaryHeight;
+      const trackHeight = Math.max(0, effectiveHeight - top - bottom);
+      if (trackHeight <= 0) {
+        verticalTrack.style.display = "none";
+      } else {
+        const thumbHeight = Math.max(28, Math.round(trackHeight * (scroller.clientHeight / scroller.scrollHeight)));
+        const maxThumbTop = Math.max(0, trackHeight - thumbHeight);
+        const thumbTop = maxScrollTop > 0 ? Math.round(scroller.scrollTop / maxScrollTop * maxThumbTop) : 0;
+        verticalTrack.style.display = "block";
+        verticalTrack.style.top = `${top}px`;
+        verticalTrack.style.bottom = `${bottom}px`;
+        verticalThumb.style.height = `${Math.min(trackHeight, thumbHeight)}px`;
+        verticalThumb.style.transform = `translateY(${thumbTop}px)`;
+      }
+    }
+    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;
+    if (maxScrollLeft <= 1 || viewport.width <= 0) {
+      horizontalTrack.style.display = "none";
+      return;
+    }
+    const trackLeft = fixedWidth;
+    const trackRight = rightFixedWidth;
+    const trackWidth = Math.max(0, viewport.width - trackLeft - trackRight);
+    if (trackWidth <= 0) {
+      horizontalTrack.style.display = "none";
+      return;
+    }
+    const thumbWidth = Math.max(36, Math.round(trackWidth * (scroller.clientWidth / scroller.scrollWidth)));
+    const maxThumbLeft = Math.max(0, trackWidth - thumbWidth);
+    const thumbLeft = maxScrollLeft > 0 ? Math.round(scroller.scrollLeft / maxScrollLeft * maxThumbLeft) : 0;
+    horizontalTrack.style.display = "block";
+    horizontalTrack.style.left = `${trackLeft}px`;
+    horizontalTrack.style.right = `${trackRight}px`;
+    horizontalTrack.style.bottom = `${bottomSummaryHeight + 2}px`;
+    horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
+    horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
+  }, [bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, renderHeight, rightFixedWidth, viewport.width]);
+  (0, import_react5.useLayoutEffect)(() => {
+    updateCustomScrollbars();
+  }, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
+  const handleVerticalScrollbarPointerDown = (0, import_react5.useCallback)((event) => {
+    const scroller = scrollerRef.current;
+    const track = verticalScrollbarRef.current;
+    const thumb = verticalScrollbarThumbRef.current;
+    if (!scroller || !track || !thumb || event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const trackRect = track.getBoundingClientRect();
+    const thumbRect = thumb.getBoundingClientRect();
+    const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
+    const trackHeight = trackRect.height;
+    const thumbHeight = thumbRect.height;
+    showCustomScrollbar("vertical", true);
+    if (event.target === thumb) {
+      verticalScrollbarDragRef.current = {
+        pointerId: event.pointerId,
+        startY: event.clientY,
+        startTop: thumbRect.top - trackRect.top,
+        trackHeight,
+        thumbHeight,
+        maxScrollTop
+      };
+      return;
+    }
+    const nextThumbTop = Math.max(0, Math.min(trackHeight - thumbHeight, event.clientY - trackRect.top - thumbHeight / 2));
+    const maxThumbTop = Math.max(1, trackHeight - thumbHeight);
+    scroller.scrollTop = nextThumbTop / maxThumbTop * maxScrollTop;
+    updateCustomScrollbars();
+    verticalScrollbarDragRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      startTop: nextThumbTop,
+      trackHeight,
+      thumbHeight,
+      maxScrollTop
+    };
+  }, [showCustomScrollbar, updateCustomScrollbars]);
+  const handleVerticalScrollbarPointerMove = (0, import_react5.useCallback)((event) => {
+    const drag = verticalScrollbarDragRef.current;
+    const scroller = scrollerRef.current;
+    if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
+    event.preventDefault();
+    const maxThumbTop = Math.max(1, drag.trackHeight - drag.thumbHeight);
+    const nextThumbTop = Math.max(0, Math.min(maxThumbTop, drag.startTop + event.clientY - drag.startY));
+    scroller.scrollTop = nextThumbTop / maxThumbTop * drag.maxScrollTop;
+    updateCustomScrollbars();
+  }, [updateCustomScrollbars]);
+  const handleVerticalScrollbarPointerUp = (0, import_react5.useCallback)((event) => {
+    const drag = verticalScrollbarDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    verticalScrollbarDragRef.current = null;
+    showCustomScrollbar("vertical");
+  }, [showCustomScrollbar]);
+  const handleHorizontalScrollbarPointerDown = (0, import_react5.useCallback)((event) => {
+    const scroller = scrollerRef.current;
+    const track = horizontalScrollbarRef.current;
+    const thumb = horizontalScrollbarThumbRef.current;
+    if (!scroller || !track || !thumb || event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const trackRect = track.getBoundingClientRect();
+    const thumbRect = thumb.getBoundingClientRect();
+    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;
+    const trackWidth = trackRect.width;
+    const thumbWidth = thumbRect.width;
+    showCustomScrollbar("horizontal", true);
+    if (event.target === thumb) {
+      horizontalScrollbarDragRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startLeft: thumbRect.left - trackRect.left,
+        trackWidth,
+        thumbWidth,
+        maxScrollLeft
+      };
+      return;
+    }
+    const nextThumbLeft = Math.max(0, Math.min(trackWidth - thumbWidth, event.clientX - trackRect.left - thumbWidth / 2));
+    const maxThumbLeft = Math.max(1, trackWidth - thumbWidth);
+    scroller.scrollLeft = nextThumbLeft / maxThumbLeft * maxScrollLeft;
+    updateCustomScrollbars();
+    horizontalScrollbarDragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startLeft: nextThumbLeft,
+      trackWidth,
+      thumbWidth,
+      maxScrollLeft
+    };
+  }, [showCustomScrollbar, updateCustomScrollbars]);
+  const handleHorizontalScrollbarPointerMove = (0, import_react5.useCallback)((event) => {
+    const drag = horizontalScrollbarDragRef.current;
+    const scroller = scrollerRef.current;
+    if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
+    event.preventDefault();
+    const maxThumbLeft = Math.max(1, drag.trackWidth - drag.thumbWidth);
+    const nextThumbLeft = Math.max(0, Math.min(maxThumbLeft, drag.startLeft + event.clientX - drag.startX));
+    scroller.scrollLeft = nextThumbLeft / maxThumbLeft * drag.maxScrollLeft;
+    updateCustomScrollbars();
+  }, [updateCustomScrollbars]);
+  const handleHorizontalScrollbarPointerUp = (0, import_react5.useCallback)((event) => {
+    const drag = horizontalScrollbarDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    horizontalScrollbarDragRef.current = null;
+    showCustomScrollbar("horizontal");
+  }, [showCustomScrollbar]);
   const handleScroll = (0, import_react5.useCallback)(() => {
     const element = scrollerRef.current;
     if (!element) return;
+    const previousScroll = scrollRef.current;
+    const scrollDeltaX = element.scrollLeft - previousScroll.left;
+    const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {
@@ -1905,7 +2238,7 @@ function Table({
       if (!validSelection) {
         focus.style.display = "none";
       } else {
-        const rawLeft = column.fixed === "left" ? metric.left : column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(selection.columnIndex) ?? 0) - metric.width : metric.left - element.scrollLeft;
+        const rawLeft = column.fixed === "left" ? leftFixedOffsets.get(selection.columnIndex) ?? 0 : column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(selection.columnIndex) ?? 0) - metric.width : getScrollableColumnLeft(selection.columnIndex) - element.scrollLeft;
         const rawTop = bodyTop + selection.rowIndex * rowHeight - element.scrollTop;
         const span = getCellSpan(selection.rowIndex, selection.columnIndex);
         const rawRight = rawLeft + getCellDisplayWidth(selection.columnIndex, span?.colSpan ?? 1);
@@ -1938,6 +2271,10 @@ function Table({
     if (scrollingTextRef.current) scrollingTextRef.current.style.transform = `translateX(${-element.scrollLeft}px)`;
     if (scrollingHeaderIconsRef.current) scrollingHeaderIconsRef.current.style.transform = `translateX(${-element.scrollLeft}px)`;
     if (headerIconsRef.current) headerIconsRef.current.style.transform = `translateY(${fixedHeader ? 0 : -element.scrollTop}px)`;
+    updateCustomScrollbars();
+    if (scrollDeltaX !== 0 || scrollDeltaY !== 0) {
+      showCustomScrollbar(scrollDeltaX !== 0 && scrollDeltaY !== 0 ? "both" : scrollDeltaX !== 0 ? "horizontal" : "vertical");
+    }
     if (hoveredHeaderActionRef.current) {
       hoveredHeaderActionRef.current = null;
       setHoveredHeaderAction(null);
@@ -1945,7 +2282,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, updateCustomScrollbars, viewport.width]);
   const locateColumn = (0, import_react5.useCallback)((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -1953,7 +2290,11 @@ function Table({
     const localX = clientX - rect.left;
     let columnIndex;
     if (localX < fixedWidth) {
-      columnIndex = hitTestColumn(metrics, localX);
+      columnIndex = columns.findIndex((column, index) => {
+        if (column.fixed !== "left") return false;
+        const left = leftFixedOffsets.get(index) ?? 0;
+        return localX >= left && localX < left + metrics[index].width;
+      });
     } else if (rightFixedWidth > 0 && localX >= viewport.width - rightFixedWidth) {
       columnIndex = columns.findIndex((column, index) => {
         if (column.fixed !== "right") return false;
@@ -1961,41 +2302,33 @@ function Table({
         return localX >= left && localX < left + metrics[index].width;
       });
     } else {
-      columnIndex = hitTestColumn(metrics, localX + scrollRef.current.left);
+      const scrollX = localX + scrollRef.current.left;
+      columnIndex = columns.findIndex((column, index) => {
+        if (column.fixed !== void 0) return false;
+        const left = getScrollableColumnLeft(index);
+        return scrollX >= left && scrollX < left + metrics[index].width;
+      });
     }
     return columnIndex;
-  }, [columns, fixedWidth, metrics, rightFixedOffsets, rightFixedWidth, viewport.width]);
+  }, [columns, fixedWidth, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rightFixedWidth, viewport.width]);
   const getDisplayedColumnLeft = (0, import_react5.useCallback)((columnIndex) => {
     const metric = metrics[columnIndex];
-    if (columns[columnIndex].fixed === "left") return metric.left;
+    if (columns[columnIndex].fixed === "left") return leftFixedOffsets.get(columnIndex) ?? 0;
     if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
-    return metric.left - scrollRef.current.left;
-  }, [columns, metrics, rightFixedOffsets, viewport.width]);
-  const locateResizeHandle = (0, import_react5.useCallback)((clientX) => {
-    if (!columnResizable || !canvasRef.current) return -1;
-    const localX = clientX - canvasRef.current.getBoundingClientRect().left;
-    let closest = -1;
-    let distance = 6;
-    for (let index = 0; index < columns.length; index += 1) {
-      if (columns[index].rowSelection || columns[index].rowDragHandle || columns[index].rowNumber) continue;
-      const nextDistance = Math.abs(localX - (getDisplayedColumnLeft(index) + metrics[index].width));
-      if (nextDistance < distance) {
-        distance = nextDistance;
-        closest = index;
-      }
+    return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
+  }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
+  const getHeaderLevelAtY = (0, import_react5.useCallback)((localY, headerY) => {
+    const y = localY - headerY;
+    for (let level = 0; level < headerRowHeights.length; level += 1) {
+      const top = headerRowOffsets[level] ?? 0;
+      if (y >= top && y < top + headerRowHeights[level]) return level;
     }
-    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]);
+    return headerDepth - 1;
+  }, [headerDepth, headerRowHeights, headerRowOffsets]);
+  const resizeColumn = (0, import_react5.useCallback)((columnKey, width2) => {
+    setResizedColumnWidths((current) => current[columnKey] === width2 ? current : { ...current, [columnKey]: width2 });
+    onColumnResize?.(columnKey, width2);
+  }, [onColumnResize]);
   const locateHeaderAction = (0, import_react5.useCallback)((clientX, columnIndex) => {
     if (columnIndex < 0 || !canvasRef.current) return null;
     const column = columns[columnIndex];
@@ -2030,11 +2363,70 @@ function Table({
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
     return localX >= columnRight - 16 && localX < columnRight - 5;
   }, [columnDraggable, columns, getDisplayedColumnLeft, measureHeaderTitleWidth, metrics]);
-  const setDragGuide = (0, import_react5.useCallback)((x) => {
+  const getHeaderCellLeft = (0, import_react5.useCallback)((cell) => {
+    const startMetric = metrics[cell.startIndex];
+    const fixedSide = columns[cell.startIndex]?.fixed;
+    if (!startMetric) return 0;
+    return fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex) - scrollRef.current.left;
+  }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
+  const getHeaderCellWidth = (0, import_react5.useCallback)((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
+  const locateHeaderResizeHit = (0, import_react5.useCallback)((clientX, clientY) => {
+    if (!columnResizable || !canvasRef.current) return null;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const localX = clientX - rect.left;
+    const localY = clientY - rect.top;
+    const headerY = fixedHeader ? 0 : -scrollRef.current.top;
+    if (localY < headerY || localY >= headerY + headerHeight) return null;
+    const level = getHeaderLevelAtY(localY, headerY);
+    let closest = null;
+    let distance = 6;
+    for (const cell of headerCells) {
+      if (cell.level !== level) continue;
+      if (columns[cell.startIndex]?.rowSelection || columns[cell.startIndex]?.rowDragHandle || columns[cell.startIndex]?.rowNumber) continue;
+      const fixedSide = columns[cell.startIndex]?.fixed;
+      const edge = fixedSide === "right" && cell.leaf ? "left" : "right";
+      const edgeX = getHeaderCellLeft(cell) + (edge === "right" ? getHeaderCellWidth(cell) : 0);
+      const nextDistance = Math.abs(localX - edgeX);
+      if (nextDistance < distance) {
+        distance = nextDistance;
+        closest = { cell, edge };
+      }
+    }
+    return closest;
+  }, [columnResizable, columns, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
+  const locateHeaderResizeCell = (0, import_react5.useCallback)((clientX, clientY) => locateHeaderResizeHit(clientX, clientY)?.cell ?? null, [locateHeaderResizeHit]);
+  const locateHeaderCellDragHandle = (0, import_react5.useCallback)((clientX, cell) => {
+    if (!columnDraggable || !canvasRef.current) return false;
+    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]);
+  const locateHeaderCell = (0, import_react5.useCallback)((clientX, clientY) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return null;
+    const rect = canvas.getBoundingClientRect();
+    const headerY = fixedHeader ? 0 : -scrollRef.current.top;
+    const localX = clientX - rect.left;
+    const localY = clientY - rect.top;
+    if (localY < headerY || localY >= headerY + headerHeight) return null;
+    const level = getHeaderLevelAtY(localY, headerY);
+    for (const cell of headerCells) {
+      if (cell.level !== level) continue;
+      const left = getHeaderCellLeft(cell);
+      const width2 = getHeaderCellWidth(cell);
+      if (localX >= left && localX < left + width2) return cell;
+    }
+    return null;
+  }, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
+  const setDragGuide = (0, import_react5.useCallback)((x, top = 0) => {
     const guide = dragGuideRef.current;
     if (!guide) return;
     guide.style.display = x === null ? "none" : "block";
-    if (x !== null) guide.style.transform = `translateX(${Math.round(x)}px)`;
+    if (x !== null) {
+      guide.style.top = `${top}px`;
+      guide.style.transform = `translateX(${Math.round(x)}px)`;
+    }
   }, []);
   const setRowDragGuide = (0, import_react5.useCallback)((y) => {
     const guide = rowDragGuideRef.current;
@@ -2052,6 +2444,15 @@ function Table({
   (0, import_react5.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas || !columnDraggable && !rowDraggable) return;
+    const getColumnDropIndex = (sourceIndex, targetIndex, edge) => {
+      if (edge === "right") return targetIndex;
+      const destinationIndex = targetIndex - (sourceIndex < targetIndex ? 1 : 0);
+      return Math.max(0, Math.min(columns.length - 1, destinationIndex));
+    };
+    const getColumnDropPlacement = (sourceIndex, targetIndex, edge) => {
+      if (edge !== "right") return "before";
+      return targetIndex < sourceIndex ? "before" : "after";
+    };
     const getHeaderColumn = (clientX, clientY) => {
       const rect = canvas.getBoundingClientRect();
       const headerY = fixedHeader ? 0 : -scrollRef.current.top;
@@ -2059,22 +2460,35 @@ function Table({
       if (localY < headerY || localY >= headerY + headerHeight) return -1;
       return locateColumn(clientX);
     };
+    const getHeaderDragCell = (clientX, clientY) => {
+      const cell = locateHeaderCell(clientX, clientY);
+      if (!cell) return null;
+      return locateHeaderCellDragHandle(clientX, cell) && !locateHeaderResizeCell(clientX, clientY) ? cell : null;
+    };
     const cleanupDrag = (0, import_adapter.draggable)({
       element: canvas,
       canDrag: ({ input }) => {
-        const index = getHeaderColumn(input.clientX, input.clientY);
-        if (columnDraggable && index >= 0) return locateHeaderDragHandle(input.clientX, index) && locateResizeHandle(input.clientX) < 0;
+        const headerDragCell = columnDraggable ? getHeaderDragCell(input.clientX, input.clientY) : null;
+        if (headerDragCell) return true;
         const columnIndex = locateColumn(input.clientX);
         return rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(input.clientY) >= 0;
       },
       getInitialData: ({ input }) => {
-        const headerColumn = getHeaderColumn(input.clientX, input.clientY);
-        if (headerColumn < 0) {
+        const headerDragCell = columnDraggable ? getHeaderDragCell(input.clientX, input.clientY) : null;
+        if (!headerDragCell) {
           return { type: "table-row", sourceIndex: locateRow(input.clientY) };
         }
-        const sourceIndex = headerColumn;
+        const sourceIndex = headerDragCell.startIndex;
         columnDragPreviewRef.current = { sourceIndex, targetIndex: sourceIndex };
-        return { type: "table-column", sourceIndex };
+        return {
+          type: "table-column",
+          sourceIndex,
+          sourceKey: headerDragCell.key,
+          parentKey: headerDragCell.parentKey,
+          headerLevel: headerDragCell.level,
+          headerKind: headerDragCell.leaf ? "column" : "group",
+          fixed: columns[headerDragCell.startIndex]?.fixed
+        };
       },
       onGenerateDragPreview: ({ nativeSetDragImage, source }) => {
         const sourceIndex = Number(source.data.sourceIndex);
@@ -2177,31 +2591,31 @@ function Table({
           return;
         }
         const targetIndex = Number(target?.targetIndex);
-        if (!Number.isInteger(targetIndex) || columns[targetIndex]?.fixed !== columns[sourceIndex]?.fixed) {
+        if (!Number.isInteger(targetIndex) || target?.headerKind !== source.data.headerKind || target?.parentKey !== source.data.parentKey || target?.fixed !== source.data.fixed) {
           setDragGuide(null);
           return;
         }
         const edge = target?.columnEdge;
-        let destinationIndex = targetIndex + (edge === "right" ? 1 : 0);
-        if (sourceIndex < destinationIndex) destinationIndex -= 1;
-        destinationIndex = Math.max(0, Math.min(columns.length - 1, destinationIndex));
+        const destinationIndex = getColumnDropIndex(sourceIndex, targetIndex, edge);
         columnDragPreviewRef.current = { sourceIndex, targetIndex: destinationIndex };
-        const targetLeft = getDisplayedColumnLeft(targetIndex);
-        setDragGuide(edge === "right" ? targetLeft + metrics[targetIndex].width : targetLeft);
+        const targetLeft = Number(target?.targetLeft);
+        const targetWidth = Number(target?.targetWidth);
+        const guideTop = headerRowOffsets[Number(source.data.headerLevel)] ?? 0;
+        setDragGuide(edge === "right" ? targetLeft + targetWidth : targetLeft, guideTop);
       },
       onDrop: ({ source, location }) => {
         const target = location.current.dropTargets[0]?.data;
         const sourceIndex = Number(source.data.sourceIndex);
         if (source.data.type === "table-row") {
-          const rawTargetIndex = Number(target?.targetIndex);
-          let targetIndex2 = rawTargetIndex + (target?.rowEdge === "bottom" ? 1 : 0);
+          const rawTargetIndex2 = Number(target?.targetIndex);
+          let targetIndex2 = rawTargetIndex2 + (target?.rowEdge === "bottom" ? 1 : 0);
           if (sourceIndex < targetIndex2) targetIndex2 -= 1;
           targetIndex2 = Math.max(0, Math.min(rows.length - 1, targetIndex2));
           scrollerRef.current?.classList.add("rvg-row-drop-settling");
           setRowDragPreview(null);
           setRowDragGuide(null);
           canvas.style.cursor = "default";
-          if (Number.isInteger(rawTargetIndex) && sourceIndex !== targetIndex2) onRowOrderChange?.(sourceIndex, targetIndex2);
+          if (Number.isInteger(rawTargetIndex2) && sourceIndex !== targetIndex2) onRowOrderChange?.(sourceIndex, targetIndex2);
           requestAnimationFrame(() => {
             requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
           });
@@ -2210,12 +2624,23 @@ function Table({
           }, 0);
           return;
         }
-        const targetIndex = columnDragPreviewRef.current?.targetIndex ?? Number(target?.targetIndex);
+        const rawTargetIndex = Number(target?.targetIndex);
+        const targetIndex = columnDragPreviewRef.current?.targetIndex ?? (Number.isInteger(rawTargetIndex) ? getColumnDropIndex(sourceIndex, rawTargetIndex, target?.columnEdge) : rawTargetIndex);
         canvas.style.cursor = "default";
         setDragGuide(null);
         columnDragPreviewRef.current = null;
-        if (Number.isInteger(targetIndex) && sourceIndex !== targetIndex && columns[targetIndex]?.fixed === columns[sourceIndex]?.fixed) {
-          onColumnOrderChange?.(sourceIndex - utilityColumnCount, targetIndex - utilityColumnCount);
+        if (Number.isInteger(rawTargetIndex) && Number.isInteger(targetIndex) && sourceIndex !== targetIndex && target?.headerKind === source.data.headerKind && target?.parentKey === source.data.parentKey && target?.fixed === source.data.fixed) {
+          onColumnOrderChange?.(
+            sourceIndex - utilityColumnCount,
+            targetIndex - utilityColumnCount,
+            {
+              type: source.data.headerKind === "group" ? "group" : "column",
+              sourceKey: String(source.data.sourceKey),
+              targetKey: String(target.targetKey),
+              parentKey: typeof source.data.parentKey === "string" ? source.data.parentKey : void 0,
+              placement: getColumnDropPlacement(sourceIndex, rawTargetIndex, target.columnEdge)
+            }
+          );
         }
         window.setTimeout(() => {
           suppressClickRef.current = false;
@@ -2233,24 +2658,38 @@ function Table({
           const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
           return (0, import_closest_edge.attachClosestEdge)({ targetIndex: targetIndex2, rowEdge }, { element, input, allowedEdges: ["top", "bottom"] });
         }
-        let targetIndex = getHeaderColumn(input.clientX, input.clientY);
-        if (targetIndex < 0) return { targetIndex: -1 };
+        const targetCell = locateHeaderCell(input.clientX, input.clientY);
+        if (!targetCell) return { targetIndex: -1 };
+        let targetIndex = targetCell.startIndex;
+        const targetFixed = columns[targetCell.startIndex]?.fixed;
+        const headerKind = targetCell.leaf ? "column" : "group";
+        if (source.data.headerKind !== headerKind || source.data.parentKey !== targetCell.parentKey || source.data.fixed !== targetFixed) return { targetIndex: -1 };
         if (columns[targetIndex].rowSelection || columns[targetIndex].rowDragHandle || columns[targetIndex].rowNumber) {
           const fixedSide = columns[Number(source.data.sourceIndex)]?.fixed;
           targetIndex = columns.findIndex((column, index) => index > targetIndex && column.fixed === fixedSide && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
           if (targetIndex < 0) return { targetIndex: -1 };
           return { targetIndex, columnEdge: "left" };
         }
-        const left = getDisplayedColumnLeft(targetIndex);
-        const columnEdge = input.clientX - canvas.getBoundingClientRect().left < left + metrics[targetIndex].width / 2 ? "left" : "right";
-        return (0, import_closest_edge.attachClosestEdge)({ targetIndex, columnEdge }, { element, input, allowedEdges: ["left", "right"] });
+        const left = getHeaderCellLeft(targetCell);
+        const targetWidth = targetCell.leaf ? metrics[targetIndex].width : getHeaderCellWidth(targetCell);
+        const columnEdge = input.clientX - canvas.getBoundingClientRect().left < left + targetWidth / 2 ? "left" : "right";
+        return (0, import_closest_edge.attachClosestEdge)({
+          targetIndex,
+          targetKey: targetCell.key,
+          parentKey: targetCell.parentKey,
+          headerKind,
+          fixed: targetFixed,
+          targetLeft: left,
+          targetWidth,
+          columnEdge
+        }, { element, input, allowedEdges: ["left", "right"] });
       }
     });
     return () => {
       cleanupDrag();
       cleanupDrop();
     };
-  }, [bodyTop, columnDraggable, columns, fixedHeader, getCellLabel, getDisplayedColumnLeft, getRowKey, headerHeight, locateColumn, locateHeaderDragHandle, locateResizeHandle, locateRow, metrics, onColumnOrderChange, onRowOrderChange, rowDraggable, rowHeight, rows, selectedRowKeySet, setDragGuide, setRowDragGuide, utilityColumnCount]);
+  }, [bodyTop, columnDraggable, columns, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerHeight, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, metrics, onColumnOrderChange, onRowOrderChange, rowDraggable, rowHeight, rows, selectedRowKeySet, setDragGuide, setRowDragGuide, utilityColumnCount]);
   const locateCell = (0, import_react5.useCallback)((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -2357,8 +2796,9 @@ function Table({
     const horizontalFocusGap = 0;
     const verticalFocusGap = 0;
     if (column.fixed === void 0) {
-      if (metric.left - nextLeft < fixedWidth) nextLeft = Math.max(0, metric.left - fixedWidth - horizontalFocusGap);
-      if (metric.left + cellWidth - nextLeft > viewport.width - rightFixedWidth) nextLeft = metric.left + cellWidth - viewport.width + rightFixedWidth + horizontalFocusGap;
+      const cellLeft = getScrollableColumnLeft(cell.columnIndex);
+      if (cellLeft - nextLeft < fixedWidth) nextLeft = Math.max(0, cellLeft - fixedWidth - horizontalFocusGap);
+      if (cellLeft + cellWidth - nextLeft > viewport.width - rightFixedWidth) nextLeft = cellLeft + cellWidth - viewport.width + rightFixedWidth + horizontalFocusGap;
     }
     const rowTop = (fixedHeader ? 0 : bodyTop) + cell.rowIndex * rowHeight;
     const rowBottom = rowTop + rowHeight * rowSpan;
@@ -2371,7 +2811,7 @@ function Table({
     scroller.scrollTop = nextTop;
     scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
     scheduleDraw();
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, metrics, rightFixedWidth, rowHeight, scheduleDraw, viewport.width]);
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, scheduleDraw, viewport.width]);
   const beginEdit = (0, import_react5.useCallback)((cell) => {
     const column = columns[cell.columnIndex];
     if (!column?.editable || column.dataIndex === void 0) return;
@@ -2392,8 +2832,9 @@ function Table({
     const horizontalFocusGap = 0;
     const verticalFocusGap = 0;
     if (column.fixed === void 0) {
-      if (metric.left - nextLeft < fixedWidth) nextLeft = Math.max(0, metric.left - fixedWidth - horizontalFocusGap);
-      if (metric.left + cellWidth - nextLeft > viewport.width - rightFixedWidth) nextLeft = metric.left + cellWidth - viewport.width + rightFixedWidth + horizontalFocusGap;
+      const cellLeft = getScrollableColumnLeft(cell.columnIndex);
+      if (cellLeft - nextLeft < fixedWidth) nextLeft = Math.max(0, cellLeft - fixedWidth - horizontalFocusGap);
+      if (cellLeft + cellWidth - nextLeft > viewport.width - rightFixedWidth) nextLeft = cellLeft + cellWidth - viewport.width + rightFixedWidth + horizontalFocusGap;
     }
     const rowTop = (fixedHeader ? 0 : bodyTop) + cell.rowIndex * rowHeight;
     const rowBottom = rowTop + rowHeight * rowSpan;
@@ -2415,7 +2856,7 @@ function Table({
       return;
     }
     setEditing(cell);
-  }, [columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, metrics, rightFixedWidth, rowHeight, rows, scheduleDraw, viewport.width]);
+  }, [columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, rows, scheduleDraw, viewport.width]);
   const getCellEditKey = (cell) => `${typeof cell.rowKey}:${String(cell.rowKey)}\0${cell.columnKey}`;
   const markCellEdited = (cell, previousValue, nextValue) => {
     const key = getCellEditKey(cell);
@@ -2546,10 +2987,13 @@ function Table({
       const visibleRowHeight = fixedHeader ? renderHeight - bodyTop : renderHeight;
       if (rowTop < scroller.scrollTop) scroller.scrollTop = rowTop;
       if (rowBottom > scroller.scrollTop + visibleRowHeight) scroller.scrollTop = rowBottom - visibleRowHeight;
-      if (columns[columnIndex].fixed === void 0 && metric.left < scroller.scrollLeft + fixedWidth) scroller.scrollLeft = Math.max(0, metric.left - fixedWidth);
-      if (columns[columnIndex].fixed === void 0 && metric.left + cellWidth > scroller.scrollLeft + viewport.width - rightFixedWidth) scroller.scrollLeft = metric.left + cellWidth - viewport.width + rightFixedWidth;
+      if (columns[columnIndex].fixed === void 0) {
+        const cellLeft = getScrollableColumnLeft(columnIndex);
+        if (cellLeft < scroller.scrollLeft + fixedWidth) scroller.scrollLeft = Math.max(0, cellLeft - fixedWidth);
+        if (cellLeft + cellWidth > scroller.scrollLeft + viewport.width - rightFixedWidth) scroller.scrollLeft = cellLeft + cellWidth - viewport.width + rightFixedWidth;
+      }
     }
-  }, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
+  }, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
   const editorStyle = (0, import_react5.useMemo)(() => {
     if (!editing) return void 0;
     const metric = metrics[editing.columnIndex];
@@ -2557,64 +3001,82 @@ function Table({
     const span = getCellSpan(editing.rowIndex, editing.columnIndex);
     const cellWidth = getCellDisplayWidth(editing.columnIndex, span?.colSpan ?? 1);
     const cellHeight = rowHeight * (span?.rowSpan ?? 1);
-    const cellLeft = fixedSide === "left" ? metric.left : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(editing.columnIndex) ?? 0) - metric.width : metric.left - scrollRef.current.left;
+    const cellLeft = fixedSide === "left" ? leftFixedOffsets.get(editing.columnIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(editing.columnIndex) ?? 0) - metric.width : getScrollableColumnLeft(editing.columnIndex) - scrollRef.current.left;
     return {
       left: (fixedSide ? cellLeft : Math.max(cellLeft, fixedWidth)) + 1,
       top: Math.max(fixedHeader ? bodyTop : 0, bodyTop + editing.rowIndex * rowHeight - scrollRef.current.top) + 1,
       width: cellWidth - 2,
       height: cellHeight - 2
     };
-  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, metrics, rightFixedOffsets, rowHeight, viewport.width]);
+  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rowHeight, viewport.width]);
   const handleColumnPointerDown = (0, import_react5.useCallback)((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
     const headerY = fixedHeader ? 0 : -scrollRef.current.top;
     if (localY < headerY || localY >= headerY + headerHeight) return;
-    const resizeIndex = locateResizeHandle(event.clientX);
-    if (resizeIndex >= 0) {
+    const resizeHit = locateHeaderResizeHit(event.clientX, event.clientY);
+    if (resizeHit) {
+      const { cell: resizeCell, edge: resizeEdge } = resizeHit;
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
-      const neighborIndex = findResizeNeighbor(resizeIndex);
-      const startGuideX = getDisplayedColumnLeft(resizeIndex) + metrics[resizeIndex].width;
+      const resizeIndex = resizeCell.endIndex;
+      const resizeIndices = resizeCell.leaf ? [resizeIndex] : Array.from({ length: resizeCell.endIndex - resizeCell.startIndex + 1 }, (_, index) => resizeCell.startIndex + index);
+      const startWidths = resizeIndices.map((index) => metrics[index].width);
+      const startGuideX = getHeaderCellLeft(resizeCell) + (resizeEdge === "right" ? getHeaderCellWidth(resizeCell) : 0);
       columnDragRef.current = {
         type: "resize",
         columnIndex: resizeIndex,
         startX: event.clientX,
-        startWidth: metrics[resizeIndex].width,
+        startWidth: startWidths.reduce((total, width2) => total + width2, 0),
         startGuideX,
-        neighborIndex,
-        startNeighborWidth: neighborIndex >= 0 ? metrics[neighborIndex].width : 0
+        guideTop: headerRowOffsets[resizeCell.level] ?? 0,
+        resizeEdge,
+        resizeIndices,
+        startWidths
       };
       suppressClickRef.current = true;
+      setResizeGuideTop(headerRowOffsets[resizeCell.level] ?? 0);
       setResizeGuideX(startGuideX);
       return;
     }
-  }, [findResizeNeighbor, fixedHeader, getDisplayedColumnLeft, headerHeight, locateResizeHandle, metrics]);
+  }, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerHeight, headerRowOffsets, locateHeaderResizeHit, metrics]);
   const handleColumnPointerMove = (0, import_react5.useCallback)((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
     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);
+    const pointerDelta = Math.round(event.clientX - drag.startX);
+    const delta = drag.resizeEdge === "left" ? -pointerDelta : pointerDelta;
+    if (drag.resizeIndices.length > 1) {
+      const minWidths = drag.resizeIndices.map((index) => getMinimumColumnWidth(columns[index], columnDraggable));
+      const minTotalWidth = minWidths.reduce((total, width3) => total + width3, 0);
+      const targetTotalWidth = Math.max(minTotalWidth, drag.startWidth + delta);
+      const ratio = drag.startWidth > 0 ? targetTotalWidth / drag.startWidth : 1;
+      const nextWidths = drag.startWidths.map((width3, index) => Math.max(minWidths[index], Math.round(width3 * ratio)));
+      let remainder = targetTotalWidth - nextWidths.reduce((total, width3) => total + width3, 0);
+      for (let index = nextWidths.length - 1; index >= 0 && remainder !== 0; index -= 1) {
+        const next = nextWidths[index] + (remainder > 0 ? 1 : -1);
+        if (next < minWidths[index]) continue;
+        nextWidths[index] = next;
+        remainder += remainder > 0 ? -1 : 1;
+      }
+      drag.resizeIndices.forEach((columnIndex, index) => {
+        resizeColumn(columns[columnIndex].key, nextWidths[index]);
+      });
+      setResizeGuideX(drag.startGuideX + (drag.resizeEdge === "left" ? drag.startWidth - targetTotalWidth : targetTotalWidth - drag.startWidth));
       return;
     }
     const width2 = Math.max(minWidth, Math.round(drag.startWidth + delta));
-    onColumnResize?.(column.key, width2);
-    setResizeGuideX(drag.startGuideX + width2 - drag.startWidth);
-  }, [columnDraggable, columns, onColumnResize]);
+    resizeColumn(column.key, width2);
+    setResizeGuideX(drag.startGuideX + (drag.resizeEdge === "left" ? drag.startWidth - width2 : width2 - drag.startWidth));
+  }, [columnDraggable, columns, resizeColumn]);
   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;
     setResizeGuideX(null);
+    setResizeGuideTop(0);
   }, []);
   const queueSortStateChange = (0, import_react5.useCallback)((next) => {
     setDisplaySortState(next);
@@ -2627,7 +3089,7 @@ function Table({
   const renderHeaderIcons = (columnIndex, left) => {
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
-    const top = (headerHeight - 14) / 2;
+    const top = headerLeafTop + (headerLeafHeight - 14) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? 18 : 4);
     const icons = [];
@@ -2653,44 +3115,87 @@ function Table({
     }
     return icons;
   };
-  const headerTooltip = (() => {
-    if (!visibleHeaderTooltip) return null;
-    const { columnIndex, action } = visibleHeaderTooltip;
-    const column = columns[columnIndex];
+  const createHeaderTooltip = (0, import_react5.useCallback)((action, columnIndex, cell) => {
+    const column = cell?.column ?? columns[columnIndex];
     if (!column) return null;
-    const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
-    const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let anchorX = columnRight - (visibleActions.drag ? 18 : 4);
-    let anchorLeft = anchorX;
-    let label;
+    const cellLeft = cell ? getHeaderCellLeft(cell) : getDisplayedColumnLeft(columnIndex);
+    const cellWidth = cell ? getHeaderCellWidth(cell) : metrics[columnIndex]?.width ?? 0;
+    const level = cell?.level ?? headerDepth - 1;
+    const rowTop = (fixedHeader ? 0 : -scrollPosition.top) + (headerRowOffsets[level] ?? 0);
+    const rowHeight2 = headerRowHeights[level] ?? baseHeaderHeight;
+    let anchorX = cellLeft + cellWidth / 2;
+    let anchorLeft = cellLeft;
+    let label = column.title;
     if (action === "title") {
-      const titleWidth = measureHeaderTitleWidth(columnIndex);
-      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18;
-      const contentWidth2 = Math.max(0, metrics[columnIndex].width - actionWidth);
-      const textWidth = Math.min(titleWidth, Math.max(0, contentWidth2 - 20));
-      const columnLeft = getDisplayedColumnLeft(columnIndex);
-      anchorX = column.align === "right" ? columnLeft + contentWidth2 - 10 : column.align === "center" ? columnLeft + metrics[columnIndex].width / 2 + textWidth / 2 : columnLeft + 10 + textWidth;
-      anchorLeft = column.align === "right" ? anchorX - textWidth : column.align === "center" ? columnLeft + metrics[columnIndex].width / 2 - textWidth / 2 : columnLeft + 10;
-      label = column.title;
+      const canvas = canvasRef.current;
+      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)) * 18 : columnDraggable ? 18 : 0;
+      const contentWidth2 = Math.max(0, cellWidth - actionWidth);
+      const maxTextWidth = Math.max(0, contentWidth2 - 20);
+      const textWidth = Math.min(titleWidth, maxTextWidth);
+      if (column.align === "right") {
+        anchorX = cellLeft + contentWidth2 - 10;
+        anchorLeft = anchorX - textWidth;
+      } else if (column.align === "center") {
+        anchorX = cellLeft + contentWidth2 / 2 + textWidth / 2;
+        anchorLeft = cellLeft + contentWidth2 / 2 - textWidth / 2;
+      } else {
+        anchorLeft = cellLeft + 10;
+        anchorX = anchorLeft + textWidth;
+      }
     } else if (action === "drag") {
-      anchorX = columnRight;
+      anchorX = cellLeft + cellWidth;
       anchorLeft = anchorX;
       label = labels.dragColumn;
     } else if (action === "sort") {
       const direction = displaySortState?.columnKey === column.key ? displaySortState.direction : null;
       label = direction === "asc" ? labels.sortAsc : direction === "desc" ? labels.sortDesc : labels.sortBoth;
-    } else {
-      if (visibleActions.sort) anchorX -= 18;
+      anchorX = cellLeft + cellWidth - 22;
+      anchorLeft = anchorX;
+    } else if (action === "filter") {
       const value = filterValues[column.key];
       label = value ? labels.filterWithValue(value) : labels.filter;
+      anchorX = cellLeft + cellWidth - 40;
+      anchorLeft = anchorX;
     }
     const placement = anchorX + 328 > viewport.width ? "left" : "right";
     return {
+      key: `${action}:${cell ? `cell:${cell.key}:${cell.level}` : `column:${column.key}`}:${Math.round(anchorX)}:${Math.round(rowTop)}`,
+      columnIndex,
+      action,
       left: placement === "right" ? anchorX + 8 : Math.max(8, anchorLeft - 8),
-      top: (fixedHeader ? 0 : -scrollPosition.top) + headerHeight / 2,
+      top: rowTop + rowHeight2 / 2,
       label,
       placement
     };
+  }, [baseHeaderHeight, columnDraggable, columns, displaySortState, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, metrics, scrollPosition.top, viewport.width]);
+  const isPointerOnHeaderTitle = (0, import_react5.useCallback)((clientX, clientY, cell) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return false;
+    const rect = canvas.getBoundingClientRect();
+    const localX = clientX - rect.left;
+    const localY = clientY - rect.top;
+    const column = cell.column;
+    const cellLeft = getHeaderCellLeft(cell);
+    const cellWidth = getHeaderCellWidth(cell);
+    const rowTop = (fixedHeader ? 0 : -scrollRef.current.top) + (headerRowOffsets[cell.level] ?? 0);
+    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)) * 18 : columnDraggable ? 18 : 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]);
+  const headerTooltip = (() => {
+    if (!visibleHeaderTooltip) return null;
+    return visibleHeaderTooltip;
   })();
   const getRangeBounds = () => selectionRange ? {
     rowStart: Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex),
@@ -2749,7 +3254,7 @@ function Table({
     }, 1800);
   };
   const showHeaderTooltipAfterDelay = (next) => {
-    const nextKey = next ? `${next.columnIndex}:${next.action}` : "";
+    const nextKey = next ? next.key : "";
     if (nextKey && pendingHeaderTooltipKeyRef.current === nextKey) return;
     pendingHeaderTooltipKeyRef.current = nextKey;
     if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
@@ -2997,12 +3502,14 @@ function Table({
   const renderHeaderTitle = (columnIndex, left) => {
     const column = columns[columnIndex];
     const currentScrollTop = scrollRef.current.top;
+    const headerTop = fixedHeader ? 0 : -currentScrollTop;
+    const leafTop = headerTop + headerLeafTop;
     if (column.rowNumber) {
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           className: "rvg-header-title",
-          style: { left, top: fixedHeader ? 0 : -currentScrollTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
+          style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: column.title })
         },
         column.key
@@ -3016,7 +3523,7 @@ function Table({
         "div",
         {
           className: "rvg-header-selection-icon",
-          style: { left, top: fixedHeader ? 0 : -currentScrollTop, width: metrics[columnIndex].width, height: headerHeight },
+          style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight },
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectionIcon, { checked: allSelected, indeterminate })
         },
         column.key
@@ -3029,11 +3536,13 @@ function Table({
         "div",
         {
           className: "rvg-header-title is-custom",
+          "data-level": headerDepth - 1,
+          "data-measure-key": column.key,
           style: {
             left,
-            top: fixedHeader ? 0 : -currentScrollTop,
+            top: leafTop,
             width: Math.max(0, metrics[columnIndex].width - actionWidth),
-            height: headerHeight,
+            height: headerLeafHeight,
             justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
             textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
           },
@@ -3041,8 +3550,10 @@ function Table({
             "span",
             {
               ref: (node) => {
-                if (node) customHeaderContentRefs.current.set(column.key, node);
-                else customHeaderContentRefs.current.delete(column.key);
+                if (node) {
+                  customHeaderContentRefs.current.set(column.key, node);
+                  requestAnimationFrame(measureCustomHeaderHeight);
+                } else customHeaderContentRefs.current.delete(column.key);
               },
               children: column.renderHeader(column)
             }
@@ -3053,6 +3564,61 @@ function Table({
     }
     return null;
   };
+  const renderGroupedHeaderCell = (cell) => {
+    const startMetric = metrics[cell.startIndex];
+    const endMetric = metrics[cell.endIndex];
+    if (!startMetric || !endMetric) return null;
+    const column = cell.column;
+    const fixedSide = columns[cell.startIndex]?.fixed;
+    const currentScrollTop = scrollRef.current.top;
+    const rowHeightForLevel = headerRowHeights[cell.level] ?? baseHeaderHeight;
+    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)) * 18 : columnDraggable && !cell.leaf ? 18 : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}`,
+        "data-level": cell.level,
+        "data-measure-key": `group:${cell.key}:${cell.level}`,
+        style: {
+          left,
+          top: headerTop,
+          width: width2,
+          height: rowHeightForLevel,
+          paddingRight: cell.leaf ? actionWidth + 10 : 10,
+          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 (!column.renderHeader) return;
+                const key = `group:${cell.key}:${cell.level}`;
+                if (node) {
+                  customHeaderContentRefs.current.set(key, node);
+                  requestAnimationFrame(measureCustomHeaderHeight);
+                } else customHeaderContentRefs.current.delete(key);
+              },
+              children: column.renderHeader ? column.renderHeader(column) : column.title
+            }
+          ),
+          !cell.leaf && columnDraggable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            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 }
+            }
+          )
+        ]
+      },
+      `group:${cell.key}:${cell.level}`
+    );
+  };
   const rangeHandlePosition = (() => {
     if (!rangeSelection) return null;
     const bounds = getRangeBounds();
@@ -3244,15 +3810,19 @@ function Table({
             const headerY = fixedHeader ? 0 : -scrollRef.current.top;
             const columnIndex = locateColumn(event.clientX);
             const inHeader = localY >= headerY && localY < headerY + headerHeight;
-            const hoveredAction = inHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
-            const hoveredDragHandle = inHeader && locateHeaderDragHandle(event.clientX, columnIndex);
-            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && columnIndex >= 0 && Boolean(columns[columnIndex]?.title) && (tooltipConfig.header || isHeaderTitleTruncated(columnIndex));
-            const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex, action: "drag" } : hoveredTitle ? { columnIndex, action: "title" } : null;
+            const inLeafHeader = inHeader && localY >= headerY + headerLeafTop;
+            const hoveredHeaderCell = inHeader ? locateHeaderCell(event.clientX, event.clientY) : null;
+            const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
+            const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
+            const hoveredDragColumnIndex = hoveredHeaderCell?.startIndex ?? columnIndex;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
+            const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
+            const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
             const previousHover = hoveredHeaderActionRef.current;
             if (previousHover?.columnIndex !== nextHover?.columnIndex || previousHover?.action !== nextHover?.action) {
               hoveredHeaderActionRef.current = nextHover;
               setHoveredHeaderAction(nextHover);
-              showHeaderTooltipAfterDelay(nextHover);
+              showHeaderTooltipAfterDelay(nextTooltip);
               scheduleDraw();
             }
             if (inHeader) {
@@ -3276,8 +3846,8 @@ function Table({
                 if (annotation?.content.trim()) {
                   const cellLeft = getDisplayedColumnLeft(cell.columnIndex);
                   const cellTop = bodyTop + cell.rowIndex * rowHeight - scrollRef.current.top;
-                  const nextTooltip = { rowIndex: cell.rowIndex, columnIndex: cell.columnIndex, left: cellLeft + metrics[cell.columnIndex].width + 6, top: cellTop + rowHeight / 2, label: annotation.content, color: annotation.color, annotation: true };
-                  showCellTooltip(nextTooltip);
+                  const nextTooltip2 = { rowIndex: cell.rowIndex, columnIndex: cell.columnIndex, left: cellLeft + metrics[cell.columnIndex].width + 6, top: cellTop + rowHeight / 2, label: annotation.content, color: annotation.color, annotation: true };
+                  showCellTooltip(nextTooltip2);
                 } else {
                   const label = getCellLabel(cell.rowIndex, cell.columnIndex);
                   const context = event.currentTarget.getContext("2d");
@@ -3304,7 +3874,7 @@ function Table({
                       showCellTooltipAfterDelay(null);
                     } else {
                       const placement = textRight + 330 > viewport.width ? "left" : "right";
-                      const nextTooltip = {
+                      const nextTooltip2 = {
                         rowIndex: cell.rowIndex,
                         columnIndex: cell.columnIndex,
                         left: placement === "right" ? textRight + 16 : Math.max(8, textLeft - 16),
@@ -3312,13 +3882,13 @@ function Table({
                         label,
                         placement
                       };
-                      showCellTooltipAfterDelay(nextTooltip);
+                      showCellTooltipAfterDelay(nextTooltip2);
                     }
                   }
                 }
               }
             }
-            const cursor = inHeader && locateResizeHandle(event.clientX) >= 0 ? "col-resize" : hoveredAction ? "pointer" : hoveredDragHandle ? "move" : columnIndex >= 0 && columns[columnIndex].rowSelection ? "pointer" : !inHeader && rowDraggable && columnIndex >= 0 && columns[columnIndex].rowDragHandle ? "move" : "default";
+            const cursor = inHeader && locateHeaderResizeCell(event.clientX, event.clientY) ? "col-resize" : hoveredAction ? "pointer" : hoveredDragHandle ? "move" : columnIndex >= 0 && columns[columnIndex].rowSelection ? "pointer" : !inHeader && rowDraggable && columnIndex >= 0 && columns[columnIndex].rowDragHandle ? "move" : "default";
             if (event.currentTarget.style.cursor !== cursor) event.currentTarget.style.cursor = cursor;
           },
           onMouseLeave: (event) => {
@@ -3361,6 +3931,7 @@ function Table({
             const headerY = fixedHeader ? 0 : -scrollRef.current.top;
             if (localY >= headerY && localY < headerY + headerHeight) {
               clickedCellRef.current = null;
+              if (localY < headerY + headerLeafTop) return;
               const columnIndex = locateColumn(event.clientX);
               const action = locateHeaderAction(event.clientX, columnIndex);
               if (action === "sort") {
@@ -3422,21 +3993,30 @@ function Table({
             className: "rvg-text-scroll-content",
             style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-currentScroll.left}px)` },
             children: [
-              columns.map((column, columnIndex) => column.fixed ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderTitle(columnIndex, metrics[columnIndex].left) }, column.key) : null),
+              columns.map((column, columnIndex) => column.fixed || columnIndex < utilityColumnCount || headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderTitle(columnIndex, getScrollableColumnLeft(columnIndex)) }, column.key) : null),
+              headerCells.map((cell) => {
+                if (columns[cell.startIndex]?.fixed) return null;
+                if (cell.endIndex < domRange.columnStart || cell.startIndex >= domRange.columnEnd) return null;
+                return renderGroupedHeaderCell(cell);
+              }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
                 if (column.fixed || columnIndex < domRange.columnStart || columnIndex >= domRange.columnEnd) return null;
-                return renderCellText(rowIndex, columnIndex, metrics[columnIndex].left);
+                return renderCellText(rowIndex, columnIndex, getScrollableColumnLeft(columnIndex));
               })) })
             ]
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
           if (!column.fixed) return null;
-          const left = column.fixed === "left" ? metrics[columnIndex].left : viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width;
+          const left = column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width;
           return renderCellText(rowIndex, columnIndex, left);
         })) }),
-        columns.map((column, columnIndex) => column.fixed === "left" ? renderHeaderTitle(columnIndex, metrics[columnIndex].left) : null),
-        columns.map((column, columnIndex) => column.fixed === "right" ? renderHeaderTitle(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
+        columns.map((column, columnIndex) => columnIndex < utilityColumnCount || headerDepth === 1 && (column.fixed === "left" || column.fixed === "right") ? renderHeaderTitle(columnIndex, column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width : column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : getScrollableColumnLeft(columnIndex)) : null),
+        headerCells.map((cell) => columns[cell.startIndex]?.fixed ? renderGroupedHeaderCell(cell) : null),
+        fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-text-fixed-shadow is-left", style: { left: fixedWidth } }),
+        rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-text-fixed-shadow is-right", style: { right: rightFixedWidth } }),
+        hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-text-fixed-border is-left", style: { left: fixedWidth - 1 } }),
+        hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-text-fixed-border is-right", style: { right: rightFixedWidth } })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
     ] }),
@@ -3444,18 +4024,18 @@ function Table({
       "div",
       {
         className: `rvg-summary-row is-${summaryPosition}${hasVerticalBorders ? "" : " is-vertical-borderless"}`,
-        style: { height: rowHeight, top: summaryPosition === "top" ? headerHeight : void 0 },
+        style: { height: rowHeight, top: summaryPosition === "top" ? fixedHeader ? headerHeight : headerHeight - currentScroll.top : void 0 },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-summary-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "div",
             {
               className: "rvg-summary-scroll-content",
               style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-currentScroll.left}px)` },
-              children: columns.map((column, columnIndex) => column.fixed ? null : renderSummaryCell(columnIndex, metrics[columnIndex].left))
+              children: columns.map((column, columnIndex) => column.fixed ? null : renderSummaryCell(columnIndex, getScrollableColumnLeft(columnIndex)))
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-summary-fixed-layer", children: [
-            columns.map((column, columnIndex) => column.fixed === "left" ? renderSummaryCell(columnIndex, metrics[columnIndex].left) : null),
+            columns.map((column, columnIndex) => column.fixed === "left" ? renderSummaryCell(columnIndex, leftFixedOffsets.get(columnIndex) ?? 0) : null),
             columns.map((column, columnIndex) => column.fixed === "right" ? renderSummaryCell(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
           ] }),
           fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-summary-fixed-shadow is-left", style: { left: fixedWidth } }),
@@ -3472,11 +4052,11 @@ function Table({
           ref: scrollingHeaderIconsRef,
           className: "rvg-header-icon-layer rvg-header-icon-layer-scroll",
           style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-scrollRef.current.left}px)` },
-          children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderIcons(index, metrics[index].left) }, column.key))
+          children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderIcons(index, getScrollableColumnLeft(index)) }, column.key))
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-header-icon-layer", children: [
-        columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderIcons(index, metrics[index].left) }, column.key) : null),
+        columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderIcons(index, leftFixedOffsets.get(index) ?? 0) }, column.key) : null),
         columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
       ] })
     ] }),
@@ -3753,12 +4333,40 @@ 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: verticalScrollbarRef,
+        className: "rvg-vertical-scrollbar",
+        onPointerEnter: () => keepCustomScrollbarVisible("vertical"),
+        onPointerLeave: () => releaseCustomScrollbarVisible("vertical"),
+        onPointerDown: handleVerticalScrollbarPointerDown,
+        onPointerMove: handleVerticalScrollbarPointerMove,
+        onPointerUp: handleVerticalScrollbarPointerUp,
+        onPointerCancel: handleVerticalScrollbarPointerUp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: verticalScrollbarThumbRef, className: "rvg-vertical-scrollbar-thumb" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref: horizontalScrollbarRef,
+        className: "rvg-horizontal-scrollbar",
+        onPointerEnter: () => keepCustomScrollbarVisible("horizontal"),
+        onPointerLeave: () => releaseCustomScrollbarVisible("horizontal"),
+        onPointerDown: handleHorizontalScrollbarPointerDown,
+        onPointerMove: handleHorizontalScrollbarPointerMove,
+        onPointerUp: handleHorizontalScrollbarPointerUp,
+        onPointerCancel: handleHorizontalScrollbarPointerUp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: horizontalScrollbarThumbRef, className: "rvg-horizontal-scrollbar-thumb" })
+      }
+    ),
     /* @__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)` }
+        style: { display: "block", top: resizeGuideTop, transform: `translateX(${Math.round(resizeGuideX)}px)` }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),