Updating child table dynamically on the basis of parent table

Dash Python
1

Hello,

I am trying to get the value from a callback function. This is the code :

layout = html.Div([
   
     html.Div(id='table2'),
      
])

@callback(
    Output('table2', 'children'),
    Input('table', 'active_cell')
)
def filter_data(active_cell):

    if active_cell:
        selected_row = df.iloc[active_cell['row']]
        selected_1 = selected_row['1']
        selected_2 = selected_row['2']
        print(selected_2)
        
    
        

        if selected_1 != "a" and selected_2 != "b":
           
            filtered_df = filtered_df[(filtered_df['1'] == selected_1) & (filtered_df['2'] == selected_2)]
         
          
         
            table2 = dash_table.DataTable(id='table2',columns=[{'name': col, 'id': col} for col in filtered_df.columns],data=filtered_df.to_dict('records'))
   
      
            return table2
    
        #else:
             #return html.Div()
    else:
         return html.Div()

here you can see i have created a dash table within the function and it is returning the Dash table after some pre processing steps.

The code is working fine for me when i run the app.py file for the first time and I am getting the desired output.

But, as you can see the in @callback input, I have set the input to Input('table', 'active_cell').
when I try to select the parent table row again in the same session, i am unable to get the updated child table.

Í tried to print the table2 value before reurning it…

here, is where the funny thing happens, I am getting the desired result in the terminal but, not in the web Layout.

The layout value stays the same filtered table from the initial selection.

Hope my question makes sense.

Basically i need to understand why the return statement is not working as intended.

P.S the input 'table ’ here is a dash table as well.

2

Hello @DanialM,

You are replacing table2 with something that doesnt have children, you need to adjust the second table to be a different id, then I think this will start working.

3

Hello @jinnyzor ,

Correct me if I am wrong on my understanding of your solution.

Instead of giving variable name as table2 I should try some other name for the variable?

Or,
Try using any other id name.

I will try it anyhow and update here.

Thank you for the help!

4

Here, try something like this:

layout = html.Div([
   
     html.Div(id='div2'), # <- changed from table2 since this is returned from the callback as a table
      
])

@callback(
    Output('div2', 'children'),
    Input('table', 'active_cell')
)
def filter_data(active_cell):

    if active_cell:
        selected_row = df.iloc[active_cell['row']]
        selected_1 = selected_row['1']
        selected_2 = selected_row['2']
        print(selected_2)
        
    
        

        if selected_1 != "a" and selected_2 != "b":
           
            filtered_df = filtered_df[(filtered_df['1'] == selected_1) & (filtered_df['2'] == selected_2)]
         
          
         
            table2 = dash_table.DataTable(id='table2',columns=[{'name': col, 'id': col} for col in filtered_df.columns],data=filtered_df.to_dict('records'))
   
      
            return table2
    
        #else:
             #return html.Div()
    else:
         return html.Div()
1 Like
5

Gotcha!!

Will try it and update.

Thanks again, @jinnyzor

1 Like
6

This Worked!!

1 Like