Grid Size

Under normal usage, your application should set the width and height of the grid using CSS styles. The grid will
then fit the width you provide and use scrolling inside the grid to allow all rows and columns to be viewed.

In Dash, the grid has a default size, set with style={"height": 400, "width": "100%"}. Unless you want to change
this, you do not need to include the style prop when you define the grid.

Changing Width and Height

These snippets show different ways to set the size of the grid:

# Set px size
dag.AgGrid(
    style={"height": 600, "width": 400}
)

# set % size
dag.agGrid(
    style={"height": "100%", "width": "100%"}
)

Note on Using Percent Width & Height

When using a percentage value for the height of your grid, ensure that the container element enclosing the grid also
has a specified height. This is important because the browser calculates the grid’s height as a percentage of its
parent’s height. If the parent element does not have a specified height, the percentage value will result in a height
of zero for the grid.

If your grid is not the size you think it should be, 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 in your
application. If the width and / or height change after the grid is initialized, the grid will automatically resize to
fill the new area.

The following example shows two different Grid Size that can be switched with the buttons.

• The Default Size button shows style={"height": 400, "width": "100%"}
• The Change Size button shows style={"height": 600, "width": 400}

DOM Layout

There are three DOM Layout values the grid can have ‘normal’, ‘autoHeight’ and ‘print’. They are used as follows:

• ‘normal’: This is the default if nothing is specified. The grid fits the width and height of the div you provide
  and
  scrolls in both directions.
• ‘autoHeight’: The grid’s height is set to fit the number of rows so no vertical scrollbar is provided by the grid.
  The grid scrolls horizontally as normal. Note that if using this with the SSRM the grid will attempt to load every row
  and may cause undesired side effects (such as excessive datasource requests or too many loaded rows).
• ‘print’: No scroll bars are used and the grid renders all rows and columns. This layout is explained
  in Printing.

Grid Auto Height

Depending on your scenario, you may wish for the grid to auto-size its height to the number of rows displayed inside the
grid. This is useful if you have relatively few rows and don’t want empty space between the last row and the bottom of
the grid.

To allow the grid to auto-size its height to fit rows, set the Grid Option {"domLayout": "autoHeight"}.

Moreover, in order for autoHeight to work correctly with grids taller than the default of 400px, it’s necessary to
remove the default height, or the grid will overflow and can hide other elements on the page.

So the following Grid Parameters have to be set:

dashGridOptions = {"domLayout": "autoHeight"},
style = {"height": None}

The example below demonstrates the autoHeight feature. Note the following when using autoHeight:

• As you set different numbers of rows into the grid, the grid will resize its 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.
• 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.

When using Auto Height, there is a minimum of 150px set to the grid rows section. This is to avoid an empty grid which
would look weird. To remove this minimum height, add the following CSS:

.ag-center-cols-clipper {
    min-height: unset !important;
}

Don’t use Grid Auto Height when displaying large numbers of rows

If using Grid Auto Height, then the grid will render all rows into the DOM. This is different to normal operation
where the grid will only render rows that are visible inside the grid’s scrollable viewport. For large grids
(like +1,000 rows), the draw time of the grid will be slow, or for very large grids, your application can freeze. This
is not a problem with the grid, but is a limitation on browsers on how much data they can easily display on one web
page. For this reason, if showing large amounts of data, it is not advisable to use Grid Auto Height. Instead, use the
grid as normal and the grid’s row virtualization will take care of this problem for you.