Filtering rows in dash table

Dash Python
1

Hi everyone, I am preparing a dash where I have to put filters in columns. this is my code. The filter is coming in the table but the table is not getting filtered. Kinldy help.

html.Div([
                                          dash_table.DataTable(
                                                  id='datatable-filtering-fe',
                                                  
                                                  columns=[{'id': c, 'name':c, "deletable": True} for c in columns],
                                                  data=df.to_dict('records'),
                                                  filtering="native",
                                                  n_fixed_rows = 1,
                                                  style_cell={'width': '150px', 'textAlign': 'center'},
                                                  
                                                  style_table={'overflowX': 'auto','overflowY':'auto','maxHeight': '400px','minwidth':'100%','font-family':'Calibri'},
                                                  style_header={
                                                            'backgroundColor':  'rgb(52,98,145)',
            #                                                    'fontWeight': 'bold',
                                                            'textAlign':'center',
                                                            'color':'white',
                                                            'font-family':'Calibri'
            
                                                                },
                                                
                                                  ), html.Div(id='datatable-filter-container'),
                                          ],style={'width':'100%','height':'10%','display':'block','backgroundColor':'#E7E6E5'})

Unlike the example shown here-
https://dash.plot.ly/datatable/filtering

I am not putting the datatable in app layout but in the function below callback. There are multiple html.Div in the function. How will this callback get to know which html.Div to call ?

@app.callback(
    Output('datatable-filter-container', "children"),
    [Input('datatable-filtering-fe', "data")])
def update_graph(rows):
    if rows is None:
        dff = df
    else:
        dff = pd.DataFrame(rows)
2

Hi @ajeeteshmishra, the callback in the example you’re mentioning is not doing anything, it’s just to show that you can listen to filtering events and trigger callbacks. You do need to define the datatable in the layout of your app though. I would just remove the callback and define the table in the layout.

1 Like
3

Thank you @Emmanuelle