Can I make a dash table input into a callback?

Dash Python
1

I tried some code like this

@app.callback(
    Output('feature_importance_graph', 'figure'),
    Input('datatable-interactivity', 'table1')
)
def streamFig(table1):
    print(table1)
    ....

And I get this error

Property "table1" was used with component ID:
  "datatable-interactivity"
in one of the Input items of a callback.
This ID is assigned to a dash_table.DataTable component
in the layout, which does not support this property.
This ID was used in the callback(s) for Output(s):
  feature_importance_graph.figure

I think this suggest that tables are not usable as inputs to callbacks right?

2

Hi @xiaodai and welcome to the Dash Community! :slightly_smiling_face:

The properties of the DataTable can absolutely be used as inputs to a callback. :confetti_ball: You just need to use a valid table property - such as “data” or “columns” or one of the many other many table properties. ('table1' looks like it might be an id ?)

If you post a little more code - like a minimal example that will reproduce the error, it will be easier to help. See more information here: How to Get your Questions Answered on the Plotly Forum

3

I see. You just can’t put the whole table as an input I guess. I saw some examples on the repo.

Thanks for the reply.

4

Yes, as of Dash 2.0 you can use the “whole table” as an input rather than the component’s id, but you still need to specify which table property triggers the callback. So the first element of the Input is the table (or it’s id) and the second element is the property. And as I mentioned previously, if you post a little more code, it would be easier to help.

5

On this thread I would like to ask a similar question. Please look in the code below :
the function may not be that accurate but that is not of importance right now… here i need to know when I run the callback i get the print statements to be ‘NONE’

#CALLBACK TO GO TO NEW PAGE
@callback(
         Output('url', 'pathname'),
        Input('table2', 'active_cell'),
        State('table2','active_cell')
        ) 
def navigate_to_url(active_cell,data):
    print('active',active_cell)
    
    print('data',data)
    if active_cell is not None:
        print('active',active_cell)
        print('data',data)
       # print('active',active_cell)
        
        selected_row = data[active_cell['row']]
        url = selected_row.get('URL','')
        if url:
             return url

i am using the following code to create the ‘table2’ id to perform the callback :

#FINAL TABLE FOR LANE DATA
@callback(
    Output('table2', 'data'),
    [Input('selections-serial', 'data'), Input('selections-process-step', 'data')]
)
def filter_data(selected_value,other_value):
    if selected_value != "No selections":
        filtered_df = df2[df2['serial'] == selected_value]
        
        filtered_df = filtered_df[filtered_df['processStep'] == other_value]
       
        filtered_df = pd.DataFrame(filtered_df)
       # print(df['tag'])
        table = dash_table.DataTable(
            data=filtered_df.to_dict('records'),
            columns=[{'name': col, 'id': col} for col in filtered_df.columns],
           )
        return html.Div([
            html.H3("Filtered DataFrame:"),
            table
        ])
    else:
        return ''

and this is displayed in the Layout as :

html.Div(id='table2')

I am not sure why the initial callback function is giving me NONE in the print statements.

Hope my question makes sense.

6

Hello @DanialM,

Welcome to the community!

This is due to how Dash callbacks work, when the component is first added, the component will trigger callbacks automatically, this is done with no triggers, etc. To have this behavior not happen, you need to tack on prevent_initial_call=True to the callback.

Check out more here:

This should be a dash_table not a div in order for the properties to work.

7

Hello @jinnyzor ,

I tried to play with the code and was able to come up with a solution. These were the change I made,

#CALLBACK TO GO TO NEW PAGE
@callback(
    Output('url', 'pathname'),
    Input('table2', 'active_cell'),
    State('table2', 'data')
)
def navigate_to_url(active_cell, table2_data):
    if active_cell:
        print('active',active_cell)
        print('data',data)
        selected_row = table2_data[active_cell['row']]
        url = selected_row.get('URL', '')
        if url:
            return url

AND,


@callback(
    Output('table2', 'children'),
    [Input('selections-serial', 'children'), Input('selections-process-step', 'children')]
)
def filter_data(selected_serial, selected_process_step):
    if statements
        filtered_df
        table2 = dash_table.DataTable(
            id='table2',
            columns=[{'name': col, 'id': col} for col in filtered_df.columns],
            data=filtered_df.to_dict('records'),
      
        style_table={'height': '300px', 'width':'1800px','overflowY': 'auto'}    
        )
        
        return table2
    else:
        return html.Div()

it is still not a good solution but was able to solve my initial query.