---
title: "Row Height"
framework: vue
version: "36.1.0"
---

# Row Height

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.

> **Note**
>
> You cannot use variable row height when using either the [Viewport Row Model](https://www.ag-grid.com/vue-data-grid/viewport/) or [Infinite Row Model](https://www.ag-grid.com/vue-data-grid/infinite-scrolling/). This is because these row models need to work out the position of rows that are not loaded and hence need 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:

```ts
<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](https://www.ag-grid.com/vue-data-grid/row-pinning/).

## getRowHeight Callback

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getRowHeight` | `GetRowHeight` |  |  | Callback version of property `rowHeight` to set height for each row individually. Function should return a positive number of pixels, or return `null`/`undefined` to use the default row height. |

To change the row height so that each row can have a different height, implement the `getRowHeight(params)` callback. For example, to set the height to 50px for all group rows and 20px for all other rows, do the following:

```ts
<ag-grid-vue
    :getRowHeight="getRowHeight"
    /* other grid options ... */>
</ag-grid-vue>

this.getRowHeight = params => params.node.group ? 50 : 20;
```

The example below shows dynamic row height, specifying a different row height for each row. It uses the `getRowHeight(params)` callback to achieve this.

#### Row Height Simple

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowHeight,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowHeightParams,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :getRowHeight="getRowHeight"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "rowHeight" },
      { field: "athlete" },
      { field: "age", width: 80 },
      { field: "country" },
      { field: "year", width: 90 },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 150,
      filter: true,
    });
    const rowData = ref<any[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        const differentHeights = [40, 80, 120, 200];
        data.forEach(function (dataItem: any, index: number) {
          dataItem.rowHeight = differentHeights[index % 4];
        });
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };
    const getRowHeight: (
      params: RowHeightParams,
    ) => number | undefined | null = (params: RowHeightParams) => {
      return params.data.rowHeight;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      getRowHeight,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Row Height Simple](https://www.ag-grid.com/examples/row-height/row-height-simple/vue3)

## Changing Row Height

Setting the row height is done once for each row. Once set, the grid will not ask you for the row height again. You can change the row height after it is initially set using a combination of `api.resetRowHeights()`, `rowNode.setRowHeight(height)` and `api.onRowHeightChanged()`.

### api.resetRowHeights()

Call this API to have the grid clear all the row heights and work them all out again from scratch - if you provide a `getRowHeight(params)` callback, it will be called again for each row. The grid will then resize and reposition all rows again.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `resetRowHeights` | `Function` |  |  | Tells the grid to recalculate the row heights. Modules (any of): [`ClientSideRowModelApiModule`](https://www.ag-grid.com/vue-data-grid/modules/), [`ServerSideRowModelApiModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

### rowNode.setRowHeight(height) and api.onRowHeightChanged()

You can call `rowNode.setRowHeight(height)` directly on the row node to set its height. The grid will resize the row but will NOT reposition the rows (i.e. if you make a row shorter, a space will appear between it and the next row - the next row will not be moved up). When you have set the row height (potentially on many rows) you need to call `api.onRowHeightChanged()` to tell the grid to reposition the rows. It is intended that you can call `rowNode.setRowHeight(height)` many times and then call `api.onRowHeightChanged()` once at the end.

When calling `rowNode.setRowHeight(height)`, you can either pass in a new height, or `null` or `undefined`. If you pass a height, that height will be used for the row. If you pass in `null` or `undefined`, the grid will then calculate the row height in the usual way, either using the provided `rowHeight` property or `getRowHeight(params)` callback.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `setRowHeight` | `Function` |  |  | Sets the row height. Call if you want to change the height initially assigned to the row. After calling, you must call `api.onRowHeightChanged()` so the grid knows it needs to work out the placement of the rows. |

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onRowHeightChanged` | `Function` |  |  | Tells the grid a row height has changed. To be used after calling `rowNode.setRowHeight(newHeight)`. |

### Example: Changing Row Height

The example below changes the row height in the different ways described above.

- **Top Level Groups:** The row height for the groups is changed by calling `api.resetRowHeights()`. This gets the grid to call `gridOptions.getRowHeight(params)` again for each row.
- **Swimming Leaf Rows:** Same technique is used here as above. You will need to expand a group with swimming (e.g. United States) and the grid works out all row heights again.
- **United States Leaf Rows:** The row height is set directly on the row node, and then the grid is told to reposition all rows again by calling `api.onRowHeightChanged()`.

Note that this example uses AG Grid Enterprise as it uses grouping. Setting the row height is an AG Grid Community feature; we just demonstrate it against groups and normal rows below.

#### Changing Row Height

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowHeight,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowApiModule,
  RowHeightParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  RowApiModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let swimmingHeight: number;

let groupHeight: number;

let usaHeight: number;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div style="margin-bottom: 5px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 13px">
        <div>
          Top Level Groups:
          <button v-on:click="setGroupHeight(42)">42px</button>
          <button v-on:click="setGroupHeight(75)">75px</button>
          <button v-on:click="setGroupHeight(125)">125px</button>
        </div>
        <div style="margin-top: 5px">
          Swimming Leaf Rows:
          <button v-on:click="setSwimmingHeight(42)">42px</button>
          <button v-on:click="setSwimmingHeight(75)">75px</button>
          <button v-on:click="setSwimmingHeight(125)">125px</button>
        </div>
        <div style="margin-top: 5px">
          United States Leaf Rows:
          <button v-on:click="setUsaHeight(42)">42px</button>
          <button v-on:click="setUsaHeight(75)">75px</button>
          <button v-on:click="setUsaHeight(125)">125px</button>
        </div>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :groupDefaultExpanded="groupDefaultExpanded"
        :getRowHeight="getRowHeight"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true },
      { field: "athlete" },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const rowData = ref<IOlympicData[] | null>(getData());
    const groupDefaultExpanded = ref(1);

    function setSwimmingHeight(height: number) {
      swimmingHeight = height;
      gridApi.value!.resetRowHeights();
    }
    function setGroupHeight(height: number) {
      groupHeight = height;
      gridApi.value!.resetRowHeights();
    }
    function setUsaHeight(height: number) {
      // this is used next time resetRowHeights is called
      usaHeight = height;
      gridApi.value!.forEachNode(function (rowNode) {
        if (rowNode.data && rowNode.data.country === "United States") {
          rowNode.setRowHeight(height);
        }
      });
      gridApi.value!.onRowHeightChanged();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };
    const getRowHeight: (
      params: RowHeightParams<IOlympicData>,
    ) => number | undefined | null = (
      params: RowHeightParams<IOlympicData>,
    ) => {
      if (params.node.group && groupHeight != null) {
        return groupHeight;
      } else if (
        params.data &&
        params.data.country === "United States" &&
        usaHeight != null
      ) {
        return usaHeight;
      } else if (
        params.data &&
        params.data.sport === "Swimming" &&
        swimmingHeight != null
      ) {
        return swimmingHeight;
      }
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      groupDefaultExpanded,
      getRowHeight,
      onGridReady,
      setSwimmingHeight,
      setGroupHeight,
      setUsaHeight,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Changing Row Height](https://www.ag-grid.com/examples/row-height/row-height-change/vue3)

## Text Wrapping and Displaying Multi-Line Text

By default, new line characters in cell values will not be displayed and overflowing text will be truncated.

If you want text to wrap inside cells rather than truncating, add the flag `wrapText=true` to the Column Definition. Behind the scenes, this results in the CSS property `white-space: normal` being applied to the cell, which causes the text to wrap.

If you want greater control over text wrapping, or you want new line characters to be displayed, this can be done via setting the CSS property `white-space` (or `white-space-collapse` and `text-wrap-mode`) on the cell.

The example below demonstrates a few of the possible methods of configuring wrapping and multi-line text:

- The **Default Behaviour** column shows the default grid behaviour with no wrapping and truncated single line text.
- The **wrapText = true** column demonstrates the `wrapText` Column Definition property.
- The **Wrap Text** column applies the CSS `white-space: normal` to mimic the `wrapText` Column Definition property.
- The **Maintain New Lines** column applies the CSS `white-space-collapse: preserve-breaks`, which maintains new lines, but does not wrap.
- The **Wrap with New Lines** column applies the CSS `white-space: pre-line`, which maintains new lines and wraps the text.

#### Row Height Complex

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { getRowData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, CellStyleModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :rowHeight="rowHeight"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        field: "latinText",
        width: 180,
        headerName: "Default Behaviour",
      },
      {
        field: "latinText",
        width: 180,
        wrapText: true,
        headerName: "wrapText = true",
      },
      {
        headerName: "Configured via CSS",
        children: [
          {
            field: "latinText",
            width: 180,
            cellStyle: { "white-space": "normal" },
            headerName: "Wrap Text",
          },
          {
            field: "latinText",
            width: 180,
            cellStyle: { "white-space-collapse": "preserve-breaks" },
            headerName: "Maintain New Lines",
          },
          {
            field: "latinText",
            width: 205,
            cellStyle: { "white-space": "pre-line" },
            headerName: "Wrap with New Lines",
          },
        ],
      },
    ]);
    const rowHeight = ref(120);
    const rowData = ref<any[] | null>(getRowData());

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowHeight,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Row Height Complex](https://www.ag-grid.com/examples/row-height/row-height-complex/vue3)

> **Note**
>
> If you are providing a custom [Cell Renderer Component](https://www.ag-grid.com/vue-data-grid/component-cell-renderer/), you can implement text wrapping in the custom component in your own way. The property `wrapText` is intended to be used when you are not using a custom Cell Renderer.

## Auto Row Height

It is possible to set the row height based on the contents of the cells. To do this, set `autoHeight=true` on each column where height should be calculated from. For example, if one column is showing description text over multiple lines, then you may choose to select only that column to determine the line height.

`autoHeight` is typically used with `wrapText`. If `wrapText` is not set, and no custom [Cell Renderer Component](https://www.ag-grid.com/vue-data-grid/component-cell-renderer/) is used, then the cell will display all its contents on one line. This is probably not the intention if using Auto Row Height.

If multiple columns are marked with `autoHeight=true` then the height of the largest column is used.

The example below shows Auto Height. Column A has Auto Height enabled by setting both `wrapText=true` and `autoHeight=true`. Column B only has `wrapText=true` set so its contents are clipped if content doesn't fit.

#### Auto Row Height

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowAutoHeightModule,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowAutoHeightModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :sideBar="sideBar"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Row #",
        field: "rowNumber",
        width: 120,
      },
      {
        field: "autoA",
        width: 300,
        wrapText: true,
        autoHeight: true,
        headerName: "A) Auto Height",
      },
      {
        width: 300,
        field: "autoB",
        wrapText: true,
        headerName: "B) Normal Height",
      },
    ]);
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>({
      toolPanels: [
        {
          id: "columns",
          labelDefault: "Columns",
          labelKey: "columns",
          iconKey: "columns",
          toolPanel: "agColumnsToolPanel",
          toolPanelParams: {
            suppressRowGroups: true,
            suppressValues: true,
            suppressPivots: true,
            suppressPivotMode: true,
            suppressSideButtons: true,
            suppressColumnFilter: true,
            suppressColumnSelectAll: true,
            suppressColumnExpandAll: true,
          },
        },
      ],
      defaultToolPanel: "columns",
    });
    const rowData = ref<any[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      // in this example, the CSS styles are loaded AFTER the grid is created,
      // so we put this in a timeout, so height is calculated after styles are applied.
      setTimeout(() => {
        params.api.setGridOption("rowData", getData());
      }, 500);
    };

    return {
      gridApi,
      columnDefs,
      sideBar,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Auto Row Height](https://www.ag-grid.com/examples/row-height/auto-row-height/vue3)

> **Warning**
>
> Columns with Auto Height will always be rendered because the grid needs to set the height of the row. Setting `autoHeight=true` adds size listeners to cells and stops Column Virtualisation for these columns which can negatively impact rendering performance. This is why you should only set Auto Height for columns which require it. For example, if you have many columns that do not require variable height, do not set them to Auto Height.

### Lazy Height Calculation

Auto Height works by the grid listening for height changes for all Cells configured for Auto Height. As such it is only looking at rows that are currently rendered into the DOM. As the grid scrolls vertically and more rows are displayed, the height of those rows will be calculated on the fly.

This means the row heights and row positions are changing as the grid is scrolling vertically. This leads to the following behaviours:

- The vertical scroll range (how much you can scroll over) will change dynamically to fit the rows. If scrolling by dragging the scroll thumb with the mouse, the scroll thumb will not follow the mouse. It will either lag behind or jump ahead, depending on whether the row height calculations are increasing or decreasing the vertical scroll range.
- If scrolling up and showing rows for the first time (e.g. the user jumps to the bottom scroll position and then starts slowly scrolling up), then the row positions will jump as the rows coming into view at the top will get resized and the new height will impact the position of all rows beneath it. For example if the row gets resized to be 10 pixels taller, rows below it will get pushed down by 10 pixels. If scrolling down this isn't observed as rows below are not in view.

These behaviours are a necessary outcome of lazy height calculation. It is not possible to avoid these effects.

## Row Resizing

Row resizing is available as an option when showing [Row Numbers](https://www.ag-grid.com/vue-data-grid/row-numbers/).

## Height for Pinned Rows

When pinning rows while `enableRowPinning = true`, the row height of pinned rows can be changed as [described above](#rownodesetrowheightheight-and-apionrowheightchanged). Use `api.forEachPinnedRow(floating, callback)` to get references to the row nodes of pinned rows, where `floating` is `'top'` or `'bottom'`.

When setting pinned row data via `pinnedTopRowData` or `pinnedBottomRowData`, row height works exactly as for normal rows with one difference: it is not possible to dynamically change the height once set. However this is easily solved by just setting the pinned row data again which resets the row heights. Setting the data again is not a problem for pinned rows as it doesn't impact scroll position, filtering, sorting or group open / closed positions as it would with normal rows if the data was reset.