Vue 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 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-height and --ag-header-height set the height of rows and headers.
  • --ag-list-item-height sets 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

--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-header-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of header 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
--ag-advanced-filter-builder-indent-size
CSS length (e.g. `0`, `4px` or `50%`)
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.