Customising Compactness and Row Height

Add more white space or pack more data into the UI.

• --ag-grid-size is the main control for affecting how tightly data and UI elements are packed together. It should be
  a value in pixels. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will
  make most components larger by increasing their internal white space while leaving the size of text and icons
  unchanged.
• --ag-row-height sets the height of a grid row. It often needs fine-tuning when the --ag-grid-size is changed.
  See Key compactness variables for other
  variables depending on --ag-grid-size that may also need fine-tuning.

Here is a simple example setting:

.ag-theme-alpine.compact {
    --ag-grid-size: 3px;
}

This CSS class must be added to any *.css file in the assets folder
(See Loading CSS files for more
information).

Customising Row and Header Heights

If you have made any customisations that affect the height of the header or individual rows - in particular setting the
--ag-row-height, --ag-header-height or --ag-grid-size variables - then you need to understand the effect your
change has on the grid’s virtualised layout.

The grid
uses DOM virtualisation for
rendering large amounts of data, which means that it needs to know the size of various elements like columns and grid
rows in order to calculate their layout. The grid uses several strategies to work out the right size:

• Firstly, the grid will attempt to measure the size of an element. This works when styles have loaded, but will not
  work if the grid initialises before the theme loads.
• If CSS has not loaded and one of the provided themes is in use, the grid contains hard-coded fallback values for these
  themes. For this reason we recommend that if you are extending a provided theme like ag-theme-alpine and have not
  changed the row and header heights, you keep the same theme name so that the grid knows what fallback sizes to apply.
• If neither of the above methods will work for your app (you do not want to delay app initialisation until after CSS
  has loaded, and are not using a provided theme with heights unchanged) then you should inform the grid about your
  custom element heights
  using grid properties. The
  minimal set of properties you need to set to ensure correct functioning are: rowHeight, headerHeight
  and minWidth.

Changing Row and Header Heights at Runtime

The grid performs its measurement of elements as described above when it starts up, and it caches the calculated values
internally, so it won’t have to recalculate the size of rows and headers while the Grid is scrolled. To force the grid
to refresh this cache, you should simply change the CSS class applied to the Grid element as shown in the example below:

The following example shows the behavior of the grid setting --ag-grid-size to different values.

It is also possible to adapt:

• the font size using --ag-font-size
• the column width using the Grid Parameter columnSize="autoSize"

This example uses the following CSS classes:

.ag-theme-alpine.large {
    --ag-grid-size: 10px;
}

.ag-theme-alpine.compact {
    --ag-grid-size: 3px;
}

.ag-theme-alpine.large.font {
    --ag-font-size: 32px;
}

.ag-theme-alpine.compact.font {
    --ag-font-size: 10px;
}

These CSS classes must be added to any *.css file in the assets folder
(See Loading CSS files for more
information).

Key compactness variables

The following variables are all defined as multiples of --ag-grid-size, if you’ve updated the grid size and you may
want to update them to fine-tuning the compactness:

<br>