Search

Vue Data GridRow 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 data is provided to the grid via the rowData property.

<ag-grid-vue
    :rowData="rowData"
    /* other grid options ... */>
</ag-grid-vue>

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 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.

getRowId
GetRowIdFunc
Initial
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.