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 with pixel units e.g. 8px. 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-theme-quartz {
--ag-grid-size: 3px; /* very compact */
}
After grid size, the most common variables to change are:
--ag-row-heightand--ag-header-heightset the height of rows and headers.--ag-list-item-heightsets the height of items in lists of values, such as the rich select editor and set filter.
In the following example, classes are applied to the grid container that change compactness dynamically:
Full list of compactness variables
Using CSS rules to customise compactness
The grid contains thousands of elements. Most of them respond to --ag-grid-size but many of them don't have their own specific variables to customise size. For all elements except rows, headers and list items (see note below), you can set their height, margin or paddings using CSS rules that target a class name, e.g.
/* set the height of text inputs */
.ag-theme-quartz .ag-text-field-input {
height: 30px;
}
Setting the height of rows, headers and list items
To change the height of rows, headers and list item heights, you must use the provided CSS variables (--ag-row-height, --ag-header-height and --ag-list-item-height). The grid uses DOM virtualisation for rendering large amounts of data, and needs to know the height of virtualised elements in order to calculate their layout. It does this by measuring the values of CSS variables such as --ag-row-height.
Using CSS to set a height on a row element itself e.g. .ag-row { height: 50px; } is not supported.