Updating Dash DataTable with callback while retaining interactive capabilities

Dash Python
1

Hi, I can’t figure out how to update my Dash DataTable using DateRangePicker as input while also retaining interactive capabilities. My main issue is that I want to update my table depending on some date selected by DateRangePicker. But in order to do so, I need to make the DataTable in a @callback rather than have it as a Div already made without any callbacks. The problem with making the data table in a callback is that when the table is updated, I can no longer click the table and have the interactive features, all that happens is the table is refreshed and then the “active_cell” value is always equal to None. Here is some code of what I have working now

dbc.Col(
                    [
                        html.Div(
                            dash_table.DataTable(
                            id='corr-table',
                            columns=[{"name": i, "id": i} for i in correlation_dataframe.columns],
                            data=correlation_dataframe.to_dict('records'),
                            active_cell=initial_active_cell, 
                        ),
                 )

@callback(
    Output('corr-graph', 'figure'),
    [Input('corr-table', 'active_cell'),
     Input('corr-table', 'data'),
     Input("stored-data", 'data'),
    ],
)
# active_cell = None if dash_table.DataTable is made in a callback.
def update_graph(active_cell, data, stored_data):
    name, start_date, end_date = stored_data
    if active_cell:
        df = client_df if name == "xxx" else client_df.loc[name]
        df = format_dates(df, start_date, end_date)
        selected_table_row_num = active_cell['row']
        row_name = data[selected_table_row_num][' ']
        column_name = active_cell['column_id']
        fig = px.scatter(data_frame=df, x=column_name, y=row_name, trendline="ols", trendline_color_override="red")
        return fig
2

Hi @Gabenich welcome to the forums. I’m not sure if I understand the problem. Just to make sure we are talking about the same thing:

  • you want the DataTable to be created dynamically on an event (date picked)
  • you want to interact with the table once created

Take this example (slightly changed from the docs) where exactly this happens:

from dash import Dash, Input, Output, callback, dash_table, html
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.read_csv('https://git.io/Juf1t')

app = Dash(
    __name__,
    suppress_callback_exceptions=True
)

app.layout = html.Div(
    [
        html.Button('Button aka DatePicker', id='date_picker'),
        html.Div(id='table_container')
    ]
)


@callback(
    Output('table_container', 'children'),
    Input('date_picker', 'n_clicks'),
    prevent_initial_call=True
)
def create_table_on_click(_):
    return html.Div(
        [
            dbc.Label('Click a cell in the table:'),
            dash_table.DataTable(
                df.to_dict('records'),
                [{"name": i, "id": i} for i in df.columns],
                id='tbl'
            ),
            dbc.Alert(id='tbl_out')
        ]
    )


@callback(
    Output('tbl_out', 'children'),
    Input('tbl', 'active_cell'),
    prevent_initial_call=True
)
def update_graphs(active_cell):
    return str(active_cell) if active_cell else "Click the table"


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

Other thoughts:

Why don’t you return the DataTable with an active cell as you do here:

active_cell=initial_active_cell

Do you need the callback to be triggered by all three properties or could you change the latter two to State()?