Display data Table after Filtering rows from Dropdown list in dash.

I’m new to Dash. I would like to make a app, where I can select values from dropdown filter, filter dataset and display the data table. I’m using dash table.

My example app code is below. No data table is shown. Does anyone know what I did wrong?

How can I render dash table in dash app?

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_table as dt
from dash.dependencies import Input, Output
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)



states = df.State.unique().tolist()

app.layout = html.Div(
    children=[
    dcc.Dropdown(
            id='filter_dropdown',
            options=[{'label':st, 'value':st} for st in states],
            value = states[0]
            ),
    dt.DataTable(id='table-container') ]
)

@app.callback(
    Output('table-container', 'data'),
    [Input('filter_dropdown', 'value') ] )
def display_table(state):
    dff = df[df.State==state]
    return dff

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

You have to set the columns of your data table and return your dataframe as a dict in a special form. So change these two lines in your code to make it work.

dt.DataTable(id='table-container', columns=[{'id': c, 'name': c} for c in df.columns.values])

return dff.to_dict('records')

This Post Has One Comment

  1. Malki Nama

    This component was written from scratch in React.js specifically for the Dash community. Its API was designed to be ergonomic and its behavior is completely customizable through its properties. Data Table is rendered with standard, semantic HTML markup, which makes it accessible, responsive, and easy to style.

    For production Dash applications, Data Table is intended to base used with Python data pipelines for ingesting the table data and Design Kit for Data Table styling.

Leave a Reply