Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

Github stars make projects look great. Please help, donate a star, it's free.
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 it's 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.