Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

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

Grid Size

The grid width and height should be set using CSS width and height styles. This can be done using pixels or percentages.

// set width using percentages <div id="myGrid" class="ag-fresh" style="width: 100%; height: 100%;"></div> // OR set width using fixed pixels <div id="myGrid" class="ag-fresh" style="width: 500px; height: 200px;"></div>

Pitfall When Using Percent Width & Height

If using % for your height, then make sure the container you are putting the grid into also has height specified, as the browser will fit the div according to a percentage of the parents height, and if the parent has no height, then this % will always be zero. If your grid is not using all the space you think it should, then put a border on the grid's div and see if that's the size you want (the grid will fill this div). If it is not the size you want, then you have a CSS layout issue to solve outside of the grid.

Changing Width and Height

If the width and / or height change after the grid is initialised, the grid will automatically resize to fill the new area.

There is no JavaScript event for when an element changes size (there is a window resized event, but no element resized) so the grid checks its size every 500ms. If your application changes the size of the grid, you can get the grid to resize immediatly (rather than wait for the next 500ms check) by calling api.doLayout().

Example: Setting and Changing Grid Width and Height

The example below shows setting the grid size and then changing it as the user selects the buttons. Notice that the example calls api.doLayout() after the resize to avoid a flicker.

DOM Layout

The property domLayout changes how the grid is laid into the DOM. By default the grid will have horizontal and vertical scrolls which will meet your needs 95 of the time. So don't set the domLayout property unless you want one of the following:

  • Auto Height: Auto height (explained below) allows the grid to resize based on the number of rows so that there is no vertical scrolls. Use this if you have relatively few rows in your grid and want to pack them into your web-page (so that there is no blank space in the grid after the last row).
  • For Print: For print will have no scrolls, very bad for performance (as a large grid will create a lot of DOM) however ideal if you want to print the grid, as it will remove all scrolls and pinned areas, so that every element is rendered into the DOM.

Auto Height Grid

Most applications will give the grid a fixed height and then the grid will provide vertical scrolls to navigate through the rows. This is the best way to view large data sets, as it allows the grid to only render rows that are currently visible on the screen. For example if you can only see 20 rows, then the grid will only render 20 rows, and as you scroll down, rows will be removed and new rows drawn.

Some applications will want to render all the rows in the grid and not use and scrolls inside the grid. This will give bad performance if many rows (ie if you render 10,000 rows into the DOM, your browser will probably crash!), however for 10 or 20 rows, this may be preferred.

To have the grid auto-size to fit the provided rows, set the property domLayout='autoHeight'

The example below demonstrates the autoHeight feature. Notice the following:

  • As you set different numbers of rows into the grid, the grid will resize it's height to just fit the rows.
  • As the grid height exceeds the height of the browser, you will need to use the browser vertical scroll to view data (or the iFrames scroll if you are looking at the example embedded below).
  • The height will also adjust as you filter, to add and remove rows.
  • If you have pinned rows, the grid will size to accommodate the pinned rows.
  • Vertical scrolling will not happen, however horizontal scrolling, including pinned columns, will work as normal.

The following test is best viewed if you open it in a new tab, so it is obvious that there are no scroll bars. Note that if you use the example inlined the scroll bars shown are for the containing iframe, not the grid.

Animation with Auto Height

The autoHeight will do a complete refresh of the grid rows after any sort, filter or row group open / close. This also means row animation will not work with autoHeight. This is because the autoHeight feature just places the rows into the DOM and lets the browser lay them out naturally. Under normal operation (when not using autoHeight) the grid explicitly positions the rows using top pixel location - which is needed for the animations to work.

Full Width and Auto Height

The fullWidth feature, when used with autoHeight, will always embed the full width rows. This means if using fullWidth, the fullWidth rows will scroll horizontally with the other rows and if pinning, the fullWidth row will be split into the pinned sections.

Max Height with Auto Height

It is not possible to specify a max height when using auto-height. It is also not possible to change the layout once the grid has initialised.

Users ask on the forum, is it possible to set a max height when using auto-height? The answer is no. If using auto-height, the grid is set up to work in a different way. It is not possible to switch. If you do need to switch, you will need to change to a new instance of the grid.

Max Rows in Grid

Browsers have a maximum height on divs that puts a hard limit on the number of rows that can be displayed. In Internet Explorer, this limit can be observed limiting the rows to 65,000 rows when on the main demo.

Currently ag-Grid has no way to extending this limit to allow viewing more rows simultaneously. However this is not a problem 99.99% of the time (the only people who this appears to be a problem with is system testers!!).

The reason this is not a problem is that normal human users don't scroll through tens of thousands of rows. Instead the grid will happily take the rows and then the user will use group / filter / sort to get to the data that they want.