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 the columns unless the pandas dataframeis created using the callback function.
I have checked that I getting correct data. However not able to display it. I have used multiple output options (using Dash 0.41)
My code looks as follows: ( I have not provided the details of the function which generates the pandas dataframe in the callback someFunc, as that was not important for the purpose of this Dash code TroubleShooting.
import dash_table as dt
def someFunc(ID, pattern_desc, file_path):
## do something
return df # pandas dataframe
######################################################################
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]app = dash.Dash(name, external_stylesheets=external_stylesheets)
server = app.server
app = dash.Dash(name)
app.config.suppress_callback_exceptions = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = Trueapp.layout = html.Div(
children = [
html.Div(
id = ‘title’,
children = appTitle,
className = ‘titleDiv’
),
html.Div(
children = [
html.Div(
children = “Enter ID:”,
className = ‘textDiv’
),
dcc.Input(
id = ‘ID’,
type = ‘text’,
value = ‘ABCER1’,
size = 8),html.Div( children = "Enter Test Pattern", className = 'textDiv' ), dcc.Input( id = 'pattern_desc', type = 'text', value = 'Sample', size = 20), html.Div( children = "Enter File OutPut Path:", className = 'textDiv' ), dcc.Input( id = 'file_path', type = 'text', value = '', size = 30), html.Button( id = 'submit', n_clicks = 0, children = 'Search' ) ] ), html.Div( id = 'tableDiv', children = dash_table.DataTable( id = 'table', #columns = something, ## *** Not sure how to output the columns dynamically here *** style_table={'overflowX': 'scroll'}, style_as_list_view=True, style_header={'backgroundColor': 'white','fontWeight': 'bold'}, ), className = 'tableDiv' ) ] ) # callback to update the table @app.callback([Output('table', 'data'),Output('table', 'columns')] [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") ) ])
So in this case the function someFunc which takes the 3 input arguments returns a pandas
dataframe which can have different columns based on the inputs. Thus the app layout should display
those columns as given by the output of the callback function dynamically based on the inputs.
Not Sure How I can achieve that. Any help will be appreciated. When I run this, I am getting the data generated through the function to the file, but dash is not able to
generated the table on webpage. I get the following error:
dash.exceptions.InvalidCallbackReturnValue: The callback …table.data…table.columns… is a multi-output.
Expected the output type to be a list or tuple but got Div([DataTable(columns=[{‘name’: ‘pattern_desc’, ‘id’: ‘pattern_desc’}, …