Dash-table together with dcc dropdown for filtering

Dash Python
1

Hello Dash Community,

I’ve just found this great framework, thank you so much for putting all this work into it. It’s really nice.

With filtering=True, frontend and backend filtering by things like eq ‘smth’ work great.
I’d like to have a dropdown with pre-determined values (based on all unique values available for that column, sort of like in Excel ‘sort’). I see the look that I am looking for is available in dcc.Dropdown.

So while each column dropdown values would be simply unique values out of that column and I could make a callback to filter by that with something like dff = df[df[‘column’].isin(values) - I am not sure how would I need to hook into the automatically generated dash-table to populate the filter field with the dropdown instead of being a free text field like it is by default with filtering = True.

This newbie sincerely thanks you.
Eid

1 Like
2

I just created an external filter that filters columns based on the type of the data in that columns. One of the cases, is having categorical data, which would work the way you want. It also works for other types, like numeric, datetime, boolean.

Here is a link to the code, as well as a short video showing how it works.

Hope this helps!

3

Hey,
Can you help me I’m working on dashboard
the thing is I’m not getting any errors in my code its running smoothly but when it comes to the output it doesn’t give me one the Dash web is blank if you could help me out I would be very grateful

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
app.layout=html.Div([
    html.Div([
        html.Div([
        html.H1('Arasmeta')
        ]
        ),
            #  Dropdown

        html.Div([

            html.Div('Site', className='three columns'),
            html.Div(dcc.Dropdown(id='site',
                                      options=[{'label':i, 'value' : i} for i in df['Site'].unique()]),
                         className='nine columns')
        ]
        ),

        html.Div([
            html.Div('Department', className='three columns'),
            html.Div(dcc.Dropdown(id='dept'),
                         className='nine columns')
        ]
        ),

            #  Dropdown
        html.Div([
            html.Div('Equipment Name', className='three columns'),
            html.Div(dcc.Dropdown(id='eqname'),
                         className='nine columns')
        ]
        ),

            # Dropdown
        html.Div([
            html.Div('Equipment ID', className='four columns'),
            html.Div(dcc.Dropdown(id='edid'),
                         className='twelve columns')
        ]
        ),
    ], 
        className='six columns'),
 # Empty

    html.Div([
        html.Div(className='six columns')
        
    ],
        className='twleve columns'),
     # Match Results Grid


    html.Div([
        html.Div(
            dte.DataTable(id='Table_result', 
                          columns=[{"name": i, "id": i, 'deletable': True} for i in dt_columns],
                          editable=True,
                          row_selectable="multi",
                          selected_row_indices=[0],
                         ),
            className='six columns'
        ),
        
# Table and Graph
        html.Div([
            # summary table
            dcc.Graph(id='graph')
            # style={},
        ], 
            className='six columns'),
    ]
    ),
    
]
)
# Load in Dropdown
@app.callback(
    Output(component_id='dept', component_property='options'),
    [
        Input(component_id='site', component_property='value')
    ]
)
def update_department(d):
    df1=df[df['Site']==d]
    dpt = [{'label':i, 'value' : i} for i in df1['Department '].unique()]
    return dpt
#Load in Dropdown

@app.callback(
    Output(component_id='eqname', component_property='options'),
    [
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqnme(e,s):
    df1=df[df['Site']==s]
    df2=df1[df1['Department ']==e]
    en = [{'label':i, 'value' : i} for i in df2['Equipment Name'].unique()]
    return en

@app.callback(
    Output(component_id='edid', component_property='options'),
    [
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqid(e,s,z):
    df1=df[df['Site']==z]
    df2=df1[df1['Department ']==s]
    df3=df2[df2['Equipment Name']==e]
    sn = [{'label':i, 'value' : i} for i in df3['Equipment ID'].unique()]
    return sn

@app.callback(
    Output(component_id='Table_result',component_property="columns"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def column_table_data(q,w,e,r):
    df1=df[df['Site']==q]
    df2=df1[df1['Department ']==w]
    df3=df2[df2['Equipment Name']==e]
    df4=df3[df3['Equipment ID']==r]
    df=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
       'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    column = [{"name": i, "id": i} for i in df.columns]
    return column

@app.callback(
    Output(component_id='Table_result',component_property="row_selectable"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)

def load_table_data(p,q,r,s):
    df1=df[df['Site']==p]
    df2=df1[df1['Department ']==q]
    df3=df2[df2['Equipment Name']==r]
    df4=df3[df3['Equipment ID']==s]
    df5=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
       'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    return df.to_dict('records')

@app.callback(
    Output(component_id='graph',component_property="figure"),
    [
        Input(component_id='Table_result',component_property="row_selectable"),
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]

)
def load_graph(a,b,c,d,rows):
    df1=df[df['Site']==a]
    df2=df1[df1['Department ']==b]
    df3=df2[df2['Equipment Name']==c]
    df4=df3[df3['Equipment ID']==d]
    dff = pd.DataFrame(rows)
    return {
        'data': [{
            'x': df['Date'],
            'y': df[['STOCK']].mean(axis=1),
            'text': df['Equipment Name'],
            'type': 'bar'
        }
        ]
        
    }
```   please help