Column Sizing
All columns can be resized by dragging the top right portion of the column.
Enable Sizing
Turn column resizing on for the grid by setting resizable=true
for each column.
To set resizing for each column, set resizable=true
on the
default column definition.
The snippet below allows all columns except Address to be resized by explicitly setting each column.
The snippet below allows all columns except Address to be resized by setting resizable=true
on the default column definition and then resizable=false
on the Address column.
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.
Auto-Size Columns
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 suppressColumnVirtualisation=true
.
So choice is yours - what do you want - column virtualisation working OR auto-size working on off screen columns.
autoSizeColumns(skipHeaders)
can receive true
as parameter to indicate that
the header content (headerName) should not be considered when calculating the width of the column. You can also set this behavior to be
the default by setting skipHeaderOnAutoSize: true
in the gridOptions
.
Resizing Example
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
api.sizeColumnsToFit()
- The button 'Auto-Size All' calls
columnApi.autoSizeColumns([columnIds])
- The button 'Auto-Size All (Skip Header)' calls
columnApi.autoSizeColumns([columnIds], true)
- The first column is fixed with (ie
suppressSizeToFit = true
), which means its size does not change whensizeColumnsToFit
is called. - 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
with 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 gridReady
event.
Note that 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 api.sizeColumnsToFit()
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.
Column Flex
It's often required that one or more columns fill the entire available space in
the grid. For this scenario, it is possible to use the flex
config.
Some columns could be set with a regular width
config, while other
columns would have a flex config.
Flex sizing works by dividing the remaining space in the grid among all flex columns in proportion to
their flex value. For example, suppose the grid has a total width of 450px and it has three columns:
the first with width: 150
; the second with flex: 1
; and third
with flex: 2
. The first column will be 150px wide, leaving 300px remaining. The column with flex: 2
has twice the size with flex: 1
. So final sizes will be: 100px, 100px, 200px.
width
config
in same column. If you need to provide a minimum width for a column.
You should use flex and the minWidth
config. Flex will also take maxWidth
into account.
The example below shows flex in action. Things to note are as follows:
- Column A is fixed size. You can resize it with the drag handle and the other two columns will adjust to fill the available space
- Columns B has
flex: 2
,minWidth: 200
andmaxWidth: 350
, so it should be constrained to this max/min width. - Column C has
flex: 1
so should be half the size of column B, unless column B is being constrained by its minWidth/maxWidth rules, in which case it should take up the remaining available space.
Shift Resizing
If you hold 'shift' while dragging the resize handle, the column will take space away from the column adjacent to it. This means the total width for all columns will be constant.
You can also change the default behaviour for resizing. Set grid property
colResizeDefault='shift'
to have shift resizing as default and
normal resizing to happen when shift key is pressed.
In the example below, note the following:
-
Grid property
colResizeDefault='shift'
so default column resizing will behave as if shift key is pressed. - Holding down shift will then resize the normal default way.
Resizing Groups
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
have
resizable=false
. - The group 'Nothing Resizes' cannot be resized at all because all the columns
in the groups have
resizable=false
.
Resizing Columns When Data Is Renderered
There are two scenarios main where scenarios where you might want to resize columns based on grid data:
- Row Data is available at grid initialisation
- Row Data is available after grid initialisation, typically after data has been set asynchronously via a server call
In the first case you can fire autoSizeColumns()
in either the gridReady
or the
firstDataRendered
event as the row data will have been rendered by the time the grid is ready.
In the second case however you can only reliably use firstDataRendered
as the row data will be made available,
and hence rendered, after the grid is ready.