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 data is provided to the grid via the rowData property.
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} />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 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.
Row IDs
Providing a unique ID for each row allows the grid to work optimally across a range of features. It is strongly recommend 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.
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. |
Row Nodes
Every row displayed in the grid is represented by a Row Node which exposes stateful attributes and methods for directly interacting with the row.
Row Nodes are accessed via Grid API methods, as well as provided as props for items such as Cell Component.
Check the Row Reference and Row Events for all items available on the Row Node.