Dynamically updating dash table return empty rows

Question

I made this small dashboard and I wanted to test a dynamically updating “results table” at the end of the page. I created these test lines to see how i can update it, but it seems to not update correctly. It shows two additional rows in the output table but it doesnt show any values. When printing out the df the correct values are shown.

It would be great if you can help me.

Cheers, Mjst


button_berechnen = html.Div([
    dbc.Row([
        dcc.Input(
            id="input_marge",
            placeholder= 'marge in 1XX% i.e. 1.4'),
        html.Button('Berechnen', id ='submit-marge', n_clicks = 0),
    ]),
])
#output tabelle
output_table = html.Div([
    dash_table.DataTable(
    id = 'output_table',
    columns = [ {'name' : 'Index', 'id': "index"},
                {'name' : 'Produkt', 'id':"produkt"},
                {'name' : 'Ebay', 'id':"ebay"},
                {'name' : 'Amazon', 'id':"amazon"},
                {'name' : 'Real', 'id':"real"},
                {'name' : 'Webshop', 'id':"webshop"}],
    style_cell = {
        'backgroundColor': 'rgb(50,50,50)',
        'color': 'white'

    },
    editable = True
    )
])

app.layout = dbc.Container([
    button_berechnen,
    output_table,

])


@app.callback(Output('output_table', 'data'),
            Input('submit-marge', 'n_clicks'),
            #Input('produkt_daten', 'data'),
            State('input_marge', 'value'))
#berechnen des output tables
def rows_berechnen(n_clicks, marge):
    if n_clicks >0 :
        df_preise = pd.DataFrame(columns = {'Produkt', 'Ebay', 'Amazon', 'Real', 'Webshop'})
        test = {'Produkt' : 'marge', 'Ebay': marge, 'Amazon': marge, 'Real': marge, 'Webshop': marge}
        test2 = {'Produkt' : 'marge', 'Ebay': marge, 'Amazon': marge, 'Real': marge, 'Webshop': marge}
        df_preise = df_preise.append(test, ignore_index=True)
        df_preise = df_preise.append(test2, ignore_index=True)

        print(df_preise)
        df = df_preise.to_dict(orient ='records')
        return df
    raise PreventUpdate



if __name__ == '__main__':
    app.run_server(debug=True)

coralvanda · Accepted Answer · 2021-02-09 23:53:45Z

2

Try setting data=[] in the layout when you define the data table. Sometimes Dash has an issue with properties that haven't been explicitly set.

Edit: The problem was coming from the way columns was defined. I changed it to this, and it worked:

columns=[{'name': 'Index', 'id': "Index"},
                 {'name': 'Produkt', 'id': "Produkt"},
                 {'name': 'Ebay', 'id': "Ebay"},
                 {'name': 'Amazon', 'id': "Amazon"},
                 {'name': 'Real', 'id': "Real"},
                 {'name': 'Webshop', 'id': "Webshop"}],

edited Feb 9, 2021 at 23:53

answered Feb 9, 2021 at 1:15

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

No-Plate Over a year ago

Unfortunately that didnt fix the issue.

coralvanda Over a year ago

I found it. Updated answer for you.

No-Plate Over a year ago

Thank you now it indeed works. So i guess the dash column ID has to match the column name that you give the df in your callback. Good to know! Thanks again :)

coralvanda Over a year ago

Glad to help. If this answer has fully addressed your question, please click the check to mark it as accepted.

mattgcf · Accepted Answer · 2022-05-18 19:33:33Z

0

Has anyone tried to have a dynamic table with user inputs for simple arithmetic?

4 = cell[1][1] ; 5 = cell [1][2] ; cell[1][1]+cell[1][2] = cell [1][3]

answered May 18, 2022 at 19:33

mattgcf

331 silver badge6 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Dynamically updating dash table return empty rows

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest