In the following example, after clicking the button, note the following: These widths will not exceed the column's defined minimum and maximum widths.įor example assuming a grid with three Columns, the algorithm will be as follows:Īssuming the grid is 1,200 pixels wide and the Columns have default widths of 40, 120 and 300,ĪvailableWidth = 1,198 (available width is typically smaller as the grid typically has left and right boarders) The function can receive a parameters object with minimum and maximum widths, either for all columns or for specific columns, to further restrain the columns resulting width from that function call. The result is deterministic and not depend on any Column resizing the user may have manually done. Will still be twice the size of Column B, assuming no Column min-width or max-width constraints are violated.Ĭolumn default widths, rather than current widths, are used while calculating the new widths. If Column A has a default size twice as wide as Column B, then after calling api.sizeColumnsToFit() Column A
The grid calculates new column widths while maintaining the ratio of the column default widths. This is helpful if, for example, you want the first column to remain fixed width, but all other columns to fill the width of the table. If you don't want a particular column to be included in the auto resize, then set the column definition suppressSizeToFit=true. The columns will scale (growing or shrinking) to fit the available width. const gridOptions = Size Columns to FitĬall the Grid Api api.sizeColumnsToFit(params) to make the currently visible columns fit the screen. The snippet below allows all columns except Address to be resized by explicitly setting each column. To set resizing for each column, set resizable=true on the default column definition. Turn column resizing on for the grid by setting resizable=true for each column. All columns can be resized by dragging the top right portion of the column.