---
title: "Row Data"
framework: angular
version: "36.1.0"
---

# Row Data

Provide an array of data to the grid via the `rowData` property to render a row for each item in the array.

## Row Data

When using the default row model - [Client Side](https://www.ag-grid.com/angular-data-grid/row-models/#client-side) data is provided to the grid via the `rowData` property.

#### Row Data

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
  /> `,
})
export class AppComponent {
  rowData: any[] | null = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 },
    { make: "BMW", model: "M50", price: 60000 },
    { make: "Aston Martin", model: "DBX", price: 190000 },
  ];
  columnDefs: ColDef[] = [
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ];
}
```

[Live example: Row Data](https://www.ag-grid.com/examples/row-ids/row-data/angular/)

```ts
<ag-grid-angular
    [rowData]="rowData"
    /* other grid options ... */ />

this.rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 },
];
```

> **Note**
>
> If you are using TypeScript you may wish to provide the grid with your row data type for an improved developer experience. See [TypeScript Generics](https://www.ag-grid.com/angular-data-grid/typescript-generics/) for more details.

## Updating Row Data

The simplest way to update `rowData` is to pass a new array of data to the grid. For full details on updating row data, including transactions, see [Updating Data](https://www.ag-grid.com/angular-data-grid/data-update/).

## Row IDs

Providing a unique ID for each row allows the grid to work optimally across a range of features. It is strongly recommended to provide row IDs by passing a function that returns a string to the `getRowId` grid option. This function should always return the same string for a given row, and no two rows should share the same ID.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getRowId` | `GetRowIdFunc` |  |  | Provide a pure function that returns a string ID to uniquely identify a given row. This enables the grid to work optimally with data changes and updates. [Initial](https://www.ag-grid.com/angular-data-grid/grid-interface/#initial-grid-options). |

#### Get Row ID

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [defaultColDef]="defaultColDef"
    [getRowId]="getRowId"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "id", headerName: "Row ID" },
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ];
  rowData: any[] | null = [
    { id: "c1", make: "Toyota", model: "Celica", price: 35000 },
    { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
    { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
    { id: "c4", make: "BMW", model: "M50", price: 60000 },
    { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
  ];
  defaultColDef: ColDef = {
    flex: 1,
  };
  getRowId: GetRowIdFunc = (params: GetRowIdParams) => String(params.data.id);
}
```

[Live example: Get Row ID](https://www.ag-grid.com/examples/row-ids/get-row-id/angular/)

## Row Nodes

Every row displayed in the grid is represented by a [Row Node](https://www.ag-grid.com/angular-data-grid/row-interface/) which exposes stateful attributes and methods for directly interacting with the row.

Row Nodes are accessed via [Grid API](https://www.ag-grid.com/angular-data-grid/grid-api/) methods, as well as provided as props for items such as [Cell Component](https://www.ag-grid.com/angular-data-grid/component-cell-renderer/).

The following buttons log the data to the developer console.

#### Row Node

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowApiModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([RowApiModule, ClientSideRowModelModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div style="margin-bottom: 1rem">
      <button (click)="getAllRows()">Log All Rows</button>
      <button (click)="getRowById()">Get ONE Row</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [defaultColDef]="defaultColDef"
      [getRowId]="getRowId"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "id", headerName: "Row ID" },
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ];
  rowData: any[] | null = [
    { id: "c1", make: "Toyota", model: "Celica", price: 35000 },
    { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
    { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
    { id: "c4", make: "BMW", model: "M50", price: 60000 },
    { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
  ];
  defaultColDef: ColDef = {
    flex: 1,
  };
  getRowId: GetRowIdFunc = (params: GetRowIdParams) => String(params.data.id);

  getAllRows() {
    this.gridApi.forEachNode((rowNode) => {
      console.log(`=============== ROW ${rowNode.rowIndex}`);
      console.log(`id = ${rowNode.id}`);
      console.log(`rowIndex = ${rowNode.rowIndex}`);
      console.log(`data = ${JSON.stringify(rowNode.data)}`);
      console.log(`group = ${rowNode.group}`);
      console.log(`height = ${rowNode.rowHeight}px`);
      console.log(`isSelected = ${rowNode.isSelected()}`);
    });
  }

  getRowById() {
    const rowNode = this.gridApi.getRowNode("c2");
    if (rowNode && rowNode.id == "c2") {
      console.log(`################ Got Row Node C2`);
      console.log(`data = ${JSON.stringify(rowNode.data)}`);
    }
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
}
```

[Live example: Row Node](https://www.ag-grid.com/examples/row-ids/row-node/angular/)

Check the [Row Reference](https://www.ag-grid.com/angular-data-grid/row-object/) and [Row Events](https://www.ag-grid.com/angular-data-grid/row-events/) for all items available on the [Row Node](https://www.ag-grid.com/angular-data-grid/row-interface/).