Apply same callback to multiple DataTables

Dash Python
1

Hello,

I am using Upload component and to upload multiple files(number of files are dynamic. i used this code to upload multiple files: https://dash.plotly.com/dash-core-components/upload) and converting each file into a dataframe and putting them in separate dataTables(so one dataTable for each file uploaded). I want to apply some call backs which are applicable for all tables. e.g when I select a column in a table, I need to apply a color to all cells in that column (‘style_data_conditional’).

Now how can I apply this call back to all the dataTables as it is applicable to all dataTables. I tried 2 ways, once giving same id to all the dataTables and just gave 1 call back and it did not work. I tried another way of giving sequence id with common prefix(e.g table-1, table2…tablen) as id to each of the dataTable. Now how to I loop through each dataTable to apply same callback. Please help.

2

You should be able to use a new feature, pattern-matching callbacks, to do this.

3

Thank you. I am a newbie with Dash, but found it some helpful with limited programming knowledge. I read about it and tried to apply. In my case tables are already redered(lets say with same type and index 0…n). Now with pattern, in my callback I am not sure ho to get selected_columns from that specific table. Any help is appreciated. Here is the code I am using, but i is returning null, so no column selected. For a single table this code is working fine as it is able to figure out the selected_columns, but not sure how this can get selected columns across tables:

@app.callback(
    Output({'type': 'table-display', 'index': ALL}, 'style_data_conditional'),
    [Input({'type': 'table-display', 'index': ALL}, 'selected_columns')])
def update_styles(selected_columns):
    return [{
        'if': {'column_id': i},
        'background_color': '#D2F3FF'
    } for i in selected_columns]

And here is the error:

Error: Invalid argument `style_data_conditional` passed into DataTable with ID "{"index":2,"type":"table-display"}".

Expected an array.

Was supplied type `object`.

Value provided: 

{

  "if": {

    "column_id": []

  },

  "background_color": "#D2F3FF"

}
4

I am now able to figure out how. Again as the documentation suggested used a hidden DIV to store the original data of all the tables and using that with MATCH pattern.

1 Like