Updating Dash DataTable with callback while retaining interactive capabilities

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

                            columns=[{"name": i, "id": i} for i in correlation_dataframe.columns],

    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

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(

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

    Output('table_container', 'children'),
    Input('date_picker', 'n_clicks'),
def create_table_on_click(_):
    return html.Div(
            dbc.Label('Click a cell in the table:'),
                [{"name": i, "id": i} for i in df.columns],

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

if __name__ == "__main__":

Other thoughts:

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


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