@canvas-components/list-table 0.3.2 → 0.3.4

package/dist/index.cjs

@@ -335,6 +335,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) {
@@ -642,6 +666,40 @@ function cloneColumns(columns) {
     children: column.children ? cloneColumns(column.children) : void 0
   }));
 }
+function preserveRuntimeColumnWidths(params) {
+  const runtimeByKey = collectColumnsByKey(params.runtimeColumns);
+  const initialByKey = collectColumnsByKey(params.initialColumns);
+  let changed = false;
+  const visit = (columns) => {
+    columns.forEach((column) => {
+      const key = resolveColumnKey(column);
+      const runtimeColumn = runtimeByKey.get(key);
+      const initialColumn = initialByKey.get(key);
+      if (runtimeColumn && initialColumn && column.width === initialColumn.width && runtimeColumn.width !== initialColumn.width) {
+        column.width = runtimeColumn.width;
+        changed = true;
+      }
+      if (column.children?.length) {
+        visit(column.children);
+      }
+    });
+  };
+  visit(params.nextColumns);
+  return changed;
+}
+function collectColumnsByKey(columns) {
+  const result = /* @__PURE__ */ new Map();
+  const visit = (items) => {
+    items.forEach((column) => {
+      result.set(resolveColumnKey(column), column);
+      if (column.children?.length) {
+        visit(column.children);
+      }
+    });
+  };
+  visit(columns);
+  return result;
+}
 function applyInitialColumnVisibility(columns) {
   columns.forEach((column) => {
     if (column.hidden === void 0 && column.initialHide) {
@@ -1760,11 +1818,20 @@ function clampPageNumber(page, totalPages) {
 }
 var maximumTreeDepthCache = /* @__PURE__ */ new WeakMap();
 var sourceRowIndexCache = /* @__PURE__ */ new WeakMap();
+var selectedRowKeySetCache = /* @__PURE__ */ new WeakMap();
 var headerSelectionStateCache = /* @__PURE__ */ new WeakMap();
 var ROW_SELECTION_COLUMN_KEY = "__row_selection__";
 var ROW_SELECTOR_COLUMN_KEY = "__row_selector__";
 var EXPAND_COLUMN_KEY = "__row_expand__";
 var DEFAULT_ROW_SELECTOR_WIDTH = DEFAULT_SCROLLBAR_THICKNESS;
+function getSelectedRowKeySet(selectedRowKeys) {
+  let cached = selectedRowKeySetCache.get(selectedRowKeys);
+  if (!cached) {
+    cached = new Set(selectedRowKeys);
+    selectedRowKeySetCache.set(selectedRowKeys, cached);
+  }
+  return cached;
+}
 function getInitialSelectedRowKeys(options) {
   const rowSelection = options.rowSelection;
   if (!rowSelection) {
@@ -1827,6 +1894,7 @@ function createRowSelectionColumn(params) {
   const { options, selectedRowKeys } = params;
   const rowSelection = options.rowSelection;
   const type = rowSelection?.type === "radio" ? "radio" : "checkbox";
+  const selectedRowKeySet = getSelectedRowKeySet(selectedRowKeys);
   const selectionColumn = {
     key: ROW_SELECTION_COLUMN_KEY,
     dataIndex: ROW_SELECTION_COLUMN_KEY,
@@ -1843,7 +1911,7 @@ function createRowSelectionColumn(params) {
       const rowKey = getRowKey(options, record, rowIndex);
       return {
         type,
-        checked: selectedRowKeys.includes(rowKey),
+        checked: selectedRowKeySet.has(rowKey),
         disabled: isRowSelectionDisabled(rowSelection, record)
       };
     },
@@ -1962,40 +2030,39 @@ function getResolvedColumns(options, selectedRowKeys) {
   return rowSelectorColumn ? [rowSelectorColumn, ...resolvedColumns] : resolvedColumns;
 }
 function getSelectedRows(options, selectedRowKeys) {
+  const selectedRowKeySet = getSelectedRowKeySet(selectedRowKeys);
   return options.dataSource.filter(
-    (record, index) => selectedRowKeys.includes(getRowKey(options, record, index))
+    (record, index) => selectedRowKeySet.has(getRowKey(options, record, index))
   );
 }
-function getVisibleSelectableRows(params) {
-  const { rowSelection, displayData } = params;
-  return displayData.filter((record) => !isRowSelectionDisabled(rowSelection, record));
-}
 function getHeaderSelectionState(params) {
-  const { options, selectedRowKeys, displayData } = params;
-  const cached = headerSelectionStateCache.get(displayData);
+  const { options, selectedRowKeys } = params;
+  const selectableData = options.dataSource;
+  const cached = headerSelectionStateCache.get(selectableData);
   if (cached && cached.options === options && cached.selectedRowKeys === selectedRowKeys) {
     return cached.state;
   }
   const rowSelection = options.rowSelection;
-  const visibleRows = getVisibleSelectableRows({
-    rowSelection,
-    displayData
-  });
-  const selectedKeySet = new Set(selectedRowKeys);
-  let selectedVisibleCount = 0;
-  visibleRows.forEach((record, index) => {
+  const selectedKeySet = getSelectedRowKeySet(selectedRowKeys);
+  let selectableCount = 0;
+  let selectedCount = 0;
+  selectableData.forEach((record, index) => {
+    if (isRowSelectionDisabled(rowSelection, record)) {
+      return;
+    }
+    selectableCount += 1;
     if (selectedKeySet.has(getRowKey(options, record, index))) {
-      selectedVisibleCount += 1;
+      selectedCount += 1;
     }
   });
   const type = rowSelection?.type === "radio" ? "radio" : "checkbox";
   const state = {
     type,
-    checked: visibleRows.length > 0 && selectedVisibleCount === visibleRows.length,
-    indeterminate: selectedVisibleCount > 0 && selectedVisibleCount < visibleRows.length,
-    disabled: visibleRows.length === 0
+    checked: selectableCount > 0 && selectedCount === selectableCount,
+    indeterminate: selectedCount > 0 && selectedCount < selectableCount,
+    disabled: selectableCount === 0
   };
-  headerSelectionStateCache.set(displayData, {
+  headerSelectionStateCache.set(selectableData, {
     options,
     selectedRowKeys,
     state
@@ -2018,24 +2085,31 @@ function resolveToggledRowSelectionKeys(params) {
   };
 }
 function resolveToggleAllVisibleRowKeys(params) {
-  const { options, selectedRowKeys, displayData } = params;
+  const { options, selectedRowKeys } = params;
   const rowSelection = options.rowSelection;
   if (!rowSelection || rowSelection.type === "radio") {
     return null;
   }
-  const visibleRows = getVisibleSelectableRows({
-    rowSelection,
-    displayData
-  });
-  const visibleKeys = visibleRows.map(
-    (record, index) => getRowKey(options, record, index)
-  );
-  const headerState = getHeaderSelectionState({
-    options,
-    selectedRowKeys,
-    displayData
+  const selectedKeySet = getSelectedRowKeySet(selectedRowKeys);
+  const selectableKeys = [];
+  let allSelected = true;
+  options.dataSource.forEach((record, index) => {
+    if (isRowSelectionDisabled(rowSelection, record)) {
+      return;
+    }
+    const key = getRowKey(options, record, index);
+    selectableKeys.push(key);
+    if (!selectedKeySet.has(key)) {
+      allSelected = false;
+    }
   });
-  return headerState.checked ? selectedRowKeys.filter((key) => !visibleKeys.includes(key)) : Array.from(/* @__PURE__ */ new Set([...selectedRowKeys, ...visibleKeys]));
+  if (allSelected && selectableKeys.length > 0) {
+    const selectableKeySet = new Set(selectableKeys);
+    return selectedRowKeys.filter((key) => !selectableKeySet.has(key));
+  }
+  const nextKeySet = new Set(selectedRowKeys);
+  selectableKeys.forEach((key) => nextKeySet.add(key));
+  return Array.from(nextKeySet);
 }
 
 // src/engine/store/state.ts
@@ -3218,7 +3292,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);
@@ -3326,9 +3400,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)];
 }
@@ -6855,7 +6932,7 @@ function expandBodyContents(contents) {
     expanded.push({
       content,
       contentIndex,
-      gapBefore: expanded.length === 0 || textOnly ? 0 : previousContent?.type === "link" && content.type === "link" ? LINK_CONTENT_GAP : CONTENT_GAP
+      gapBefore: expanded.length === 0 || textOnly ? 0 : resolveInlineContentGap(previousContent, content)
     });
     if ((content.type === "checkbox" || content.type === "radio") && content.label) {
       const textLabelContent = {
@@ -6874,6 +6951,12 @@ function expandBodyContents(contents) {
   });
   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: [],
@@ -10463,7 +10546,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) => {
@@ -10516,8 +10599,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;
 }
@@ -10572,7 +10661,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;
   }
@@ -10580,7 +10669,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);
@@ -10671,7 +10764,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 = utils.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) => utils.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;
@@ -10683,6 +10845,20 @@ function countMergedRows(rows) {
     return rowSpan > 0 ? count + 1 : count;
   }, 0);
 }
+function getMergeGroupKey(record, keys) {
+  return keys.map(
+    (dataIndex) => normalizeMergeValue(utils.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") {
@@ -13466,7 +13642,7 @@ async function getBaseDisplayRowsAsync(params) {
 }
 function getDisplayRows(params) {
   const rows = getBaseDisplayRows(params);
-  if (!params.options.pagination || params.options.query?.mode === "remote") {
+  if (!params.options.pagination || isRemotePaginationResult(params.options)) {
     return rows;
   }
   return sliceDisplayRowsByPagination({
@@ -13476,7 +13652,7 @@ function getDisplayRows(params) {
   });
 }
 function sliceDisplayRowsFromBaseRows(params) {
-  if (!params.options.pagination || params.options.query?.mode === "remote") {
+  if (!params.options.pagination || isRemotePaginationResult(params.options)) {
     return params.rows;
   }
   return sliceDisplayRowsByPagination({
@@ -13485,6 +13661,13 @@ function sliceDisplayRowsFromBaseRows(params) {
     state: params.query.pagination
   });
 }
+function isRemotePaginationResult(options) {
+  if (options.query?.mode === "remote") {
+    return true;
+  }
+  const total = options.pagination && options.pagination.total;
+  return typeof total === "number" && Number.isFinite(total) && total > options.dataSource.length;
+}
 function emitListTableQueryChange(params) {
   const {
     options,
@@ -15012,6 +15195,7 @@ var TEXT_SELECTION_DRAG_THRESHOLD = 5;
 var TEXT_SELECTION_AUTO_SCROLL_EDGE_SIZE = 36;
 var TEXT_SELECTION_AUTO_SCROLL_MAX_VERTICAL_SPEED = 1200;
 var TEXT_SELECTION_AUTO_SCROLL_MAX_HORIZONTAL_SPEED = 900;
+var EDITABLE_CELL_ROW_SELECTION_DELAY = 300;
 var ListTableEventController = class {
   constructor(host) {
     __publicField(this, "searchKeyword", "");
@@ -15033,6 +15217,7 @@ var ListTableEventController = class {
     __publicField(this, "cellSelectionAutoScrollVelocity", { x: 0, y: 0 });
     __publicField(this, "cellSelectionAutoScrollTargetVelocity", { x: 0, y: 0 });
     __publicField(this, "continuousScrollTimer", null);
+    __publicField(this, "pendingEditableCellRowSelectionTimer", null);
     __publicField(this, "outsideClickDocument", null);
     __publicField(this, "outsideClickStarted", null);
     __publicField(this, "host");
@@ -15434,6 +15619,7 @@ var ListTableEventController = class {
       );
     });
     __publicField(this, "handleDoubleClick", (event) => {
+      this.cancelPendingEditableCellRowSelection();
       if (!this.host.canvasElement) {
         return;
       }
@@ -15963,7 +16149,24 @@ var ListTableEventController = class {
       if ((result.area === "body" || result.area === "body-content") && typeof result.rowIndex === "number" && this.host.options.rowSelection?.selectRowByClick && result.columnKey && !isSystemColumnKey(result.columnKey)) {
         const record = this.host.getDisplayData()[result.rowIndex];
         if (record !== void 0) {
-          this.host.toggleRowSelection(record, result.rowIndex);
+          const column = this.host.leafColumns.find(
+            (item) => item.key === result.columnKey
+          );
+          const value = column?.dataIndex != null ? utils.getValueByDataIndex(record, column.dataIndex) : void 0;
+          const canOpenEditorByDoubleClick = shouldOpenCellEditorOnClick(
+            column,
+            2,
+            {
+              value,
+              record,
+              rowIndex: result.rowIndex
+            }
+          );
+          if (canOpenEditorByDoubleClick && event.detail === 1) {
+            this.scheduleEditableCellRowSelection(record, result.rowIndex);
+          } else if (!canOpenEditorByDoubleClick || event.detail !== 2) {
+            this.host.toggleRowSelection(record, result.rowIndex);
+          }
         }
       }
       if (result.area === "body" && typeof result.rowIndex === "number" && this.host.options.expandable?.expandRowByClick && result.columnKey && !isSystemColumnKey(result.columnKey) && this.host.toggleRowExpand(result.rowIndex)) {
@@ -16437,6 +16640,7 @@ var ListTableEventController = class {
     this.host.render();
   }
   destroy() {
+    this.cancelPendingEditableCellRowSelection();
     this.stopContinuousScroll();
     this.stopTextSelectionAutoScroll();
     this.stopCellSelectionAutoScroll();
@@ -16501,6 +16705,20 @@ var ListTableEventController = class {
     event.preventDefault();
     this.host.editingController.open(rowIndex, columnKey, event.key);
   }
+  scheduleEditableCellRowSelection(record, rowIndex) {
+    this.cancelPendingEditableCellRowSelection();
+    this.pendingEditableCellRowSelectionTimer = globalThis.setTimeout(() => {
+      this.pendingEditableCellRowSelectionTimer = null;
+      this.host.toggleRowSelection(record, rowIndex);
+    }, EDITABLE_CELL_ROW_SELECTION_DELAY);
+  }
+  cancelPendingEditableCellRowSelection() {
+    if (this.pendingEditableCellRowSelectionTimer == null) {
+      return;
+    }
+    globalThis.clearTimeout(this.pendingEditableCellRowSelectionTimer);
+    this.pendingEditableCellRowSelectionTimer = null;
+  }
   async autoFitColumnWidths(columnKey) {
     const ctx = this.host.canvasElement?.getContext("2d");
     if (!ctx) {
@@ -18239,6 +18457,47 @@ function persistListTableColumnConfig(params) {
     )
   );
 }
+async function resetListTableStoredColumnConfig(params) {
+  const { storageKey, columns } = params;
+  if (!storageKey) {
+    return;
+  }
+  const initialColumnTree = columns.map(cloneColumnTree);
+  ensureColumnKeysInPlace(initialColumnTree);
+  const stored = await getColumnConfig(storageKey);
+  if (!stored) {
+    return;
+  }
+  const initialColumns = buildStoredColumnConfig(
+    initialColumnTree,
+    { key: null, order: null },
+    {}
+  ).columns;
+  const nextColumns = {};
+  Object.entries(initialColumns).forEach(([key, initial]) => {
+    const next = {
+      ...stored.columns[key] ?? initial,
+      width: initial.width,
+      hidden: initial.hidden
+    };
+    if (initial.fixed) {
+      next.fixed = initial.fixed;
+    } else {
+      delete next.fixed;
+    }
+    nextColumns[key] = next;
+  });
+  await saveColumnConfig(storageKey, {
+    ...stored,
+    columns: nextColumns
+  });
+}
+function cloneColumnTree(column) {
+  return {
+    ...column,
+    children: column.children?.map(cloneColumnTree)
+  };
+}
 async function loadListTableStoredConfig(params) {
   const { storageKey, columns } = params;
   if (!storageKey) {
@@ -20191,6 +20450,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);
   }
@@ -20734,8 +20997,8 @@ function updateListTableRenderSnapshotScroll(params) {
   } : snapshot.frozenRows;
   return {
     ...snapshot,
-    width,
-    height,
+    width: snapshot.width,
+    height: snapshot.height,
     columnSegments,
     headerRows,
     scrollbarLayout,
@@ -21120,13 +21383,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(
@@ -21244,28 +21502,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;
@@ -22111,7 +22369,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) {
@@ -22121,7 +22379,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;
@@ -22224,13 +22482,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(utils.getValueByDataIndex(record, key))).join("|");
+  return keys.map((key) => normalizeMergeValue2(utils.getValueByDataIndex(record, key))).join("|");
 }
-function normalizeMergeValue(value) {
+function normalizeMergeValue2(value) {
   if (value == null) {
     return "";
   }
@@ -22240,7 +22498,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;
@@ -23838,9 +24096,7 @@ function drawListTableHeader(params) {
       columnKey: ROW_SELECTION_COLUMN_KEY,
       ...getHeaderSelectionState({
         options,
-        selectedRowKeys,
-        displayData
-      })
+        selectedRowKeys})
     } : null,
     inlineContentInset,
     collapsedColumnMarkers,
@@ -24503,6 +24759,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,
@@ -26004,6 +26265,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) {
@@ -26894,6 +27156,19 @@ var ListTableCore = class {
    */
   updateOptions(options) {
     this.animationController.stopCarouselScroll();
+    const host = this.asAssemblyHost();
+    const incomingColumnsAreRuntimeColumns = options.columns === this.options.columns;
+    const nextInitialColumns = incomingColumnsAreRuntimeColumns ? cloneColumns(host.initialColumns) : cloneColumns(options.columns);
+    const nextInitialStretchColumns = incomingColumnsAreRuntimeColumns ? host.initialStretchColumns : options.stretchColumns;
+    const shouldPreserveRuntimeWidths = this.options.stretchColumns === false && options.stretchColumns === host.initialStretchColumns;
+    if (shouldPreserveRuntimeWidths) {
+      preserveRuntimeColumnWidths({
+        nextColumns: options.columns,
+        runtimeColumns: this.options.columns,
+        initialColumns: host.initialColumns
+      });
+      options.stretchColumns = false;
+    }
     applyInitialColumnVisibility(options.columns);
     ensureColumnKeysInPlace(options.columns);
     if (options.expandable?.expandedRowKeys !== void 0 && !areSameRowKeySet(
@@ -26909,10 +27184,9 @@ var ListTableCore = class {
     this.queryController.reset();
     this.summaryController.reset();
     this.options = options;
-    const host = this.asAssemblyHost();
     host.syncGroupingFromOptions();
-    host.initialColumns = cloneColumns(options.columns);
-    host.initialStretchColumns = options.stretchColumns;
+    host.initialColumns = nextInitialColumns;
+    host.initialStretchColumns = nextInitialStretchColumns;
     this.store.dispatch(
       replaceStateAction(
         resolveListTableStateOnOptionsUpdate(options, this.store.getSnapshot())
@@ -27116,5 +27390,6 @@ var ListTable = class {
 };
 
 exports.ListTable = ListTable;
+exports.resetListTableStoredColumnConfig = resetListTableStoredColumnConfig;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map