Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Customising Compactness & 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.
  • --ag-list-item-height controls the height of items in UI scrolling lists such as the columns in the columns tool panel below. Like the row height you often need to update it after changing --ag-grid-size.
.ag-theme-alpine {
    --ag-grid-size: 3px;
    --ag-list-item-height: 20px;
}
.ag-theme-alpine {
    --ag-grid-size: 10px;
    --ag-list-item-height: 40px;
}

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:

  1. 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. Our theme customisation examples demonstrate how to wait for CSS to load before initialising the grid (see the cssHasLoaded function).
  2. 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.
  3. 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. This means that if you change the size of grid rows after initialisation - either by setting a CSS variable like --ag-grid-size or by changing the theme - you need to reinitialise the grid.

You can do this by changing the key property of the <AgGridReact> element, which will cause it to be unmounted and re-mounted, destroying the old grid and creating a new one.

Key compactness variables

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

--ag-widget-container-horizontal-padding
CSS size (e.g. `0`, `4px` or `50%`)
The horizontal padding of containers that contain stacked widgets, such as menus and tool panels
--ag-widget-container-vertical-padding
CSS size (e.g. `0`, `4px` or `50%`)
The vertical padding of containers that contain stacked widgets, such as menus and tool panels
--ag-widget-horizontal-spacing
CSS size (e.g. `0`, `4px` or `50%`)
The horizontal spacing between widgets in containers that contain horizontally stacked widgets such as the column groups header component.
--ag-widget-vertical-spacing
CSS size (e.g. `0`, `4px` or `50%`)
The vertical spacing between widgets in containers that contain vertically stacked widgets
--ag-cell-horizontal-padding
CSS size (e.g. `0`, `4px` or `50%`)
Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height
--ag-row-height
CSS size (e.g. `0`, `4px` or `50%`)
Height of grid rows
--ag-list-item-height
CSS size (e.g. `0`, `4px` or `50%`)
Height of items in lists (example of lists are dropdown select inputs and column menu set filters)
--ag-column-select-indent-size
CSS size (e.g. `0`, `4px` or `50%`)
How much to indent child columns in the column tool panel relative to their parent