Update CSV with User Input to a Dash Table

Dash Python
1

Hi, I using the code below to use an user input to filter on a pandas data frame so there selection is then updated to a table. All the buttons work but it will not return the table. When I click on the button the console shows a new line but the browser doesn’t show the table.

Thanks

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div(["Input: ",
dcc.Input(id=‘my-input’, value=‘initial value’, type=‘text’)]),

html.Br(),
html.Div(id='my-output'),
    
html.Div(id="table2"),

html.Div([
    html.Button(id='submit-button2',                
            children='FUNDAMENTAL')
]),

])

@app.callback(
Output(component_id=‘table2’, component_property=‘FUNDAMENTAL’),
[Input(component_id=‘submit-button2’, component_property=‘n_clicks’)],
[dash.dependencies.State(component_id=“my-input”, component_property=“value”)]
)
def update_output_div(n_clicks, value):
df= pd.read_csv(‘F.csv’)
dfa = df[(df[‘S’]==value)]
data = dfa.to_dict(‘records’)
columns = [{“name”: i, “id”: i,} for i in (dfa.columns)]
return dt.DataTable(data=data, columns=columns)

if name == ‘main’:
app.run_server(debug=False)

2

The component property of table2 Div was set to FUNDAMENTAL replacing it with children would work.

app = dash.Dash(name,external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        html.Label("Input:"),
        dcc.Input(id='my-input',value='initial value',type='text')
    ]),

    html.Br(),
    html.Div(id='my-output'),
    html.Div(id='table2'),
    html.Div([
        html.Button(id='submit-button2',children='FUNDAMENTAL')
    ])
])



@app.callback(
    Output(component_id='table2', component_property='children'),
    [Input(component_id='submit-button2', component_property='n_clicks')],
    [dash.dependencies.State(component_id='my-input', component_property='value')]
)
def update_output_div(n_clicks, value):
    df= pd.read_csv('F.csv')
    dfa = df[(df['S']==value)]
    data = dfa.to_dict('records')
    columns = [{'name': i, 'id': i,} for i in (dfa.columns)]
    return dt.DataTable(data=data, columns=columns)

if name == 'main':
    app.run_server(debug=False)
3

If the above code doesn’t work try returning the data_table’s data and columns instead of returning the component itself.

app = dash.Dash(name,external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        html.Label("Input:"),
        dcc.Input(id='my-input',value='initial value',type='text')
    ]),

    html.Br(),
    html.Div(id='my-output'),
    html.Div([
        dt.DataTable(id='data_table2')
    ],id='table2'),
    html.Div([
        html.Button(id='submit-button2',children='FUNDAMENTAL')
    ])
])



@app.callback(
    [
        Output(component_id='data_table2', component_property='data'),
        Output(component_id='data_table2', component_property='columns'),

    ],
    [Input(component_id='submit-button2', component_property='n_clicks')],
    [dash.dependencies.State(component_id='my-input', component_property='value')]
)
def update_output_div(n_clicks, value):
    df= pd.read_csv('F.csv')
    dfa = df[(df['S']==value)]
    data = dfa.to_dict('records')
    columns = [{'name': i, 'id': i,} for i in (dfa.columns)]
    return data, columns

if name == 'main':
    app.run_server(debug=False)
4

It works thanks

5

It works but the reset button doesn’t work. I want to restore this to the beginning state which just buttons. I also notice the start state shows the headers when I only want it to show the buttons.
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div([
html.Label(“Input:”),
dcc.Input(id=‘my-input’,value=‘initial value’,type=‘text’)
]),

html.Br(),
html.Div(id='my-output'),
html.Div(id='table2'),
html.Div([
    html.Button(id='submit-button2',children='Submit')
]),

 html.Div([
    html.Button(id='submit-button3',                
            children='Reset')
]),

])

@app.callback(
Output(component_id=‘table2’, component_property=‘children’),
[Input(component_id=‘submit-button2’, component_property=‘n_clicks’)],
[dash.dependencies.State(component_id=‘my-input’, component_property=‘value’)]
)
def update_output_div(n_clicks, value):
df= pd.read_csv(‘F.csv’)
dfa = df[(df[‘Sl’]==value)]
data = dfa.to_dict(‘records’)
columns = [{‘name’: i, ‘id’: i,} for i in (dfa.columns)]
return dt.DataTable(data=data, columns=columns)

@app.callback(Output(‘my-input’,‘values’),
[Input(‘submit-button3’,‘n_clicks’)])
def update(reset):

return {}

if name == ‘main’:
app.run_server(debug=False)

6

I figure this one out .