Clearing datatable headers and accessing current value in dropdown in app.callback

Dash Python
1

Hi.
I’m new to Dash. I was trying to make sure the headers of my datatable are removed when my two dropdowns are empty so that no datatable appears when both of the dropdown options are not selected.
I am able to clear the information shown in the rows but not the headers.
In the code below, I have three column headers that are fixed so they always show up and one that is passed as a variable depending on what is selected in the ‘my-portfolio-dropdown’. I wrote the code this way because it seems that you can’t pass a list to populate column headers (I got the ‘unhashable error’).

Also, how can I access the value selected in a dropdown? Is there something like Dropdown.value? Also what datatype is assigned to the values selected in a dropdown?

@app.callback(
Output(‘content’, ‘children’),
[Input(‘my-ticker-dropdown’, ‘value’),
Input(‘my-portfolio-dropdown’,‘value’)])
def update_rows(selected_value, port_value):

xx = []
yy = ["A", "B", "C", port_value]
zz = []

if selected_value == "" and port_value == "":
    zz = xx
else:
    zz = yy
    
df2 = df1.loc[selected_value,zz]

return html.Div([
    html.Div(id='datatable output'),
    dash_table.DataTable(
        id = 'holdings-table',
        columns = [{"name":i, "id":i} for i in df2],
        data = df2.to_dict("rows"))
        ])
2

Here is a link to the online docs regarding dropdowns (https://dash.plot.ly/dash-core-components/dropdown) - but value is the current selected value; its return value is either a string or a list of strings.

Regarding, clearing the column headers, if you do the following it should work (passing " " vice i to name:

columns = [{"name":" ", "id":i} for i in df2
3

Doing this will not solve the issue because I need to clear the headers only when the dropdowns don’t have an option selected.

Actually I’m thinking about going a different route.

Basically I need an if statement that allows me to show nothing when both dropdowns don’t have an option selected. The first condition in the IF Statement in the code shown below doesn’t work. It seems that the value passed in the function are different than None even when there’s no option selected.

@app.callback(
Output(‘content’, ‘children’),
[Input(‘my-ticker-dropdown’, ‘value’),
Input(‘my-portfolio-dropdown’,‘value’)])
def update_rows(selected_value, port_value):

yy = ["Ticker", "Recommendation", "Rec Weight", port_value]
    
df2 = df1.loc[selected_value,yy]

if selected_value is None and port_value is None:

    return html.H1("WORKS!")
else:
    return html.Div([
        html.Div(id='datatable output'),
        dash_table.DataTable(
            id = 'holdings-table',
            columns = [{"name":i, "id":i} for i in df2],
            data = df2.to_dict("rows")
   ])
4

I actually was able to make the conditional statement work, just needed this:

if not selected_value and not port_value:
return html.Div()

5

Excellent! You can also use the display style parameter of a Html.Div to show/hide the entire div. More than one way to solve it…

style={'display': 'none'} # to hide the div and its content

style={ 'display' : 'block' } # to show the div and its contents