AdvancedTable Column resize bug fix (#3081)

Co-authored-by: Lee White <lee.white@hashicorp.com>

Author: zamoore

.changeset/tender-carrots-fix.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+<!-- START components/table/advanced-table -->
+`AdvancedTable` - Fixed bug with automatic column resizing and scroll-shadow placement.
+<!-- END -->

packages/components/src/components/hds/advanced-table/index.hbs

@@ -24,6 +24,7 @@
       --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset
       max-height=@maxHeight
     }}
+    {{this._registerGridElement}}
     {{this._setUpScrollWrapper}}
   >
     {{! Header }}
@@ -54,7 +55,7 @@
               @tableHeight={{this._tableHeight}}
               @onColumnResize={{@onColumnResize}}
               @onPinFirstColumn={{this._onPinFirstColumn}}
-              {{this._setColumnWidth column}}
+              {{this._registerThElement column}}
             >
               {{column.label}}
             </Hds::AdvancedTable::ThSort>
@@ -74,7 +75,7 @@
               @onClickToggle={{this._tableModel.toggleAll}}
               @onColumnResize={{@onColumnResize}}
               @onPinFirstColumn={{this._onPinFirstColumn}}
-              {{this._setColumnWidth column}}
+              {{this._registerThElement column}}
             >
               {{column.label}}
             </Hds::AdvancedTable::Th>

packages/components/src/components/hds/advanced-table/index.ts

@@ -11,7 +11,6 @@ import type { WithBoundArgs } from '@glint/template';
 import { guidFor } from '@ember/object/internals';
 import { modifier } from 'ember-modifier';
 import type Owner from '@ember/owner';
-import { schedule } from '@ember/runloop';
 
 import HdsAdvancedTableTableModel from './models/table.ts';
 
@@ -384,23 +383,11 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     const { isSelectable } = this.args;
     const { columns } = this._tableModel;
 
-    const DEFAULT_COLUMN_WIDTH = '1fr';
-
     // if there is a select checkbox, the first column has a 'min-content' width to hug the checkbox content
     let style = isSelectable ? 'min-content ' : '';
 
-    const hasCustomColumnWidths = columns.some(
-      (column) => column.width !== undefined
-    );
-
-    if (hasCustomColumnWidths) {
-      // check the custom column widths, if the current column has a custom width use the custom width. otherwise take the available space.
-      for (let i = 0; i < columns.length; i++) {
-        style += ` ${columns[i]!.width ?? DEFAULT_COLUMN_WIDTH}`;
-      }
-    } else {
-      // if there are no custom column widths, each column is the same width and they take up the available space
-      style += `repeat(${columns.length}, ${DEFAULT_COLUMN_WIDTH})`;
+    for (let i = 0; i < columns.length; i++) {
+      style += ` ${columns[i]!.appliedWidth}`;
     }
 
     return style;
@@ -446,23 +433,27 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     return classes.join(' ');
   }
 
-  private _setColumnWidth = modifier(
+  private _registerGridElement = modifier((element: HTMLDivElement) => {
+    this._tableModel.gridElement = element;
+  });
+
+  private _registerThElement = modifier(
     (element: HTMLDivElement, [column]: [HdsAdvancedTableColumnType]) => {
-      // eslint-disable-next-line ember/no-runloop
-      schedule('afterRender', () => {
-        const width = element.offsetWidth;
+      if (column === undefined) {
+        return;
+      }
 
-        if (column.width === undefined) {
-          column.setPxWidth(width);
-          column.originalWidth = `${width}px`;
-        }
-      });
+      column.thElement = element;
     }
   );
 
   private _setUpScrollWrapper = modifier((element: HTMLDivElement) => {
     this._scrollWrapperElement = element;
 
+    const updateHorizontalScrollIndicators = () => {
+      this.showScrollIndicatorRight = element.clientWidth < element.scrollWidth;
+    };
+
     this._scrollHandler = () => {
       this._updateScrollIndicators(element);
     };
@@ -498,6 +489,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     this._resizeObserver = new ResizeObserver((entries) => {
       entries.forEach(() => {
         updateMeasurements();
+        updateHorizontalScrollIndicators();
       });
     });
 
@@ -506,9 +498,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     updateMeasurements();
 
     // on render check if should show right scroll indicator
-    if (element.clientWidth < element.scrollWidth) {
-      this.showScrollIndicatorRight = true;
-    }
+    updateHorizontalScrollIndicators();
 
     // on render check if should show bottom scroll indicator
     if (element.clientHeight < element.scrollHeight) {

packages/components/src/components/hds/advanced-table/models/column.ts

@@ -5,13 +5,15 @@
 
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 
 import type HdsAdvancedTableModel from './table.ts';
 import type {
   HdsAdvancedTableHorizontalAlignment,
   HdsAdvancedTableColumn as HdsAdvancedTableColumnType,
 } from '../types';
 
+export const DEFAULT_WIDTH = '1fr'; // default to '1fr' to allow flexible width
 export const DEFAULT_MIN_WIDTH = '150px';
 export const DEFAULT_MAX_WIDTH = '800px';
 
@@ -31,40 +33,63 @@ export default class HdsAdvancedTableColumn {
   @tracked label: string = '';
   @tracked align?: HdsAdvancedTableHorizontalAlignment = 'left';
   @tracked isExpandable?: boolean = false;
-  @tracked isReorderable?: boolean = false;
   @tracked isSortable?: boolean = false;
   @tracked isVisuallyHidden?: boolean = false;
-  @tracked key?: string = undefined;
-  @tracked minWidth?: `${number}px` = DEFAULT_MIN_WIDTH;
-  @tracked maxWidth?: `${number}px` = DEFAULT_MAX_WIDTH;
+  @tracked key: string;
   @tracked tooltip?: string = undefined;
-  @tracked width?: string = undefined;
-  @tracked originalWidth?: string = undefined; // used to restore the width when resetting
-  @tracked imposedWidthDelta: number = 0; // used to track the width change imposed by the previous column
+  @tracked thElement?: HTMLDivElement = undefined;
+
+  // width properties
+  @tracked transientWidth?: `${number}px` = undefined; // used for transient width changes
+  @tracked width: string = DEFAULT_WIDTH;
+  @tracked minWidth: `${number}px` = DEFAULT_MIN_WIDTH;
+  @tracked maxWidth: `${number}px` = DEFAULT_MAX_WIDTH;
+  @tracked originalWidth: string = this.width; // used to restore the width when resetting
+  @tracked widthDebts: Record<string, number> = {}; // used to track width changes imposed by other columns
 
   @tracked sortingFunction?: (a: unknown, b: unknown) => number = undefined;
 
   table: HdsAdvancedTableModel;
 
-  get pxWidth(): number | undefined {
+  get appliedWidth(): string {
+    return this.transientWidth ?? this.width;
+  }
+  get pxAppliedWidth(): number | undefined {
+    if (isPxSize(this.appliedWidth)) {
+      return pxToNumber(this.appliedWidth);
+    }
+  }
+
+  get pxTransientWidth(): number | undefined {
+    if (this.transientWidth !== undefined) {
+      return pxToNumber(this.transientWidth);
+    }
+  }
+  set pxTransientWidth(value: number | undefined) {
+    if (value !== undefined && value >= 0) {
+      this.transientWidth = `${value}px`;
+    } else {
+      this.transientWidth = undefined;
+    }
+  }
+
+  get pxWidth(): number {
     if (isPxSize(this.width)) {
-      return pxToNumber(this.width!);
+      return pxToNumber(this.width);
+    } else {
+      return this.thElement?.offsetWidth ?? 0;
     }
   }
   set pxWidth(value: number) {
     this.width = `${value}px`;
   }
 
-  get pxMinWidth(): number | undefined {
-    if (isPxSize(this.minWidth)) {
-      return pxToNumber(this.minWidth!);
-    }
+  get pxMinWidth(): number {
+    return isPxSize(this.minWidth) ? pxToNumber(this.minWidth) : 0;
   }
 
-  get pxMaxWidth(): number | undefined {
-    if (isPxSize(this.maxWidth)) {
-      return pxToNumber(this.maxWidth!);
-    }
+  get pxMaxWidth(): number {
+    return isPxSize(this.maxWidth) ? pxToNumber(this.maxWidth) : Infinity;
   }
 
   get index(): number {
@@ -117,37 +142,130 @@ export default class HdsAdvancedTableColumn {
     this.isExpandable = 'isExpandable' in column ? column.isExpandable : false;
     this.isSortable = column.isSortable ?? false;
     this.isVisuallyHidden = column.isVisuallyHidden ?? false;
-    this.key = column.key;
+    this.key = column.key ?? guidFor(this);
     this.tooltip = column.tooltip;
     this._setWidthValues(column);
     this.sortingFunction = column.sortingFunction;
   }
 
+  // main collection function
+  private collectWidthDebts(): void {
+    this.table.columns.forEach((debtor) => {
+      const debtToCollect = debtor.widthDebts[this.key] ?? 0;
+
+      if (debtToCollect <= 0) {
+        return;
+      }
+
+      const amountPaid = debtor._sourceFundsForPayment(debtToCollect);
+
+      if (amountPaid > 0) {
+        this.pxWidth = (this.pxWidth ?? 0) + amountPaid;
+
+        const remainingDebt = debtToCollect - amountPaid;
+
+        if (remainingDebt > 0) {
+          debtor.widthDebts[this.key] = remainingDebt;
+        } else {
+          delete debtor.widthDebts[this.key];
+        }
+      }
+    });
+  }
+
+  // function for recursively recovering width debts without ending up in a deficit
+  private _sourceFundsForPayment(amountNeeded: number): number {
+    let fundsSourced = 0;
+
+    // preferentially source width from our own surplus first
+    const surplus = Math.max(0, (this.pxWidth ?? 0) - this.pxMinWidth);
+    const paymentFromSurplus = Math.min(amountNeeded, surplus);
+
+    if (paymentFromSurplus > 0) {
+      this.pxWidth = (this.pxWidth ?? 0) - paymentFromSurplus;
+
+      fundsSourced = fundsSourced + paymentFromSurplus;
+    }
+
+    // if we dont have enough to cover, source from debtors recursively
+    const shortfall = amountNeeded - fundsSourced;
+
+    if (shortfall > 0) {
+      const ourDebtors = this.table.columns.filter(
+        (column) => column.widthDebts[this.key]
+      );
+
+      for (const subDebtor of ourDebtors) {
+        const amountStillNeeded = amountNeeded - fundsSourced;
+
+        if (amountStillNeeded <= 0) {
+          break;
+        }
+
+        const subDebtOwed = subDebtor.widthDebts[this.key] ?? 0;
+        const amountToRequest = Math.min(amountStillNeeded, subDebtOwed);
+
+        const collectedFromSubDebtor =
+          subDebtor._sourceFundsForPayment(amountToRequest);
+
+        if (collectedFromSubDebtor > 0) {
+          fundsSourced = fundsSourced + collectedFromSubDebtor;
+
+          // Update the sub-debtor's ledger.
+          const remainingSubDebt = subDebtOwed - collectedFromSubDebtor;
+
+          if (remainingSubDebt > 0) {
+            subDebtor.widthDebts[this.key] = remainingSubDebt;
+          } else {
+            delete subDebtor.widthDebts[this.key];
+          }
+        }
+      }
+    }
+
+    return fundsSourced;
+  }
+
+  private payWidthDebts(): void {
+    Object.entries(this.widthDebts).forEach(([lenderKey, amount]) => {
+      const lender = this.table.getColumnByKey(lenderKey);
+
+      if (lender !== undefined) {
+        // Give the width back to the column that lent it to us
+        lender.pxWidth = (lender.pxWidth ?? 0) + amount;
+      }
+    });
+
+    // Clear our own debt ledger, as we've paid everyone back
+    this.widthDebts = {};
+  }
+
+  private settleWidthDebts(): void {
+    this.collectWidthDebts();
+    this.payWidthDebts();
+  }
+
+  // set initial width values
   private _setWidthValues({
     width,
     minWidth,
     maxWidth,
   }: HdsAdvancedTableColumnType): void {
-    if (width === undefined) {
-      return;
-    }
-
-    this.width = width;
+    this.width = width ?? DEFAULT_WIDTH;
 
     // capture the width at the time of instantiation so it can be restored
-    this.originalWidth = width;
+    this.originalWidth = this.width;
 
     this.minWidth = minWidth ?? DEFAULT_MIN_WIDTH;
     this.maxWidth = maxWidth ?? DEFAULT_MAX_WIDTH;
   }
 
   // Sets the column width in pixels, ensuring it respects the min and max width constraints.
-  @action
-  setPxWidth(newPxWidth: number): void {
+  setPxTransientWidth(newPxWidth: number): void {
     const pxMinWidth = this.pxMinWidth ?? 1;
     const minLimitedPxWidth = Math.max(newPxWidth, pxMinWidth);
 
-    this.pxWidth =
+    this.pxTransientWidth =
       this.pxMaxWidth !== undefined
         ? Math.min(minLimitedPxWidth, this.pxMaxWidth)
         : minLimitedPxWidth;
@@ -157,29 +275,10 @@ export default class HdsAdvancedTableColumn {
     }
   }
 
-  // This method is called when the column width is changed by the previous column.
-  @action
-  onPreviousColumnWidthRestored(): void {
-    const restoredWidth = (this.pxWidth ?? 0) + this.imposedWidthDelta;
-
-    this.setPxWidth(restoredWidth);
-
-    this.imposedWidthDelta = 0;
-  }
-
-  // This method is called when the next column width is restored.
-  @action
-  onNextColumnWidthRestored(imposedWidthDelta: number): void {
-    this.setPxWidth((this.pxWidth ?? 0) - imposedWidthDelta);
-  }
-
   @action
   restoreWidth(): void {
-    this.width = this.originalWidth;
-    this.imposedWidthDelta = 0;
+    this.settleWidthDebts();
 
-    if (this.key === undefined) {
-      return;
-    }
+    this.width = this.originalWidth ?? this.width;
   }
 }