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, for example, to identify 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 (for example, a refresh operation).

When Row Grouping (AG Grid Enterprise feature),
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.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"headerName": "Row ID", "valueGetter": {"function": "params.node.id"}},
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
]

data = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
    {"make": "BMW", "model": "M50", "price": 60000},
    {"make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-ids-grid-assigned",
            rowData=data,
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            dashGridOptions={"animateRows": False}
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)

Application Assigned IDs

When the Application assigns Row IDs, this provides a common Row ID across the grid and the Application. :
This has advantages like when updating Row Data, the grid uses the Row ID to map old vs new data (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 Grid Property getRowId:

getRowId (string) Sets the ID for a particular row node based on the data.

Note that Row IDs are required when updating rowData in a callback

We will show two examples of assigning row ids - using an existing unique id and creating a unique id in the dataset.

The example below sets getRowId="params.data.id" to use the id column of the data for the Row ID

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"headerName": "Row ID", "valueGetter": {"function": "params.node.id"}},
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
]

data = [
    {"id": "c1", "make": "Toyota", "model": "Celica", "price": 35000},
    {"id": "c2", "make": "Ford", "model": "Mondeo", "price": 32000},
    {"id": "c8", "make": "Porsche", "model": "Boxster", "price": 72000},
    {"id": "c4", "make": "BMW", "model": "M50", "price": 60000},
    {"id": "c14", "make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-ids-app-assigned-existing-id",
            rowData=data,
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            getRowId="params.data.id",
            dashGridOptions={"animateRows": False}
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)

In this example, the data does not contain a unique ID in the dataset. We first create a unique ID using the dataframe’s
index, then assign it using getRowId="params.data.index".

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
df["index"] = df.index

columnDefs = [
    {"field": "index"},
    {"field": "country"},
    {"field": "year"},
    {"field": "athlete"},
    {"field": "age"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-ids-app-assigned-create-id",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            getRowId="params.data.index",
            dashGridOptions={"animateRows": False}
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)