---
title: "Row Data"
framework: javascript
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/javascript-data-grid/row-models/#client-side) data is provided to the grid via the `rowData` property.

#### Row Data

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

// specify the data
const rowData = [
  { 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 },
];

const columnDefs: ColDef[] = [
  { field: "make" },
  { field: "model" },
  { field: "price" },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

```js
const gridOptions = {
    rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxster", price: 72000 },
    ],

    // other grid options ...
}
```

> **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/javascript-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/javascript-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/javascript-data-grid/grid-interface/#initial-grid-options). |

#### Get Row ID

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  GetRowIdParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  { field: "id", headerName: "Row ID" },
  { field: "make" },
  { field: "model" },
  { field: "price" },
];

// specify the data
const rowData = [
  { 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 },
];

let gridApi: GridApi;

// let the grid know which columns and what data to use
const gridOptions: GridOptions = {
  columnDefs: columnDefs,
  defaultColDef: {
    flex: 1,
  },
  rowData: rowData,
  getRowId: (params: GetRowIdParams) => String(params.data.id),
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

## Row Nodes

Every row displayed in the grid is represented by a [Row Node](https://www.ag-grid.com/javascript-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/javascript-data-grid/grid-api/) methods, as well as provided as props for items such as [Cell Component](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/).

The following buttons log the data to the developer console.

#### Row Node

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  GetRowIdParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowApiModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([RowApiModule, ClientSideRowModelModule]);

const columnDefs: ColDef[] = [
  { field: "id", headerName: "Row ID" },
  { field: "make" },
  { field: "model" },
  { field: "price" },
];

// specify the data
const rowData = [
  { 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 },
];

function getAllRows() {
  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()}`);
  });
}

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

let gridApi: GridApi;

// let the grid know which columns and what data to use
const gridOptions: GridOptions = {
  columnDefs,
  defaultColDef: {
    flex: 1,
  },
  rowData,
  getRowId: (params: GetRowIdParams) => String(params.data.id),
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).getAllRows = getAllRows;
  (<any>window).getRowById = getRowById;
}
```

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

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