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

#### Row Data

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [ClientSideRowModelModule];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { 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, setColumnDefs] = useState<ColDef[]>([
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ]);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact rowData={rowData} columnDefs={columnDefs} />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

```jsx
const [rowData, setRowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 },
]);

<AgGridReact rowData={rowData} />
```

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

#### Get Row ID

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [ClientSideRowModelModule];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { 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 },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "id", headerName: "Row ID" },
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);
  const getRowId = useCallback(
    (params: GetRowIdParams) => String(params.data.id),
    [],
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            getRowId={getRowId}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

## Row Nodes

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

The following buttons log the data to the developer console.

#### Row Node

```tsx
("use client");

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowApiModule,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [RowApiModule, ClientSideRowModelModule];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { 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 },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "id", headerName: "Row ID" },
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);
  const getRowId = useCallback(
    (params: GetRowIdParams) => String(params.data.id),
    [],
  );

  const getAllRows = useCallback(() => {
    gridRef.current!.api.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()}`);
    });
  }, []);

  const getRowById = useCallback(() => {
    const rowNode = gridRef.current!.api.getRowNode("c2");
    if (rowNode && rowNode.id == "c2") {
      console.log(`################ Got Row Node C2`);
      console.log(`data = ${JSON.stringify(rowNode.data)}`);
    }
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div style={{ marginBottom: "1rem" }}>
            <button onClick={getAllRows}>Log All Rows</button>
            <button onClick={getRowById}>Get ONE Row</button>
          </div>

          <div style={gridStyle}>
            <AgGridReact
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              getRowId={getRowId}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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