Edit dashtable by using dropdown

Dash Python
1

Hi all,

I want to filter the table by using the year dropdown filter. So e.g. if I choose ‘1957’ I only want to see the according rows. I already coded this but I have absolutely no clue how to build the dash table callback.

I would really appreciate some help after spending hours of searching for the right solution.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import dash_table as dt


import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
df = df.drop_duplicates(subset=None, keep='first', inplace=False)

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

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

app.layout = html.Div([
    dcc.Dropdown(
        id='year-dropdown-table',
        options=[{'label': i, 'value': i} for i in sorted(df['year'])],
        value=df['year'].min()
        ),
    dt.DataTable(
        id='year-table2',
        data=[{}],
        columns=[{'id': c, 'name': c} for c in df.columns],
    ),
    html.Div(id='year-table')
])


@app.callback(
    Output('year-table', 'children'),
    [Input('year-dropdown-table', 'value')])
def update_figure_drop(selected_year):

    if selected_year is None:
        tab = dt.DataTable(data=df, columns=[{'id': c, 'name': c} for c in df.columns])

    else:
        filtered_df = df[df.year == selected_year]
        tab = dt.DataTable(data=filtered_df, columns=[{'id': c, 'name': c} for c in filtered_df.columns])

    return tab

# server
if __name__ == '__main__':
    app.run_server(debug=True, port=8001)

Thanks a million!

Best regards
Lucie

2

Hi @lj025 and welcome to the Dash community :slight_smile:

You are so close! All you need to do is send the data to the year-table2 you have defined in the layout.
(And I made one more tweak: adding .unique() to the year selector so each year doesn’t show up multiple times in the dropdown list.)

Try this out:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import dash_table as dt


import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
df = df.drop_duplicates(subset=None, keep='first', inplace=False)

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

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

app.layout = html.Div([
    dcc.Dropdown(
        id='year-dropdown-table',
        options=[{'label': i, 'value': i} for i in sorted(df['year'].unique())],
        value=df['year'].min()
        ),
    dt.DataTable(
        id='year-table2',
        data=[{}],
        columns=[{'id': c, 'name': c} for c in df.columns],
    ),
    html.Div(id='year-table')
])


@app.callback(
    Output('year-table2', 'data'),
    [Input('year-dropdown-table', 'value')])
def update_figure_drop(selected_year):

    if selected_year is None:
        data=df.to_dict("records")

    else:
        filtered_df = df[df.year == selected_year]
        data=filtered_df.to_dict("records")

    return data

# server
if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes
3

Thanks sooo much! Its working :heart_eyes:

1 Like