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
The horizontal padding of containers that contain stacked widgets, such as menus and tool panels |
The vertical padding of containers that contain stacked widgets, such as menus and tool panels |
The horizontal spacing between widgets in containers that contain horizontally stacked widgets such as the column groups header component. |
The vertical spacing between widgets in containers that contain vertically stacked widgets |
Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height |
Height of grid rows |
Height of header rows |
Height of items in lists (example of lists are dropdown select inputs and column menu set filters) |
How much to indent child columns in the column tool panel relative to their parent |
How much to indent child filter items in the Set Filter List relative to their parent |
How much to indent child filter items in the Advanced Filter Builder relative to their parent |
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.