Py.Cafe

amward/

dash-ag-grid-component-in-header

Example of button in header of dash ag grid triggering a callback

DocsPricing
  • assets/
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


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

app = Dash()


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

app.layout = html.Div([
    dcc.Store(id="store-button"),
    dag.AgGrid(
            id="column-definition-ID",
            rowData=df.to_dict("records"),
            columnDefs=[{
                "field": "athlete",
                "headerName": "Athlete",
                "headerComponent": "ButtonHeader"  # select custom component
            }],
            columnSize="sizeToFit",
        ),
    html.Div(id="container")

])

@app.callback(
    Output("container", "children"),
    Input("store-button", "data")
)
def update(data):
    return str(data)

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