All columns can be resized by dragging the top right portion of the column.
Turn column resizing on for the grid by enabling resizing in the grid options.
If you wish only some columns to be resizable, enable resizing for the grid,
then suppress resizing for the particular column by setting
on the column definition.
Size Columns to Fit
Call api.sizeColumnsToFit() to make the currently visible columns fit the screen. The columns will scale (growing or shrinking) to fit the available width.
If you don't want a particular column to be included in the auto resize, then
set the column definition
suppressSizeToFit=true. This is helpful
if, for example, you want the first column to remain fixed with, but all other
columns to fill the width of the table.
Just like Excel, each column can be 'auto resized' by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column.
autoSizeColumns() looks at the rendered cells on the screen, and works out the width based on what it sees.
It cannot see the columns that are not rendered due to column virtualisation. Thus it is not possible to autosize
a column that is not visible on the screen.
Column Virtualisation is the technique the grid uses to render large amounts of columns with degrading performance by only rendering columns that are visible due to the horizontal scroll positions. Eg the grid can have 1000 columns with only 10 rendered if the horizontal scroll is only showing 10 columns.
To get around this, you can turn off column virtualisation by setting grid property
So choice is yours - what do you want - column virtualisation working OR auto-size working on off screen columns.
The example below shows resizing in action. Things to note are as follows:
- Each column can be resized by dragging (or double clicking or auto resize) the right side of its header.
- The button 'Size to Fit' calls
- The button 'Auto-Size All' calls
- The first column is fixed with (ie
suppressSizeToFit = true), which means its size does not change when
- The 'age' column has both a min and max size set, so resizing the column will be restricted by these, regardless of dragging the header or using on of the API buttons.
In the example below, Also of note
is the second column, which has both a min and max size set, which is also respected
sizeColumnsToFit. The remaining columns will spread to fill the remaining space
after you press the button.
Sizing Columns By Default
It is possible to have the grid auto size the columns to fill the width by default. Do
this by calling
api.sizeColumnsToFit() on the
api.sizeColumnsToFit() needs to know the grid width in order to do its
maths. If the grid is not attached to the DOM, then this will be unknown. In the example
below, the grid is not attached to the DOM when it is created (and hence
should fail). The grid checks again after 100ms, and tries to resize again. This is needed
for some frameworks (eg Angular) as DOM objects are used before getting attached.
When you resize a group, it will distribute the extra room to all columns in the group equally. The example below the groups can be resizes as follows:
- The group 'Everything Resizes' will resize all columns.
- The group 'Only Year Resizes' will resize only year, because the other columns
- The group 'Nothing Resizes' cannot be resized at all because all the columns
in the groups have