Python Dash_AG_Grid ValueGetter across Multiple Tables | Source Tables and Target Tables | Dash Plotly

Dash Python
1

How can I link in python dash_ag_grid several tables?

Similar to MS Excel, I want to update not only within a table several columns, but across multiple tables once a cell is changed? Assume I have a table A which hold information based on the key column A and table B which hold information based on the key column B. Now in the main table, I have A and B include some more columns. Within the table via valueGetter I can update cells quite easily. But, how will the main table be updated once table A or table B changes?

import dash_ag_grid as dag
from dash import Dash, html, dcc

string = 'ABCDEFGHIJ'
rowDataA = [{"a": i % 4, "DesA": string[i]} for i in range(4)]
rowDataB = [{"b": i % 7, "DesB": string[i]} for i in range(7)]

columnDefsA = [
    {"field": "a", "editable": False, "type": "numeric"},
    {"field": "DesA", "editable": True, "type": "string"}
]
columnDefsB = [
    {"field": "b", "editable": False, "type": "numeric"},
    {"field": "DesB", "editable": True, "type": "string"}
]

rowData = [{"a": i % 4, "b": i % 7} for i in range(10)]

columnDefs = [
    {
        "headerName": "#",
        "maxWidth": 100,
        "valueGetter": {"function": "params.node ? params.node.rowIndex : null;"},
    },
    {"field": "a", "editable": True, "type": "numeric"},
    {"field": "b", "editable": True, "type": "numeric"},
    {
        "headerName": "A + B",
        "colId": "a&b",
        "valueGetter": {"function": "params.data.a * 1 + params.data.b * 1;"},
    },
    {
        "headerName": "A * 1000",
        "minWidth": 95,
        "valueGetter": {"function": "params.data.a * 1000"},
    },
    {
        "headerName": "Des A",
        "minWidth": 90,
        "valueGetter": {"function": "get_DesA(params.data.a);"},
    },
    {
        "headerName": "Des B",
        "minWidth": 90,
        "valueGetter": {"function": "get_DesB(params.data.b);"},
    },
]



app = Dash(__name__)

tbl = dag.AgGrid(
            id="value-getter-ag-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            )

tblA = dag.AgGrid(
            id="value-getter-ag-grid-A",
            columnDefs=columnDefsA,
            rowData=rowDataA,
        )

tblB = dag.AgGrid(
            id="value-getter-ag-grid-B",
            columnDefs=columnDefsB,
            rowData=rowDataB,
        )

app.layout = html.Div(
    [
        dcc.Markdown("Value Getters Example"),
        tbl,
        html.Div([tblA, tblB]),
    ],
    style={"margin": 20},
)


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

Main question is how to define the functions get_DesA and get_DesB and how to trigger the functions once one cell in the source table is changed. Or what is the smartest / most elegant way to link the tables and let the columns be re-calculated?

2

You can link the tables using callbacks :blush: