@canvas-components/list-table 0.3.1 → 0.3.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { stringifyDataIndex, getValueByDataIndex, clamp, copyTextSync, copyText, exportTableToXlsx, formatPreciseNumber, addPreciseNumbers, comparePreciseNumbers, dividePreciseNumber, roundPreciseNumber, parseNumberValue, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber, exportTableToTxt, exportTableToCsv, downloadJsonFile, mapRowsToExportRecords, copyJson, copyRows, isDateTimeFormatPattern, normalizeDecimalPlaces, formatDateTimeValue, formatCustomNumberPattern, isSameDataIndex, isPointInRect as isPointInRect$1 } from '@canvas-components/utils';
+import { stringifyDataIndex, getValueByDataIndex, clamp, copyTextSync, copyText, exportTableToXlsx, formatPreciseNumber, addPreciseNumbers, comparePreciseNumbers, isSameDataIndex, dividePreciseNumber, roundPreciseNumber, parseNumberValue, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber, exportTableToTxt, exportTableToCsv, downloadJsonFile, mapRowsToExportRecords, copyJson, copyRows, isDateTimeFormatPattern, normalizeDecimalPlaces, formatDateTimeValue, formatCustomNumberPattern, isPointInRect as isPointInRect$1 } from '@canvas-components/utils';
 import { drawBarcodeToCanvas } from '@canvas-components/barcode';
 import { drawCanvasChartToCanvas, getCanvasChartRenderer, resolveCanvasChartTooltipText } from '@canvas-components/chart';
 import { drawQrCodeToCanvas } from '@canvas-components/qrcode';
@@ -333,6 +333,30 @@ function stretchColumnWidths(columns, containerWidth) {
     stretchableColumns[stretchableColumns.length - 1].width += remain;
   }
 }
+function shrinkColumnWidthsToFit(columns, containerWidth) {
+  let remaining = Math.max(
+    Math.ceil(computeColumnWidths(columns) - containerWidth),
+    0
+  );
+  let shrinkableColumns = columns.filter(
+    (column) => column.width > column.minWidth
+  );
+  while (remaining > 0 && shrinkableColumns.length > 0) {
+    const share = Math.max(Math.floor(remaining / shrinkableColumns.length), 1);
+    shrinkableColumns.forEach((column) => {
+      if (remaining <= 0) {
+        return;
+      }
+      const shrink = Math.min(column.width - column.minWidth, share, remaining);
+      column.width -= shrink;
+      remaining -= shrink;
+    });
+    shrinkableColumns = shrinkableColumns.filter(
+      (column) => column.width > column.minWidth
+    );
+  }
+  return remaining === 0;
+}
 
 // src/domain/columns/flatten-leaf-columns.ts
 function flattenLeafColumns(columns) {
@@ -3216,7 +3240,7 @@ function drawBodyButtonContent(params) {
   const top = rect.y + (rect.height - height) / 2;
   const palette = resolveButtonPalette(content);
   const textIndent = resolveContentTextIndent(content);
-  const paddingInline = BUTTON_PADDING_INLINE_MAP[size];
+  const paddingInline = resolveButtonPaddingInline(content, size);
   const radius = BUTTON_RADIUS_MAP[size];
   ctx.save();
   ctx.globalAlpha *= resolveContentOpacity(content);
@@ -3324,9 +3348,12 @@ function measureButtonContentWidth(ctx, content, theme) {
   const intrinsicWidth = Math.max(
     ctx.measureText(content.text).width + resolveContentTextIndent(content),
     0
-  ) + BUTTON_PADDING_INLINE_MAP[size] * 2;
+  ) + resolveButtonPaddingInline(content, size) * 2;
   return resolveContentLayoutWidth(content, intrinsicWidth);
 }
+function resolveButtonPaddingInline(content, size) {
+  return content.buttonType === "link" || content.buttonType === "text" ? 4 : BUTTON_PADDING_INLINE_MAP[size];
+}
 function measureButtonContentHeight(content) {
   return BUTTON_HEIGHT_MAP[resolveButtonSize(content.size)];
 }
@@ -3926,11 +3953,25 @@ function drawImagePlaceholder(ctx, x, y, width, height, backgroundColor = PLACEH
 var SYMBOL_COLOR_MAP = {
   star: "#fadb14",
   sun: "#faad14",
-  moon: "#597ef7"
+  moon: "#597ef7",
+  check: "#52c41a",
+  close: "#ff4d4f"
 };
 function drawCellSymbol(ctx, params) {
   const { type, x, y, size, activeColor, inactiveColor } = params;
   const fillRatio = Math.min(Math.max(params.fillRatio, 0), 1);
+  if (type === "check" || type === "close") {
+    drawStatusSymbol(ctx, {
+      type,
+      x,
+      y,
+      size,
+      activeColor,
+      inactiveColor,
+      fillRatio
+    });
+    return;
+  }
   appendCellSymbolPath(ctx, type, x, y, size);
   ctx.fillStyle = inactiveColor;
   ctx.fill("evenodd");
@@ -3948,6 +3989,10 @@ function resolveCellSymbolColor(type) {
   return SYMBOL_COLOR_MAP[type];
 }
 function appendCellSymbolPath(ctx, type, x, y, size) {
+  if (type === "check" || type === "close") {
+    appendStatusSymbolPath(ctx, type, x, y, size);
+    return;
+  }
   if (type === "moon") {
     appendMoonPath(ctx, x, y, size);
     return;
@@ -3968,6 +4013,38 @@ function appendCellSymbolPath(ctx, type, x, y, size) {
   }
   ctx.closePath();
 }
+function drawStatusSymbol(ctx, params) {
+  const { type, x, y, size, activeColor, inactiveColor, fillRatio } = params;
+  ctx.save();
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.lineWidth = Math.max(size * 0.12, 1.5);
+  appendStatusSymbolPath(ctx, type, x, y, size);
+  ctx.strokeStyle = inactiveColor;
+  ctx.stroke();
+  if (fillRatio > 0) {
+    ctx.beginPath();
+    ctx.rect(x, y, size * fillRatio, size);
+    ctx.clip();
+    appendStatusSymbolPath(ctx, type, x, y, size);
+    ctx.strokeStyle = activeColor;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function appendStatusSymbolPath(ctx, type, x, y, size) {
+  ctx.beginPath();
+  if (type === "check") {
+    ctx.moveTo(x + size * 0.16, y + size * 0.52);
+    ctx.lineTo(x + size * 0.4, y + size * 0.76);
+    ctx.lineTo(x + size * 0.84, y + size * 0.26);
+    return;
+  }
+  ctx.moveTo(x + size * 0.22, y + size * 0.22);
+  ctx.lineTo(x + size * 0.78, y + size * 0.78);
+  ctx.moveTo(x + size * 0.78, y + size * 0.22);
+  ctx.lineTo(x + size * 0.22, y + size * 0.78);
+}
 function appendMoonPath(ctx, x, y, size) {
   ctx.beginPath();
   ctx.moveTo(x + size * 0.64, y + size * 0.04);
@@ -6237,6 +6314,7 @@ function resolveColumnFormItemProps(column, context) {
 // src/rendering/cell-content/cell-content-renderer.ts
 var CONTENT_HORIZONTAL_PADDING = 12;
 var CONTENT_GAP = 8;
+var LINK_CONTENT_GAP = 4;
 var CONTENT_VERTICAL_PADDING = 6;
 function resolveBodyCellContents(params) {
   return resolveRawBodyCellContents(params).filter(
@@ -6671,8 +6749,8 @@ function drawBodyCellContents(params) {
       align: column.align
     });
     line.items.forEach((item, itemIndex) => {
-      if (itemIndex > 0 && item.gapBefore) {
-        cursorX += CONTENT_GAP;
+      if (itemIndex > 0) {
+        cursorX += item.gapBefore;
       }
       const itemDescriptors = [];
       drawExpandedBodyContent({
@@ -6767,7 +6845,7 @@ function measureBodyCellContentsWidth(params) {
       currentLineWidth = 0;
       return;
     }
-    const gapWidth = currentLineWidth > 0 && item.gapBefore ? CONTENT_GAP : 0;
+    const gapWidth = currentLineWidth > 0 ? item.gapBefore : 0;
     currentLineWidth += gapWidth + contentWidth;
   });
   return Math.ceil(
@@ -6798,10 +6876,11 @@ function expandBodyContents(contents) {
   const textOnly = contents.every((content) => content.type === "text");
   const expanded = [];
   contents.forEach((content, contentIndex) => {
+    const previousContent = contents[contentIndex - 1];
     expanded.push({
       content,
       contentIndex,
-      gapBefore: expanded.length > 0 && !textOnly
+      gapBefore: expanded.length === 0 || textOnly ? 0 : resolveInlineContentGap(previousContent, content)
     });
     if ((content.type === "checkbox" || content.type === "radio") && content.label) {
       const textLabelContent = {
@@ -6814,12 +6893,18 @@ function expandBodyContents(contents) {
       expanded.push({
         content: textLabelContent,
         contentIndex,
-        gapBefore: true
+        gapBefore: CONTENT_GAP
       });
     }
   });
   return expanded;
 }
+function resolveInlineContentGap(previous, current) {
+  return isInlineActionContent(previous) && isInlineActionContent(current) ? LINK_CONTENT_GAP : CONTENT_GAP;
+}
+function isInlineActionContent(content) {
+  return content?.type === "link" || content?.type === "button" && (content.buttonType === "link" || content.buttonType === "text");
+}
 function buildSingleLineLayout(ctx, contents, availableWidth, theme) {
   const line = {
     items: [],
@@ -6855,7 +6940,7 @@ function buildSingleLineLayout(ctx, contents, availableWidth, theme) {
       }
       break;
     }
-    const gapWidth = line.items.length > 0 && item.gapBefore ? CONTENT_GAP : 0;
+    const gapWidth = line.items.length > 0 ? item.gapBefore : 0;
     const remainingWidth = availableWidth - line.width - gapWidth;
     if (remainingWidth <= 0) {
       truncated = true;
@@ -6923,7 +7008,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
             items: [
               {
                 ...currentItem,
-                gapBefore: false,
+                gapBefore: 0,
                 width: fullWidth2
               }
             ],
@@ -6954,7 +7039,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
             {
               ...currentItem,
               content: fittedContent2,
-              gapBefore: false,
+              gapBefore: 0,
               width: fittedWidth
             }
           ],
@@ -6976,11 +7061,11 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
         currentItem = {
           ...currentItem,
           content: setBreakableContentText(currentItem.content, remainingText2),
-          gapBefore: false
+          gapBefore: 0
         };
         continue;
       }
-      const gapWidth = currentLine.items.length > 0 && currentItem.gapBefore ? CONTENT_GAP : 0;
+      const gapWidth = currentLine.items.length > 0 ? currentItem.gapBefore : 0;
       const remainingWidth = availableWidth - currentLine.width - gapWidth;
       if (remainingWidth <= 0) {
         if (lines.length + 1 >= maxLines) {
@@ -6994,7 +7079,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
         currentLine = { items: [], width: 0 };
         currentItem = {
           ...currentItem,
-          gapBefore: false
+          gapBefore: 0
         };
         continue;
       }
@@ -7014,7 +7099,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
           currentLine = { items: [], width: 0 };
           currentItem = {
             ...currentItem,
-            gapBefore: false
+            gapBefore: 0
           };
           continue;
         }
@@ -7054,7 +7139,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
         currentLine = { items: [], width: 0 };
         currentItem = {
           ...currentItem,
-          gapBefore: false
+          gapBefore: 0
         };
         continue;
       }
@@ -7082,7 +7167,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
       currentItem = {
         ...currentItem,
         content: setBreakableContentText(currentItem.content, remainingText),
-        gapBefore: false
+        gapBefore: 0
       };
     }
     if (truncated) {
@@ -7595,10 +7680,10 @@ function applyTrailingEllipsis(ctx, line, theme, availableWidth) {
       continue;
     }
     const widthBefore = line.items.slice(0, index).reduce((sum, current, currentIndex) => {
-      const gapWidth2 = currentIndex > 0 && current.gapBefore ? CONTENT_GAP : 0;
+      const gapWidth2 = currentIndex > 0 ? current.gapBefore : 0;
       return sum + gapWidth2 + current.width;
     }, 0);
-    const gapWidth = index > 0 && item.gapBefore ? CONTENT_GAP : 0;
+    const gapWidth = index > 0 ? item.gapBefore : 0;
     const nextContent = truncateExpandedContent(
       ctx,
       item.content,
@@ -10409,7 +10494,7 @@ var ListTableCarouselController = class {
 var SUMMARY_ASYNC_BATCH_SIZE = 2e3;
 var SUMMARY_ASYNC_FRAME_BUDGET = 8;
 async function computeSummaryValuesAsync(params) {
-  const { rows, columns, signal } = params;
+  const { rows, columns, mergeCell, signal } = params;
   const summaryValues = /* @__PURE__ */ new Map();
   const accumulators = [];
   columns.forEach((column) => {
@@ -10462,8 +10547,14 @@ async function computeSummaryValuesAsync(params) {
     }
     startIndex = endIndex;
   }
+  const mergedRowCount = accumulators.some(
+    (item) => item.type === "mergedRowCount"
+  ) ? countMergedRows(rows, columns, mergeCell) : null;
   accumulators.forEach((item) => {
-    summaryValues.set(item.column.key, finalizeSummaryValue(item, rows));
+    summaryValues.set(
+      item.column.key,
+      finalizeSummaryValue(item, rows, mergedRowCount)
+    );
   });
   return summaryValues;
 }
@@ -10518,7 +10609,7 @@ function updateSummaryAccumulator(item, record) {
     item.max = numericValue;
   }
 }
-function finalizeSummaryValue(item, rows) {
+function finalizeSummaryValue(item, rows, mergedRowCount) {
   if (item.column.summaryTitle != null) {
     return item.column.summaryTitle;
   }
@@ -10526,7 +10617,11 @@ function finalizeSummaryValue(item, rows) {
     return formatSummaryOutput(item, String(rows.length), rows);
   }
   if (item.type === "mergedRowCount") {
-    return formatSummaryOutput(item, String(countMergedRows(rows)), rows);
+    return formatSummaryOutput(
+      item,
+      String(mergedRowCount ?? rows.length),
+      rows
+    );
   }
   if (item.type === "count") {
     return formatSummaryOutput(item, String(item.valueCount), rows);
@@ -10617,7 +10712,76 @@ function formatSummaryOutput(item, value, rows) {
   }
   return value;
 }
-function countMergedRows(rows) {
+function countMergedRows(rows, columns, mergeCell) {
+  const coveredRowIndexes = /* @__PURE__ */ new Set();
+  const explicitRowSpans = /* @__PURE__ */ new Map();
+  columns.forEach((column) => {
+    if (!column.onCell) {
+      return;
+    }
+    rows.forEach((record, rowIndex) => {
+      const value = getValueByDataIndex(record, column.dataIndex);
+      const span = column.onCell?.(value, record, rowIndex, column);
+      if (!span || !Object.prototype.hasOwnProperty.call(span, "rowSpan")) {
+        return;
+      }
+      const rowSpan = span.rowSpan ?? 1;
+      explicitRowSpans.set(`${rowIndex}::${column.key}`, rowSpan);
+      if (rowSpan === 0) {
+        coveredRowIndexes.add(rowIndex);
+        return;
+      }
+      if (!Number.isFinite(rowSpan) || rowSpan <= 1) {
+        return;
+      }
+      const spanEnd = Math.min(
+        rows.length,
+        rowIndex + Math.floor(rowSpan)
+      );
+      for (let index = rowIndex + 1; index < spanEnd; index += 1) {
+        coveredRowIndexes.add(index);
+      }
+    });
+  });
+  const rowMergeRule = mergeCell?.row;
+  const targetDataIndexes = rowMergeRule?.columns?.length ? rowMergeRule.columns : rowMergeRule?.keys;
+  const targetMergeColumns = columns.filter(
+    (column) => targetDataIndexes?.some(
+      (dataIndex) => isSameDataIndex(column.dataIndex, dataIndex)
+    )
+  );
+  if (rowMergeRule?.keys.length && targetMergeColumns.length) {
+    targetMergeColumns.forEach((column) => {
+      let rowIndex = 0;
+      while (rowIndex < rows.length) {
+        if (explicitRowSpans.has(`${rowIndex}::${column.key}`)) {
+          rowIndex += 1;
+          continue;
+        }
+        const currentGroupKey = getMergeGroupKey(
+          rows[rowIndex],
+          rowMergeRule.keys
+        );
+        let rowSpan = 1;
+        for (let index = rowIndex + 1; index < rows.length; index += 1) {
+          if (explicitRowSpans.has(`${index}::${column.key}`)) {
+            break;
+          }
+          if (getMergeGroupKey(rows[index], rowMergeRule.keys) !== currentGroupKey) {
+            break;
+          }
+          rowSpan += 1;
+        }
+        for (let index = rowIndex + 1; index < rowIndex + rowSpan; index += 1) {
+          coveredRowIndexes.add(index);
+        }
+        rowIndex += rowSpan;
+      }
+    });
+  }
+  if (coveredRowIndexes.size > 0) {
+    return rows.length - coveredRowIndexes.size;
+  }
   return rows.reduce((count, record) => {
     if (record == null || typeof record !== "object") {
       return count + 1;
@@ -10629,6 +10793,20 @@ function countMergedRows(rows) {
     return rowSpan > 0 ? count + 1 : count;
   }, 0);
 }
+function getMergeGroupKey(record, keys) {
+  return keys.map(
+    (dataIndex) => normalizeMergeValue(getValueByDataIndex(record, dataIndex))
+  ).join("|");
+}
+function normalizeMergeValue(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value) ?? "";
+}
 function yieldToMainThread() {
   return new Promise((resolve) => {
     if (typeof requestAnimationFrame === "function") {
@@ -20125,7 +20303,7 @@ function buildListTableRenderSnapshot(params) {
     options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
     6
   );
-  let width = hostWidth;
+  let width = Math.max(hostWidth - scrollbarThickness, 0);
   let height = hostHeight;
   const sourceNormalizedColumns = normalizeColumns(
     getResolvedColumns(options, selectedRowKeys)
@@ -20137,6 +20315,10 @@ function buildListTableRenderSnapshot(params) {
     groupedColumnKeys
   );
   const leafColumns = flattenLeafColumns(normalizedColumns);
+  const totalColumnWidth = computeColumnWidths(leafColumns);
+  if (width > 0 && totalColumnWidth > width && totalColumnWidth <= hostWidth) {
+    shrinkColumnWidthsToFit(leafColumns, width);
+  }
   if (options.stretchColumns !== false && width > 0 && !draggingResize) {
     stretchColumnWidths(leafColumns, width);
   }
@@ -20400,54 +20582,6 @@ function buildListTableRenderSnapshot(params) {
     fixedWidthRight: columnMetrics.fixedWidthRight,
     scroll
   });
-  for (let index = 0; index < 2 && scrollbarThickness > 0; index += 1) {
-    const nextWidth = Math.max(
-      hostWidth - (viewportResult.viewport.maxScrollTop > 0 ? scrollbarThickness : 0),
-      0
-    );
-    const nextHeight = Math.max(
-      hostHeight - (viewportResult.viewport.maxScrollLeft > 0 ? scrollbarThickness : 0),
-      0
-    );
-    if (nextWidth === width && nextHeight === height) {
-      break;
-    }
-    width = nextWidth;
-    height = nextHeight;
-    bodyState = resolveCurrentBodyState();
-    if (plainRowWindow) {
-      bodyState.frozenRows.scroll.windowed = true;
-      bodyState.frozenRows.scroll.dataRowIndexAligned = true;
-      bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
-      bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
-      bodyState.bodyLayout = resolveBodyLayout({
-        height,
-        headerHeight,
-        summaryRowHeight,
-        hasSummary,
-        rowHeight,
-        totalBodyHeight: plainRowWindow.totalBodyHeight,
-        topFrozenRowCount: 0,
-        bottomFrozenRowCount: 0,
-        scrollRowCount: plainRowWindow.totalRowCount
-      });
-    }
-    columnMetrics = resolveColumnMetrics({
-      columns: leafColumns,
-      tableWidth: width
-    });
-    viewportResult = computeViewport({
-      width,
-      height,
-      headerHeight,
-      bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
-      totalWidth: columnMetrics.totalWidth,
-      totalBodyHeight: bodyState.bodyLayout.totalBodyHeight,
-      fixedWidthLeft: columnMetrics.fixedWidthLeft,
-      fixedWidthRight: columnMetrics.fixedWidthRight,
-      scroll
-    });
-  }
   scrollPageSize = resolveScrollPageSize({
     options,
     pageSize: query.pagination.pageSize,
@@ -20728,8 +20862,8 @@ function updateListTableRenderSnapshotScroll(params) {
   } : snapshot.frozenRows;
   return {
     ...snapshot,
-    width,
-    height,
+    width: snapshot.width,
+    height: snapshot.height,
     columnSegments,
     headerRows,
     scrollbarLayout,
@@ -21114,13 +21248,8 @@ function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, inte
       verticalFrame.bodyBackgroundColor
     );
   }
-  if (layout.vertical && verticalFrame) {
-    drawVerticalScrollbarFrame(
-      ctx,
-      layout.vertical,
-      verticalFrame,
-      borderColor
-    );
+  if (verticalFrame) {
+    drawVerticalScrollbarFrame(ctx, verticalFrame, borderColor);
   }
   if (layout.horizontal) {
     drawAxisScrollbar(
@@ -21238,28 +21367,28 @@ function drawTrackBorder(ctx, rect, axis, borderColor) {
   ctx.stroke();
   ctx.restore();
 }
-function drawVerticalScrollbarFrame(ctx, layout, frame, borderColor) {
-  const left = Math.round(layout.decreaseButton.x) + 0.5;
-  const right = Math.round(layout.decreaseButton.x + layout.decreaseButton.width) - 0.5;
+function drawVerticalScrollbarFrame(ctx, frame, borderColor) {
+  const left = Math.round(frame.x) + 0.5;
+  const right = Math.round(frame.x + frame.width) - 0.5;
   const top = Math.round(frame.top) + 0.5;
   const bottom = Math.round(frame.top + frame.height) - 0.5;
   const headerBottom = Math.round(frame.headerBottom) + 0.5;
-  if (right <= left || bottom <= top) {
+  if (frame.width <= 0 || right <= left || bottom <= top) {
     return;
   }
   ctx.save();
   ctx.fillStyle = frame.headerBackgroundColor;
   ctx.fillRect(
-    layout.decreaseButton.x,
+    frame.x,
     frame.top,
-    layout.decreaseButton.width,
+    frame.width,
     Math.max(frame.headerBottom - frame.top, 0)
   );
   ctx.fillStyle = frame.bodyBackgroundColor;
   ctx.fillRect(
-    layout.decreaseButton.x,
+    frame.x,
     frame.headerBottom,
-    layout.decreaseButton.width,
+    frame.width,
     Math.max(frame.top + frame.height - frame.headerBottom, 0)
   );
   ctx.strokeStyle = borderColor;
@@ -22105,7 +22234,7 @@ function buildAutoRowSpanMap(rows, columns, rule, spanConfigMap, sourceRowIndexM
         rowIndex += 1;
         continue;
       }
-      const currentGroupKey = getMergeGroupKey(rows[rowIndex], groupKeys);
+      const currentGroupKey = getMergeGroupKey2(rows[rowIndex], groupKeys);
       let rowSpan = 1;
       for (let index = rowIndex + 1; index < rows.length; index += 1) {
         if (sourceRowIndexMap[index] !== (sourceRowIndexMap[index - 1] ?? index - 1) + 1) {
@@ -22115,7 +22244,7 @@ function buildAutoRowSpanMap(rows, columns, rule, spanConfigMap, sourceRowIndexM
         if (hasExplicitSpan(spanConfigMap.get(nextCellKey), "rowSpan")) {
           break;
         }
-        if (getMergeGroupKey(rows[index], groupKeys) !== currentGroupKey) {
+        if (getMergeGroupKey2(rows[index], groupKeys) !== currentGroupKey) {
           break;
         }
         rowSpan += 1;
@@ -22218,13 +22347,13 @@ function clampSpan(span, max) {
   }
   return Math.max(1, Math.min(Math.floor(span), max));
 }
-function getMergeGroupKey(record, keys) {
+function getMergeGroupKey2(record, keys) {
   if (!keys?.length) {
     return "";
   }
-  return keys.map((key) => normalizeMergeValue(getValueByDataIndex(record, key))).join("|");
+  return keys.map((key) => normalizeMergeValue2(getValueByDataIndex(record, key))).join("|");
 }
-function normalizeMergeValue(value) {
+function normalizeMergeValue2(value) {
   if (value == null) {
     return "";
   }
@@ -22234,7 +22363,7 @@ function normalizeMergeValue(value) {
   return JSON.stringify(value) ?? "";
 }
 function isSameMergeValue(left, right) {
-  return normalizeMergeValue(left) === normalizeMergeValue(right);
+  return normalizeMergeValue2(left) === normalizeMergeValue2(right);
 }
 function getMergedCellWidth(columns, startIndex, colSpan) {
   let width = 0;
@@ -24497,6 +24626,11 @@ function executeListTableRenderPipeline(params) {
     scrollbarOpacity,
     isScrollbarInteractive,
     {
+      x: width,
+      width: options.scrollbar?.visible === false ? 0 : Math.max(
+        options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
+        6
+      ),
       top: 0,
       height,
       headerBottom: headerHeight,
@@ -25998,6 +26132,7 @@ var ListTableSummaryController = class {
     const summaryTask = computeSummaryValuesAsync({
       rows: snapshot.displayRows,
       columns: snapshot.leafColumns,
+      mergeCell: this.options.getOptions().query?.mergeCell,
       signal
     }).then((summaryValues) => {
       if (signal.aborted || taskId !== this.summaryTaskId) {