Vue Data Grid

Row Height

vue logo

By default, the row height in the grid is based on the theme (42px for Quartz). You can change this for each row individually to give each row a different height.

You cannot use variable row height when using either the Viewport Row Model or Infinite Row Model. This is because this row model needs to work out the position of rows that are not loaded and hence needs to assume the row height is fixed.

rowHeight Property

To change the row height for the whole grid, set the property rowHeight to a positive number. For example, to set the height to 50px, do the following:

<ag-grid-vue
    :rowHeight="rowHeight"
    /* other grid options ... */>
</ag-grid-vue>

this.rowHeight = 50;

Changing the property will set a new row height for all rows, including pinned rows top and bottom.

getRowHeight Callback