Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Data GridCustomising 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 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:

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 length (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 length (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 length (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 length (e.g. `0`, `4px` or `50%`)
The vertical spacing between widgets in containers that contain vertically stacked widgets
--ag-cell-horizontal-padding
CSS length (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 length (e.g. `0`, `4px` or `50%`)
Height of grid rows
--ag-list-item-height
CSS length (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 length (e.g. `0`, `4px` or `50%`)
How much to indent child columns in the column tool panel relative to their parent
--ag-set-filter-indent-size
CSS length (e.g. `0`, `4px` or `50%`)
How much to indent child filter items in the Set Filter List relative to their parent