How can we create data columns in Dash Table dynamically using callback with a function providing the dataframe

Question

I am trying to create dash table on Web using Inputs. However the issue is that the data is created from database from the callback and a priori, I do not know the names of

Answer 1

In your Dash callback you are supposed to be returning 2 separate values to the 2 separate outputs: [Output('table', 'data'),Output('table', 'columns')]

You are returning:

return html.Div([
                dt.DataTable(
            id='table',
            columns=mycolumns,
            data=df.to_dict("rows")
         )
        ])

which is only 1 output.

Dash expects 2 return values in either a list, or a tuple like so:

return("output1" , outputVariable2)

or

return[ Html.Div("text") , "output Text 2"]

in order to fix the problem, either return 2 values in a tuple or list, or edit your output requirements so only one value is necessary.

From the looks of it you are trying to return a Div with a Datatable in it, so you could just make the following changes:

    html.Div(
        id = 'tableDiv',
        className = 'tableDiv'
    )

...

  @app.callback([Output('tableDiv', 'children')]
          [Input('submit', 'n_clicks')],
          [State('ID', 'value'),  State('pattern_desc', 'value'), 
        State('file_path', 'value')])
   def update_table(n_clicks, ID, pattern_desc, file_path):

         df = someFunc(ID, pattern_desc, file_path)
    mycolumns = [{'name': i, 'id': i} for i in df.columns]
        return html.Div([
                dt.DataTable(
            id='table',
            columns=mycolumns,
            data=df.to_dict("rows")
         )
        ])