Dash DataTable not showing the data

Dash Python
1

Hello,
I’m a newbie at Dash and would certainly appreciate some help.

I have a dash_bootstrap_component, dbc.Tab, where I want to display a dash_table.Datatable.
I have 3 columns to display and only 3 rows pf data. I’m creating the dash_table in a callback and trying to update the html.Div().

PROBLEM: the table is rendered with the column headings but the data itself is not. I’ve tried every combination of data=, but data simply doesn’t show. Here’s my code:

# Layout
tab_time_content = dbc.Card(
    dbc.CardBody(
        [
            html.Div(id='time-table'),
            html.P(id='tab-time-exec'),
        ]
    ),
    color='dark',
    inverse=True,
    outline=False,
)


# Callback
@app.callback(

    Output('time-table', 'children'),

    [Input('submit-button', 'n_clicks')],
    [
        State('city-dropdown', 'value'),
        State('filter-dropdown', 'value'),
        State('month-dropdown', 'value'),
        State('weekday-dropdown', 'value'),
    ],
    prevent_initial_call=True
)
def get_user_input(n_clicks, city, data_filter, month, weekday):
    if n_clicks is None:
        raise dash.exceptions.PreventUpdate
    else:
        # Reset month and weekday to 'none' if data_filter is 'none'
        if data_filter == 'none':
            month = 'none'
            weekday = 'none'
        # Load global data frame
        try:
            bk.DF = bk.load_data(city, month, weekday)

            # Get Time tab contents
            rdf, time_text = bk.time_stats(bk.DF)
            print(rdf)
            #print(rdf.to_dict('records'))

            # Create a datatable
            testdata = [{'Metric': 'Most common month', 'Result': 'June', 'Count': 98081}, {'Metric': 'Most common weekday', 'Result': 'Tuesday', 'Count': 45912}, {'Metric': 'Most common hour', 'Result': 17, 'Count': 35992}]
            print(list(rdf.to_dict("index").values()))
            dtable = dash_table.DataTable(
                id='time',
                columns=[{'name': 'Metric', 'id': 'tim-col1'},
                        {'name': 'Result', 'id': 'tim-col2'},
                        {'name': 'Count', 'id': 'tim-col3'}
                ],
                data=testdata,
                style_cell={'color': 'blue'}
            )
            return dtable

Thanks in advance!

2

Hello and welcome to the Dash Community.

The keys of each item in data should match the column IDs.

Like this :

columns=[{'name': 'Metric', 'id': 'Metric'},
                        {'name': 'Result', 'id': 'Result'},
                        {'name': 'Count', 'id': 'Count'}
                ],
3

Thanks so much! It worked.

1 Like