Filter DataTable from Input Value using Button

Dash Python
1

I have this app that uses pandas dataframe to show datatable.

I have input field and button. This is to be used to filter out the data.

However, I am keep running into this issue.

image

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
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.read_csv('file.csv')
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

PLOTLY_LOGO = r"plotly-logomark.png"


search_bar = dbc.Row(
    [
        dbc.Col(
            dbc.Input(
                id='input_vid',
                type="search", 
                placeholder="Search"
            )),
        dbc.Col(
            dbc.Button(
                "Search",
                id="button_search_vid", 
                color="primary", 
                className="ml-2"),
            width="auto",
        ),
    ],
    no_gutters=True,
    className="ml-auto flex-nowrap mt-3 mt-md-0",
    align="center",
)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(dbc.NavbarBrand("Unit Pedigree", className="ml-2")),
                ],
                align="center",
                no_gutters=True,
            ),
            href="#",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
    ],
    color="dark",
    dark=True,
)


app.layout =  html.Div([
    html.Div(
        navbar
    ),

    dbc.Container([
        html.Div(children='''
            Data Table
        '''),

        dash_table.DataTable(
            id='dt_pass_fail_summary',
            filter_action='native',
            sort_action="native",
            columns = [{'id': c, 'name': c} for c in df.columns],
            data = df.to_dict('records'),
            style_header={
                'backgroundColor': 'white',
                'fontWeight': 'bold'
            }
        )
    ])
]) 



@app.callback(
    [
        Output(component_id='dt_pass_fail_summary', component_property='data'),
        Output(component_id='dt_pass_fail_summary', component_property='columns')
    ],
    [
        Input(component_id='input_vid', component_property='value'),
        Input(component_id='button_search_vid', component_property='n_clicks')
    ]
)
def update_pass_fail_summary(value, n_clicks):
    
    if n_clicks!=None:
        df = pd.read_csv('file.csv')
        df_updated = df[df["Visual_ID"] == value]
        columns = [{'id': c, 'name': c} for c in df_updated.columns]
        data = df_updated.to_dict('records')
        return [data, columns]

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

Hi @ims and welcome to the Dash forum!

That error happens because when the app starts, n_clicks is None. The callback currently doesn’t handle that situation, so None is returned.

Try using PreventUpdate like in the first example here: https://dash.plotly.com/advanced-callbacks

1 Like
3

@AnnMarieW, Thank you for your response.

Changing if n_clicks!=None: to if n_clicks is None: fixed the issue.
Now, no DataTable shows when app launched. I have to enter the value in the input, and the DataTable shows the data. I don’t even have to hit ‘Search’ button.

However, what I actually want is to add the input value and hit the ‘Search’ button, and then the results are show.

4

Actually got it fixed.


if n_clicks is None:

        raise PreventUpdate
else:
        ... code....
5

Excellent! I was just about to reply with some sample code, but you were faster.
Glad it worked for you :grinning:

1 Like