Try ag-Grid Enterprise for Free

Framework

Expand All

  Getting Started

  Javascript    Getting Started    More Details  ReactJS    Getting Started    More Details  Angular 2.x/4.x    Getting Started    More Details    Building  AngularJS 1.x  VueJS  Aurelia  Web Components  TypeScript

  Interfacing

OverviewPropertiesColumnsEventsCallbacksGrid APIColumn API

  Features

OverviewGrid SizeSortingColumn Filter  Text Filter  Number Filter  Date Filter   Set Filter  Custom FilterQuick FilterExternal FilterSelection Range SelectionColumn ResizingColumn PinningColumn HeaderGrouping ColumnsTree DataRow HeightFloating RowsValue GettersCell ExpressionsCell StylingCell EditingPaginationContextAccessing DataData UpdateView RefreshAnimationKeyboard NavigationInternationalisationFull Width RowsMaster DetailMaster / SlaveTouchCSV Export Excel ExportRTLIconsOverlaysFor Print Data Functions   Grouping Rows   Aggregation   Pivoting Tool Panel Clipboard Column Menu Context Menu Status Bar License Key

  Row Models

OverviewRow NodeIn MemoryInfinite Scrolling Viewport Enterprise

  Themes

OverviewFresh ThemeBlue ThemeDark ThemeMaterial ThemeBootstrap Theme

  Components

OverviewDate ComponentCell RendererCell EditorFilter ComponentFloating Filter ComponentHeader Component

  Examples

ag-Grid Examples   React Examples    Rich Grid    Cell Renderers    Editor Component    Filter Component    Floating Rows    Full Width Rows    Group Rows    Master/Detail    Redux Examples   Angular Examples    Rich Grid    Grid via Markup    Cell Renderers    Editor Component    Filter Component    Floating Rows    Full Width Rows    Group Rows    Master/Detail    Third Party  Styled Report  File Browser  Expressions  Gallery

  Third Party

Overview  OpenFin  Graphing

Misc

Change LogRoadmapTutorialsResponsive DesignTesting Archive Docs
Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Column Resizing

All columns can be resized by dragging the top right portion of the column.

Enable Resizing

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 suppressResize=true 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.

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.

The grid works out the best width by considering the virtually rendered rows only. For example, if your grid has 10,000 rows, but only 50 rendered due to virtualisation of rows, then only these 50 will be considered for working out the width to display. The rendered rows are all the rows you can see on the screen through the horizontal scroll plus a small buffer (default buffer size is 20).

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.

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 it's header.
  • The button 'Size to Fit' calls api.sizeColumnsToFit()
  • The button 'Auto-Size All' calls columnApi.autoSizeColumns()
  • The first column is fixed with (ie suppressSizeToFit = true), which means it's size does not change when sizeColumnsToFit 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 it's 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.sizeColumnsToFix() 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.