[Table] Add resizeRowsByTallestCells to handle multi-column resize

packages/table/preview/index.html

@@ -66,6 +66,8 @@ <h4>Column Type Formats</h4>
   <div class="resize-default pt-button pt-intent-success">Resize Default</div>
   <div class="resize-wrapped pt-button pt-intent-success">Resize Wrapped Text</div>
   <div class="resize-json-wrapped pt-button pt-intent-success">Resize Json Wrapped Text</div>
+  <div class="resize-wrapped-and-json pt-button pt-intent-success">Resize Wrapped and Json Text</div>
+  <div class="resize-viewport pt-button pt-intent-success">Resize Viewport</div>
   <br /><br />
 
   <h4>Editable Column Names and Cells</h4>

packages/table/preview/index.tsx

@@ -139,6 +139,12 @@ class FormatsTable extends React.Component<{}, {}> {
         document.querySelector(".resize-json-wrapped").addEventListener("click", () => {
             this.formatsTable.resizeRowsByTallestCell(3);
         });
+        document.querySelector(".resize-wrapped-and-json").addEventListener("click", () => {
+            this.formatsTable.resizeRowsByTallestCell([1, 3]);
+        });
+        document.querySelector(".resize-viewport").addEventListener("click", () => {
+            this.formatsTable.resizeRowsByTallestCell();
+        });
     }
 
     private renderDefaultCell = (row: number) => <Cell>{this.strings[row]}</Cell>;

packages/table/src/table.tsx

@@ -489,10 +489,26 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {
         );
     }
 
-    public resizeRowsByTallestCell(columnIndex: number) {
+    /**
+     * 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 cell from all columns currently in view.
+     */
+    public resizeRowsByTallestCell(columnIndices?: number | number[]) {
         const { locator } = this.state;
-
-        const tallest = locator.getTallestVisibleCellInColumn(columnIndex);
+        let tallest = 0;
+        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 });

packages/table/test/tableTests.tsx

@@ -103,22 +103,42 @@ describe("<Table>", () => {
         rowHeaders.forEach((rowHeader) => expectCellLoading(rowHeader, CellType.ROW_HEADER));
     });
 
-    it("Gets and sets the tallest cell height in the table", () => {
-        const renderCell = () => <Cell wrapText={true}>my cell value with lots and lots of words</Cell>;
+    it("Gets and sets the tallest cell by columns correctly", () => {
+        const DEFAULT_RESIZE_HEIGHT = 30;
+        const MAX_HEIGHT = 40;
+        const renderCellLong = () => <Cell wrapText={true}>my cell value with lots and lots of words</Cell>;
+        const renderCellShort = () => <Cell wrapText={false}>short value</Cell>;
 
         let table: Table;
 
         const saveTable = (t: Table) => table = t;
 
         harness.mount(
             <Table ref={saveTable} numRows={4}>
-                <Column name="Column0" renderCell={renderCell} />
-                <Column name="Column1" renderCell={renderCell} />
+                <Column name="Column0" renderCell={renderCellLong} />
+                <Column name="Column1" renderCell={renderCellShort} />
             </Table>,
         );
 
+        // Resize by first column
         table.resizeRowsByTallestCell(0);
-        expect(table.state.rowHeights[0]).to.equal(40);
+        expect(table.state.rowHeights[0]).to.equal(MAX_HEIGHT);
+
+        // Resize by second column
+        table.resizeRowsByTallestCell(1);
+        expect(table.state.rowHeights[0]).to.equal(DEFAULT_RESIZE_HEIGHT);
+
+        // Resize by both columns
+        table.resizeRowsByTallestCell([0, 1]);
+        expect(table.state.rowHeights[0]).to.equal(MAX_HEIGHT);
+
+        // Resize by second column via array
+        table.resizeRowsByTallestCell([1]);
+        expect(table.state.rowHeights[0]).to.equal(DEFAULT_RESIZE_HEIGHT);
+
+        // Resize by visible columns
+        table.resizeRowsByTallestCell();
+        expect(table.state.rowHeights[0]).to.equal(MAX_HEIGHT);
     });
 
     it("Selects all on click of upper-left corner", () => {