[Table] Add resizeRowsByTallestCells to handle multi-column resize

packages/table/preview/index.tsx

@@ -140,10 +140,10 @@ class FormatsTable extends React.Component<{}, {}> {
             this.formatsTable.resizeRowsByTallestCell(3);
         });
         document.querySelector(".resize-wrapped-and-json").addEventListener("click", () => {
-            this.formatsTable.resizeRowsByTallestCells([1, 3]);
+            this.formatsTable.resizeRowsByTallestCell([1, 3]);
         });
         document.querySelector(".resize-viewport").addEventListener("click", () => {
-            this.formatsTable.resizeRowsByTallestCells();
+            this.formatsTable.resizeRowsByTallestCell();
         });
     }
 

packages/table/src/table.tsx

@@ -490,33 +490,30 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {
     }
 
     /**
-     * Resize rows based on a given set of column indices.
-     * If no indices are provided, default to using the columns that are currently in the viewport.
+     * Resize all rows in the table to the height of the tallest visible cell in the specified columns.
+     * If no indices are provided, default to using the tallest visible cell from all columns in view.
      */
-    public resizeRowsByTallestCells(columnIndices?: number[]) {
+    public resizeRowsByTallestCell(columnIndices?: number | number[]) {
         const { locator } = this.state;
         let tallest = 0;
-        if (columnIndices != null) {
-            const tallestByColumns = columnIndices.map((col) => locator.getTallestVisibleCellInColumn(col));
-            tallest = Math.max(...tallestByColumns);
-        } else {
-            // Use viewport columns
+        if (columnIndices == null) {
+            // Consider all columns currently in viewport
             const { grid } = this;
             const { viewportRect } = this.state;
             const viewportColumnIndices = grid.getColumnIndicesInRect(viewportRect);
             for (let col = viewportColumnIndices.columnIndexStart; col <= viewportColumnIndices.columnIndexEnd; col++) {
                 tallest = Math.max(tallest, locator.getTallestVisibleCellInColumn(col));
             }
+        } else {
+            const columnIndicesArray = Array.isArray(columnIndices) ? columnIndices : [columnIndices];
+            const tallestByColumns = columnIndicesArray.map((col) => locator.getTallestVisibleCellInColumn(col));
+            tallest = Math.max(...tallestByColumns);
         }
         const rowHeights = Array(this.state.rowHeights.length).fill(tallest);
         this.invalidateGrid();
         this.setState({ rowHeights });
     }
 
-    public resizeRowsByTallestCell(columnIndex: number) {
-        this.resizeRowsByTallestCells([columnIndex]);
-    }
-
     /**
      * When the component mounts, the HTML Element refs will be available, so
      * we constructor the Locator, which queries the elements' bounding

packages/table/test/tableTests.tsx

@@ -129,15 +129,15 @@ describe("<Table>", () => {
         expect(table.state.rowHeights[0]).to.equal(DEFAULT_RESIZE_HEIGHT);
 
         // Resize by both columns
-        table.resizeRowsByTallestCells([0, 1]);
+        table.resizeRowsByTallestCell([0, 1]);
         expect(table.state.rowHeights[0]).to.equal(MAX_HEIGHT);
 
         // Resize by second column via array
-        table.resizeRowsByTallestCells([1]);
+        table.resizeRowsByTallestCell([1]);
         expect(table.state.rowHeights[0]).to.equal(DEFAULT_RESIZE_HEIGHT);
 
         // Resize by visible columns
-        table.resizeRowsByTallestCells();
+        table.resizeRowsByTallestCell();
         expect(table.state.rowHeights[0]).to.equal(MAX_HEIGHT);
     });