Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: Row 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.

Grid Assigned IDs

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 0, 1 and 2. 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 row-group-0, row-group-1 and row-group-2.

Application Assigned IDs

When the Application assigns Row IDs, this provides a common Row ID across the grid and the Application. This has advantages such as:

  1. 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.
  2. When updating Row Data (either by updating the rowData attribute, 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:

When the row data contains a unique row identifier, such as a Database Primary Key, getRowId() can be implemented as follows:

    /* other grid options ... */>

// assumes each data item provided by the application has the ID stored in an attribute called id
this.getRowId = params =>;

The example below has getRowId() implemented to return The Row ID is displayed inside the first Column.

// Loading...