Is there a way to highlight multiple cells in Dash AG-GRID and it will display the total

[AI-WU]

Is there a way to highlight multiple cells in Dash AG-GRID and it will display the total. Just like standard AG-GRID framework.

[hoatran]

As I know, range selection is an AG Grid Enterprise feature so maybe we should use row selection to do that.

Based on examples on Dash AG Grid docs webpage, I made this one. Hope this help:

import dash
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
import pandas as pd

app = Dash(__name__)


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


columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
    {"field": "date"},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dcc.Markdown("This grid has multi-select rows.  Click to select rows"),
        dag.AgGrid(
            id="selection-multiple-click-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={
                "resizable": True,
                "sortable": True,
                "filter": True,
                "minWidth": 125,
            },
            dashGridOptions={
                "rowSelection": "multiple",
            },
        ),
        html.Div(id="selections-multiple-click-output")
    ],
    style={"margin": 20},
)


@app.callback(
    Output("selections-multiple-click-output", "children"),
    Input("selection-multiple-click-grid", "selectedRows"),
)
def selected(selected):
    if selected:
        total = [s["gold"] for s in selected]
        return f"Sum amount: {sum(total)}"
    return "No selections"


if __name__ == "__main__":
    app.run_server(debug=False)

I sum up gold medal quantity based on row selection: