Display a data frame table using a filter input to filter rows

Question

I would like to display a drop down selector and underneath a data frame displayed as a table and filtered on the drop down selection.

Example code:

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

# example df
df = pd.DataFrame({'numbers': [1, 2, 3], 'letters': ['A', 'B', 'C']})

# App layout
app = dash.Dash(__name__, prevent_initial_callbacks=True, suppress_callback_exceptions=True)
app.layout = html.Div([
    dcc.Dropdown(
        id='demo-dropdown',
        options=[
            {'label': 'A', 'value': 1},
            {'label': 'B', 'value': 2},
            {'label': 'C', 'value': 3}
        ],
        value=1
    ),
    html.Div(id='dd-output-container'),

    # want this df to print out underneath the filter
    dash_table.DataTable(id='df')
])

@app.callback(
    dash.dependencies.Output('dd-output-container', 'children'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_output(value):
    return df[df['letters']=='what do I put here to print out the filtered df?']

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

I'm struggling in two areas related to my goal:

Is the gist of line dash_table.DataTable(id='df') correct if I want to display a dataframe here? I tried making it static to just show anything but failed.
The line return df[df['letters']=='what do I put here to print out the filtered df?'] hopefully illustrates what I'm trying to do?

Using this example, how can I display a drop down menu and a table where the table is filtered based on the drop down selection?

When I try the above block I get error:

dash.exceptions.InvalidCallbackReturnValue: The callback for <Output dd-output-container.children> returned a value having type DataFrame which is not JSON serializable.

The value in question is either the only value returned, or is in the top level of the returned list,

and has string representation Empty DataFrame Columns: [numbers, letters] Index: []

In general, Dash properties can only be dash components, strings, dictionaries, numbers, None, or lists of those.

r-beginners · Accepted Answer · 2021-02-08 04:23:50Z

The return value of the drop-down is an integer, so it will be the 'number' column of the data frame. Also, the table in Dash is in dict format, so it needs to be converted.

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

# example df
df = pd.DataFrame({'numbers': [1, 2, 3], 'letters': ['A', 'B', 'C']})

# App layout
app = dash.Dash(__name__, prevent_initial_callbacks=True, suppress_callback_exceptions=True)

app.layout = html.Div(children=[
    dcc.Dropdown(
        id='demo-dropdown',
        options=[
            {'label': 'A', 'value': 1},
            {'label': 'B', 'value': 2},
            {'label': 'C', 'value': 3}
        ],
        value=1
    ),
    dash_table.DataTable(id='dd-output-container',
                         data=df.to_dict('records'),
                         columns=[{'id': c, 'name': c} for c in df.columns.values]) #  
])
@app.callback(
    dash.dependencies.Output('dd-output-container', 'data'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_output(value):
    dfs = df.loc[df['numbers'] == value]
    return dfs.to_dict('records') 

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

Collectives™ on Stack Overflow

Display a data frame table using a filter input to filter rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related