@canvas-components/list-table 0.3.16 → 0.3.18

package/dist/index.cjs

@@ -666,15 +666,19 @@ function stretchColumnWidths(columns, containerWidth) {
   }
   const extra = containerWidth - totalWidth;
   const stretchableWidth = computeColumnWidths(stretchableColumns);
-  const ratio = stretchableWidth > 0 ? extra / stretchableWidth : 0;
-  for (const column of stretchableColumns) {
-    column.width = Math.round(column.width * (1 + ratio));
-  }
-  const adjustedTotal = computeColumnWidths(columns);
-  const remain = containerWidth - adjustedTotal;
-  if (remain > 0) {
-    stretchableColumns[stretchableColumns.length - 1].width += remain;
-  }
+  let accumulatedWidth = 0;
+  let allocatedExtra = 0;
+  stretchableColumns.forEach((column, index) => {
+    accumulatedWidth += column.width;
+    const targetExtra = index === stretchableColumns.length - 1 ? extra : Math.min(
+      extra,
+      Math.floor(
+        extra * (stretchableWidth > 0 ? accumulatedWidth / stretchableWidth : (index + 1) / stretchableColumns.length)
+      )
+    );
+    column.width += targetExtra - allocatedExtra;
+    allocatedExtra = targetExtra;
+  });
 }
 function shrinkColumnWidthsToFit(columns, containerWidth) {
   let remaining = Math.max(
@@ -753,6 +757,7 @@ function normalizeColumn(column, depth, parentKey) {
     align: column.align ?? "left",
     headerAlign: column.headerAlign,
     fixed: column.fixed,
+    resizable: column.resizable,
     hidden: column.hidden,
     showExpandIcon: column.showExpandIcon,
     ellipsis: column.ellipsis,
@@ -8153,6 +8158,18 @@ var EMPTY_RANGE_HIGHLIGHT2 = {
   selectedColumnRange: null
 };
 function drawSummary(params) {
+  const width = params.width ?? Math.max(
+    0,
+    ...[
+      ...params.leftColumns,
+      ...params.centerColumns,
+      ...params.rightColumns
+    ].map((column) => column.drawX + column.width)
+  );
+  params.ctx.save();
+  params.ctx.fillStyle = params.theme.backgroundColor;
+  params.ctx.fillRect(0, params.summaryTop, width, params.summaryHeight);
+  params.ctx.restore();
   const defaultTitleColumnKey = resolveDefaultSummaryTitleColumnKey([
     ...params.leftColumns,
     ...params.centerColumns,
@@ -29013,6 +29030,18 @@ function roundRect2(ctx, x, y, width, height, radius) {
 
 // src/rendering/pipeline/body-section-renderer.ts
 function drawListTableBodySections(params) {
+  params.ctx.save();
+  params.ctx.beginPath();
+  params.ctx.rect(
+    0,
+    params.headerHeight,
+    params.width + 1,
+    Math.max(
+      params.bottomFrozenTop + params.bottomFrozenHeight - params.headerHeight,
+      0
+    )
+  );
+  params.ctx.clip();
   const baseParams = {
     ctx: params.ctx,
     rowHeight: params.rowHeight,
@@ -29077,6 +29106,7 @@ function drawListTableBodySections(params) {
       borderColor: params.theme.borderColor
     });
   }
+  params.ctx.restore();
 }
 function drawBodySection(params) {
   const { section, bodyHeight } = params;
@@ -29958,6 +29988,7 @@ function executeListTableRenderPipeline(params) {
         ctx,
         textSelection: selection.textSelection,
         summaryValues,
+        width,
         summaryTop,
         summaryHeight: summaryRowHeight,
         leftColumns: leftSegment,
@@ -30507,9 +30538,10 @@ var ListTableRenderController = class {
     const availableHeight = this.options.getContainerClientHeight() > 0 ? this.options.getContainerClientHeight() : hostSize.height;
     const zoom = this.resolveZoom();
     const layoutWidth = hostSize.width / zoom;
-    const layoutAvailableHeight = availableHeight / zoom;
-    const currentSnapshot = this.currentRenderSnapshot;
-    const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ? currentSnapshot.rowHeight : 0) && currentSnapshot.groupingColumns.map((column) => column.key).join("
") === (this.options.getGroupColumnKeys?.() ?? []).join("
") ? currentSnapshot : this.buildSnapshot(layoutWidth, layoutAvailableHeight, false);
+    const measureSnapshot = this.buildSnapshot(
+      layoutWidth,
+      hostSize.height / zoom
+    );
     if (!measureSnapshot) {
       this.options.setFittedHeight(null);
       return;
@@ -30528,10 +30560,13 @@ var ListTableRenderController = class {
       summaryHeight: measureSnapshot.bodyLayout.summaryHeight
     });
     const paginationElement = this.options.getPaginationElement();
+    const scrollbar = this.options.getOptions().scrollbar;
+    const horizontal = utils.resolveCanvasScrollbarAxis(scrollbar, "horizontal");
+    const horizontalReserve = horizontal.visible && measureSnapshot.columnMetrics.centerContentWidth - measureSnapshot.columnMetrics.availableCenterWidth > 1 ? horizontal.thickness + Math.max(scrollbar?.horizontalBottom ?? 0, 0) : 0;
     const paginationHeight = paginationElement && paginationElement.style.display !== "none" ? paginationElement.offsetHeight : 0;
     const fittedHeight = resolveFittedTableHeight({
       availableHeight,
-      contentHeight: contentHeight * zoom + paginationHeight
+      contentHeight: (contentHeight + horizontalReserve) * zoom + paginationHeight
     });
     this.options.setFittedHeight(
       fittedHeight == null ? null : fittedHeight + TABLE_CONTENT_BORDER_SIZE