[FIXED] Dynamically updating dash table return empty rows

Issue

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)

Solution

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"}],

Answered By - coralvanda