Vue Data GridRow IDs
This section explains how the grid assigns row IDs and shows how applications can supply custom row IDs.
Each grid row has a unique row ID which is used by the grid to identify rows, e.g. for identifying what rows are currently selected. These row IDs can be Grid Assigned or Application Assigned.
Row IDs are generated by the grid when data is supplied to the grid. The grid uses a sequence starting at 0 and
incrementing by 1 to assign row IDs, so for example if there are three rows they will have IDs of
The row ID does not change for a row once it is set.
If the row data is updated to a new set, the grid will continue with its sequence. For example if 10 rows are initially set, IDs [0..9] are used. Then, if the data is set again for another 10 rows, IDs [10..19] are used. This is true even if the second set of rows are logically identical to the first set of rows (i.e. it's a refresh operation).
When Row Grouping another zero based sequence is used and prefixed with
row-group-. For example Row Groups
will have IDs
When the Application assigns Row IDs, this provides a common Row ID across the grid and the Application. This has advantages such as:
- The grid API
getRowNode(id)can be called with the Application known ID (eg
employeeId) to get the Row Node for a particular piece of data.
- When updating Row Data (either by updating the
rowDataattribute, or using Update Transactions), the grid uses the Row ID to map old vs new data (e.g. it can work out which Rows to add / remove / update rather than doing a blanket replacement of old vs new data). This allows the grid to keep state such as Row Selection.
Setting Row IDs is done using the
getRowId() grid callback:
Allows setting the ID for a particular row node based on the data.
When the row data contains a unique row identifier, such as a Database Primary Key,
getRowId() can be implemented as follows:
<ag-grid-vue :getRowId="getRowId" /* other grid options ... */> </ag-grid-vue> // assumes each data item provided by the application has the ID stored in an attribute called id this.getRowId = params => params.data.id;
The example below has
getRowId() implemented to return
params.data.id. The Row ID is displayed inside the first Column.