---
title: "SSRM Row Height"
enterprise: true
framework: angular
version: "36.1.0"
---

# SSRM Row Height

Learn how to set Row Height when using the Server-Side Row Model.

## Dynamic Row Height

To enable [Dynamic Row Height](https://www.ag-grid.com/angular-data-grid/row-height/) when using the Server-Side Row Model you need to provide an implementation for the `getRowHeight` Grid Options property. This is demonstrated in the example below:

| 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. |

#### Dynamic Row Height Example

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  GetRowHeight,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IServerSideDatasource,
  ModuleRegistry,
  RowHeightParams,
  RowModelType,
  enableDevValidations,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { FakeServer } from "./fakeServer";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([RowGroupingModule, ServerSideRowModelModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [rowModelType]="rowModelType"
    [getRowHeight]="getRowHeight"
    [suppressAggFuncInHeader]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "country", rowGroup: true, hide: true },
    { field: "year", rowGroup: true, hide: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    flex: 1,
    minWidth: 180,
  };
  rowModelType: RowModelType = "serverSide";
  getRowHeight: GetRowHeight = (params: RowHeightParams) => {
    if (params.node.level === 0) {
      return 80;
    }
    if (params.node.level === 1) {
      return 60;
    }
    return 40;
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        // setup the fake server with entire dataset
        const fakeServer = new FakeServer(data);
        // create datasource with a reference to the fake server
        const datasource = getServerSideDatasource(fakeServer);
        // register the datasource with the grid
        params.api!.setGridOption("serverSideDatasource", datasource);
      });
  }
}

function getServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);
      const response = server.getData(params.request);
      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 200);
    },
  };
}
```

[Live example: Dynamic Row Height Example](https://www.ag-grid.com/examples/server-side-model-row-height/dynamic-row-height/angular)

> **Note**
>
> Ensure `maxBlocksInCache` is not set when using dynamic row height.

## Auto Row Height

To have the grid calculate the row height based on the cell contents, set `autoHeight=true` on columns that require variable height. The grid will calculate the height once when the data is loaded into the grid.

In the example below, Column A & B have `autoHeight=true` and `wrapText=true`. See [Row Height](https://www.ag-grid.com/angular-data-grid/row-height/) for details on these properties.

#### Auto Row Height Example

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IServerSideDatasource,
  ModuleRegistry,
  RowAutoHeightModule,
  RowModelType,
  enableDevValidations,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
import { FakeServer } from "./fakeServer";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowAutoHeightModule,
  RowGroupingModule,
  ServerSideRowModelModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [rowModelType]="rowModelType"
    [suppressAggFuncInHeader]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Group",
      field: "name",
      rowGroup: true,
      hide: true,
    },
    {
      field: "autoA",
      wrapText: true,
      autoHeight: true,
      aggFunc: "last",
    },
    {
      field: "autoB",
      wrapText: true,
      autoHeight: true,
      aggFunc: "last",
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    flex: 1,
    maxWidth: 200,
  };
  rowModelType: RowModelType = "serverSide";
  rowData!: any[];

  onGridReady(params: GridReadyEvent) {
    // generate data for example
    const data = getData();
    // setup the fake server with entire dataset
    const fakeServer = new FakeServer(data);
    // create datasource with a reference to the fake server
    const datasource = getServerSideDatasource(fakeServer);
    // register the datasource with the grid
    params.api.setGridOption("serverSideDatasource", datasource);
  }
}

function getServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);
      const response = server.getData(params.request);
      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 200);
    },
  };
}
```

[Live example: Auto Row Height Example](https://www.ag-grid.com/examples/server-side-model-row-height/auto-row-height/angular)

> **Note**
>
> Ensure `maxBlocksInCache` is not set when using auto row height.

## Changing Row Height

To dynamically set or restore row heights in the Server-Side Row Model, use `setRowHeight()` to apply custom heights to specific rows and `resetRowHeights()` to revert all rows to the values calculated by the `getRowHeight()` in Grid Options. See [Changing Row Height](https://www.ag-grid.com/angular-data-grid/row-height/#rownodesetrowheightheight-and-apionrowheightchanged) for more.

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

The following example demonstrates this functionality:

- Clicking on a row sets its height to `100px` using `setRowHeight()`.
- Clicking the "Reset Row Heights" button resets all rows to their original heights using `resetRowHeights()`.

#### Reset Row Height Example

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  GetRowHeight,
  GetRowIdFunc,
  GridApi,
  GridOptions,
  GridReadyEvent,
  RowModelType,
} from "ag-grid-community";
import {
  ModuleRegistry,
  ServerSideRowModelApiModule,
  ServerSideRowModelModule,
  enableDevValidations,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ServerSideRowModelModule,
  ServerSideRowModelApiModule,
]);
import { IOlympicDataWithId } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div style="height: 100%">
    <button (click)="resetRowHeights()">Reset Row Heights</button>
    <ag-grid-angular
      style="width: 100%; height: 90%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [getRowId]="getRowId"
      [getRowHeight]="getRowHeight"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [rowModelType]="rowModelType"
      [rowData]="rowData"
      (rowClicked)="onRowClicked($event)"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicDataWithId>;

  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 180 },
    { field: "year" },
    { field: "date", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    // allow every column to be aggregated
    enableValue: true,
    sortable: false,
  };
  getRowId: GetRowIdFunc = (p) => String(p.data?.id);
  getRowHeight: GetRowHeight = (p) => {
    return 50 + 30 * Math.sin((p.data?.id ?? 0) / 5 - Math.PI / 2);
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    minWidth: 200,
  };
  rowModelType: RowModelType = "serverSide";
  rowData!: IOlympicDataWithId[];

  constructor(private http: HttpClient) {}

  onRowClicked(p) {
    p.node.setRowHeight(100);
    p.api.onRowHeightChanged();
  }

  resetRowHeights() {
    this.gridApi.resetRowHeights();
  }

  onGridReady(params: GridReadyEvent<IOlympicDataWithId>) {
    this.gridApi = params.api;

    this.http
      .get<
        IOlympicDataWithId[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        // adding row id to data
        let idSequence = 0;
        data.forEach(function (item: { id: number }) {
          item.id = idSequence++;
        });
        // setup the fake server with entire dataset
        const fakeServer = createFakeServer(data);
        // create datasource with a reference to the fake server
        const datasource = createServerSideDatasource(fakeServer);
        // register the datasource with the grid
        params.api.setGridOption("serverSideDatasource", datasource);
      });
  }
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
function createServerSideDatasource(server) {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);
      // get data for request from our fake server
      const response = server.getData(params.request);
      // simulating real server call with a 500ms delay
      setTimeout(() => {
        if (response.success) {
          // supply rows for requested block to grid
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          params.fail();
        }
      }, 500);
    },
  };
}
function createFakeServer(allData) {
  return {
    getData: (request) => {
      // take a slice of the total rows for requested block
      const rowsForBlock = allData.slice(request.startRow, request.endRow);
      // here we are pretending we don't know the last row until we reach it!
      const lastRow = getLastRowIndex(request, rowsForBlock);
      return {
        success: true,
        rows: rowsForBlock,
        lastRow: lastRow,
      };
    },
  };
}
function getLastRowIndex(request, results) {
  if (!results) return undefined;
  const currentLastRow = (request.startRow || 0) + results.length;
  // if on or after the last block, work out the last row, otherwise return 'undefined'
  return currentLastRow < (request.endRow || 0) ? currentLastRow : undefined;
}
```

[Live example: Reset Row Height Example](https://www.ag-grid.com/examples/server-side-model-row-height/resetting-row-height/angular)