Sorting multiple datatables simultaneously

Dash Python
1

Hey

I have 10 datatables aligned side by side that have the same index, but i want to keep them separate as it’s easier to conditionally format them/read.

I would like the user to be able to click on any column in the 10 datatables, which’ll then sort all the tables together so they’re aligned

I’ve been trying to use an approach like below (simplified as there’s a lot of code), but i end up in an infinite loop where the callback keeps triggering if i sort by any table, and constantly inverts the ordering of table i click on

Hopefully that’s enough code to go on, but i’m happy to elaborate if not

Any tips on a better way to implement this? Thanks!

@app.callback(
    Output('summary-table-0', 'data'),
    Output('summary-table-1', 'data'),
    Output('summary-table-2', 'data'),
    Input('summary-table-0', 'derived_virtual_row_ids'),
    Input('summary-table-1', 'derived_virtual_row_ids'),
    Input('summary-table-2', 'derived_virtual_row_ids')
)
def update_tables(order1, order2, order3):

      ctx = dash.callback_context

      if not ctx.triggered:
          raise PreventUpdate

      prop = ctx.triggered[0]["prop_id"].split('.')

      for o in [order1, order2, order3]:
              if prop != 'summary-table-0':
                  df= df.iloc[o, :]
              if prop != 'summary-table-1':
                  df1= df1.iloc[o, :]
              if prop != 'summary-table-2':
                  df2= df2.iloc[o, :]
 


      data = df.to_dict('records')
      data2 = df1('records')
      data3 = df2.to_dict('records')

      return data, data2, data3