Angular Data Grid

Row Data

angular logo

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.

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

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

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.

Row IDs are provided by implementing the getRowId() callback.

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.