Clearing Filters in a DataTable


#1

Is it possible to programmatically clear the filters in DataTable, including the text that the user typed that is displayed in the inputs of the filtering UI?

I would like to be able to write a callback function so that I could, for example, offer a Reset Filters button so that the the user doesn’t have to clear each filter individually to return to an unfiltered view of the data. There are also other cases in which it may be useful to clear all filters programmatically.

I did not find anything in the reference that I could target that would clear the inputs in the filtering UI.

Please let me know what you would suggest.

Thank you.


#2

@terrazzo The filtering_settings prop is the holder of the information as to what filter is applied to the table. The by-column filters are a “view” unto that prop. Modifying the prop will modify the by-column filters.

app.layout = html.Div(children=[
  html.Button(id="clear-filter"),
  DataTable(id="my-table", ...)
]) 

@app.callback(
  Output("my-table", "filtering_settings"),
  [Input("clear-filter", "n_clicks")]
)
def resetFilter(n_clicks):
  if n_clicks is not None:
    return ""

Two things to note:

  1. The filtering_settings prop has more flexibility in terms of query definition than what’s provided by the by-column filters, so it’s possible to write a query that does not translate to a by-column filter.
  2. We are considering extensive changes to this “prototype” implementation which may impact this relationship between the filter and the UI. You can follow https://github.com/plotly/dash-table/issues/169 to know what’s happening.

Hope this helps!


#3

Thank you, Marc-Andre. I appreciate the explanation and example.

However, this does not seem to clear the text displayed in the filter row of the data table. Although the callback causes the table to stop applying the filters and show the unfiltered data, the filter row of the table continues to show whatever the user typed in the row of filters. This is an inconsistent result because what is shown in the filter row suggests that filters are being applied, but the data below the filter row has not been filtered.

I would like a way to both stop applying the filters and remove the expressions that the user entered in the filter row at the same time. I haven’t found any way to remove what the user has typed in the filter row.

Please let me know whether this is possible or if I need to clarify something.

Thanks again.


#4

@terrazzo Apologies, I provided the answer without testing it out to make sure it actually worked. Confirming the behavior you are seeing and opened an issue for it in the table repo.


#5

Thank you for opening an issue for this. I appreciate it.