Vue Data Grid

Row Data

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

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