Dash table in not created in the second page of the dash application

I am trying to building a webapp in plotly-dash. It’s a two page web application. In page one, I have four dropdowns. What I am trying to do is, upon selecting the values from the dropdowns and hitting the submit button. The values chosen in the dropdown will serve as filters for the table to be generated in the second page.

I am storing all the dropdown values in dcc.Store .

@app.callback(Output("filters",'data'),
              Input('mki_dropdown','value'),
              Input('brd_dropdown','value'),
              Input('pyt_dropdown','value'),
              Input('pya_dropdown','value')
             )
def filter_input(selected_mki,
                 selected_brd,
                 selected_pyt,
                 selected_pya
                ):
    user_input = {
        "mki":selected_mki,
        "brd":selected_brd,
        "pyt":selected_pyt,
        "pya":selected_pya
    }    
    return user_input    

This is the second page where the dash table is generated.

layout_page_2 = html.Div([
    html.Div([
        html.H4("P.E.L"),
        html.Div(className="row",children=[
            html.Div([
                html.Label(['ACS'], style={'font-weight':'bold'}),
            ],style=dict(width="10%")),
            html.Div([
               dcc.Dropdown(
                id = "acs_dropdown",
                options=[{'label':s,'value':s} for s in list(sta)],
                placeholder = "Select ACS",
                searchable = False,
            )],style = dict(width="30%",padding="6px")), 
        ],style=dict(display="flex")),
        html.Br(),
        dash_table.DataTable(
            id = "table",
            editable = True,
            filter_action = "native",
            sort_action="native",
            sort_mode="multi",
            selected_columns=[],
            selected_rows=[],
            column_selectable="single",
            row_selectable="multi",
            style_cell = {'fontSize':'15px'}, 
            fixed_rows = {'headers':'True'},  
            page_size=20,
            style_table = {'height':'300px','overflow':'auto'}
        ),
    ]),    
])

Using this callback, I am trying to send in the dropdown values via dcc.Store to the columns and data parameter of the dash table.

@app.callback(Output("table","columns"),
              Ouput("table","data"),
              Input("filters","data"))
def table_data(user_inputs):

    mki = user_inputs["mki"]
    brd = user_inputs["brd"]
    pyt = user_inputs["pyt"]
    pya = user_inputs["pya"]

    table_df = df2.copy()
    table_df.query('MKI == @mki and BRD == @brd and PYT == @pyt and PYA == @pya',inplace=True)
    flt_df=table_df[['PEI','PEN','TL','CA']]

    col = [{"name": i, "id": i} for i in flt_df.columns]
    data = flt_df.to_dict('records')

    return col,data

I am trying to building a webapp in plotly-dash. It’s a two page web application. In page one, I have four dropdowns. What I am trying to do is, upon selecting the values from the dropdowns and hitting the submit button. The values chosen in the dropdown will serve as filters for the table to be generated in the second page.

I am storing all the dropdown values in dcc.Store .

@app.callback(Output("filters",'data'),
              Input('mki_dropdown','value'),
              Input('brd_dropdown','value'),
              Input('pyt_dropdown','value'),
              Input('pya_dropdown','value')
             )
def filter_input(selected_mki,
                 selected_brd,
                 selected_pyt,
                 selected_pya
                ):
    user_input = {
        "mki":selected_mki,
        "brd":selected_brd,
        "pyt":selected_pyt,
        "pya":selected_pya
    }    
    return user_input    

This is the second page where the dash table is generated.

layout_page_2 = html.Div([
    html.Div([
        html.H4("P.E.L"),
        html.Div(className="row",children=[
            html.Div([
                html.Label(['ACS'], style={'font-weight':'bold'}),
            ],style=dict(width="10%")),
            html.Div([
               dcc.Dropdown(
                id = "acs_dropdown",
                options=[{'label':s,'value':s} for s in list(sta)],
                placeholder = "Select ACS",
                searchable = False,
            )],style = dict(width="30%",padding="6px")), 
        ],style=dict(display="flex")),
        html.Br(),
        dash_table.DataTable(
            id = "table",
            editable = True,
            filter_action = "native",
            sort_action="native",
            sort_mode="multi",
            selected_columns=[],
            selected_rows=[],
            column_selectable="single",
            row_selectable="multi",
            style_cell = {'fontSize':'15px'}, 
            fixed_rows = {'headers':'True'},  
            page_size=20,
            style_table = {'height':'300px','overflow':'auto'}
        ),
    ]),    
])

Using the callback, I am trying to send in the dropdown values via dcc.Store to the columns and data parameter of the dash table.

@app.callback(Output("table","columns"),
              Ouput("table","data"),
              Input("filters","data"))
def table_data(user_inputs):

    mki = user_inputs["mki"]
    brd = user_inputs["brd"]
    pyt = user_inputs["pyt"]
    pya = user_inputs["pya"]

    table_df = df2.copy()
    table_df.query('MKI == @mki and BRD == @brd and PYT == @pyt and PYA == @pya',inplace=True)
    flt_df=table_df[['PEI','PEN','TL','CA']]

    col = [{"name": i, "id": i} for i in flt_df.columns]
    data = flt_df.to_dict('records')

    return col,data

But what ends up happening is that after choosing the dropdown values and clicking the submit button in the first page. The application proceeds to the second page but the table is not generate. In place of the table, there is just blank space.

I can’t figure out what I am missing here.

Thanks in advance.

2 posts - 2 participants

Read full topic