Resetting table with button

Dash Python
1

I have a table on my dashboard that by default in not loaded when the dashboard is refreshed. After input is provided, the table populates. I added a button to reset a dropdown filter that is used to populate this table. The button works to reset the drop down, but when I try to apply it to the table it won’t populate at all, though I can tell that the reset button is attempting to do something to the table. The table populates fine if I remove the reset filter code from the callback.

import dash_ag_grid as dag
#import dash_table
from dash import dash_table
import dash
from dash.dependencies import Input, Output,State
from dash import dcc
from dash import html
import plotly.express as px
import dash_bootstrap_components as dbc
import flask
import pandas as pd
import time
import os
import pandas as pd
import plotly.express as px
from plotly import graph_objects as go

tables = ["item"]
pdn_data = {"1234":{"item":pd.DataFrame({"Column1":[1,2,3,4],"Column2":[5,6,7,8]})}}

app = dash.Dash('app', server=server,external_stylesheets=[dbc.themes.SOLAR], url_base_pathname='/driver-proxy/o/0/0927-153023-a9142vm9/8801/')

app.layout = html.Div(children=[
    # All elements from the top of the page

     html.H1("My PDN KPI Finder", style={"color": "white"}),
     html.H1(id='workload-name', style={"color": "white"}) ,
    dcc.Input(
        id='pdn-input',
        type='text',
        placeholder='Enter a PDN',
        value=''
    ),
   
        
   

 html.Label("Select a table:", style={"color": "white"}),
    dcc.Dropdown(
        id='table-dropdown',
        options=tables,
        value=None, # Start with no nutrient selected, or choose a default like 'calories'
        placeholder="Select a table",
        clearable=False # If you want the user to always have one selected after first choice
        , style={"color": "black"}
    ),
    html.Div(
                id="table-container",
                className="table-container",
                children=[
                    html.Div(
                        id="table-upper",
                        children=[
                            html.P("PDN Data", style={"color": "white"}),
                            dcc.Loading(children=html.Div(id='pdn-container')),
                        ],
                    )
                        ],
                    ),
              dbc.Button(
        id='reset-button',
        children="Reset Tables",
        color="secondary",
        className="ms-2",
        n_clicks=0,
        href="",
        target="_blank"
              )
   
])

@app.callback(
    Output('pdn-container','value'),
    [Input('reset-button', 'n_clicks'),
    Input('pdn-input','value'),
    Input('table-dropdown','value')],
    [State('pdn-input','value'),
    State('table-dropdown', 'value')]
   # New input
    
)
def update_pdn_datatable(n_clicks,pdn_input, table_name):
  
  pdn_df = pdn_data[pdn_input][table_name]     
  data = pdn_df.to_dict("rows")
  if n_clicks > 0:
    return None
 
  return dag.AgGrid(
    rowData=pdn_df.to_dict("records"),
    columnDefs=[{"field": i} for i in pdn_df.columns],
  )
@app.callback(
    Output('table-dropdown', 'value'),
    Input('reset-button', 'n_clicks'),
    State('table-dropdown', 'value')
)
def reset_filters(n_clicks, table_name):
    if n_clicks > 0:
        # Reset to default values
        return None 
    return table_name 
if __name__ == '__main__':
    # Define run_server port with internal port value from setup.sh
    app.run(port=8050)
2

I’m not sure exactly what you are looking for since this is not a complete minimal example, but in your callback, after the reset button is clicked the first time, it always will return None. I that what you want to happen?

3

When input is provided, the table populates with the matching data. But then when the reset button is clicked, the filters clear which also clears the table. Then a new dropdown can be selected, repopulating the table based on the new selection.

Editted OP. Hopefully that’s enough detail.

4

Did you run your posted example? I got a bunch of errors

5

Try it now. You will probably just need your own URL.

6

Be sure to run it with debug=True These bugs might be the problem

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

image
image1262×452 25.1 KB

7

When I run with debug = True I end up with errors. I think it has to do with the environment that I’m in.

8

The errors correctly point out things that are wrong with the callbacks. For example you are using value as the prop name for the html.Div in stead of children, and wrong number of callback arguments based on the Input s and State s

1 Like