Clearing filters in filter row of table not working

[shwetakinger]

I am entering filter queries with a separate input box. I see that I am able to successfully enter the query and it filters the table as expected. However, clearing the filter_query property on click of Clear Filter button does not remove text from the column filter.
In the below screenshot: Query is applied successfully.

After Clicking Clear Filters button - table is no longer filtered, but "eq Afghanistan" remains in column filter in table:

Here is the code:

app.layout = html.Div([

    dcc.RadioItems(
        id='filter-query-read-write',
        options=[
            {'label': 'Read filter_query', 'value': 'read'},
            {'label': 'Write to filter_query', 'value': 'write'}
        ],
        value='read'
    ),

    html.Br(),

    dcc.Input(id='filter-query-input', placeholder='Enter filter query'),

    html.Div(id='filter-query-output'),

    html.Hr(),
    html.Button("Clear Filters", id="clear"),
    dash_table.DataTable(
        id='datatable-advanced-filtering',
        columns=[
            {'name': i, 'id': i, 'deletable': True} for i in df.columns
            # omit the id column
            if i != 'id'
        ],
        data=df.to_dict('records'),
        editable=True,
        page_action='native',
        page_size=10,
        filter_action="native"
    ),
    html.Hr(),
    html.Div(id='datatable-query-structure', style={'whitespace': 'pre'})
])

@app.callback(
    Output('datatable-advanced-filtering', 'filter_query'),
    [Input('filter-query-input', 'value'), Input('clear', 'n_clicks')]
)
def write_query(query, clicks):
    if clicks != None and clicks > 0:
        return ''
    else:
        if query is None or query == '':
            return ''
        return query

I have seen the issue : #370. However, this issue pertains to specifically queries entered through an external input. (Clear filters button works fine for clearing filters applied by entering text in filter row of table)
Any suggestions on how to fix this issue will be greatly appreciated.

[Marc-Andre-Rivet]

Looks like the issue is specific to clearing / emptying the filter. Changing the filter for another valid / not empty one updates correctly.

[amitsh1]

workaround:
if you have a column that is not necessary for filtering you can use it to clear all columns by hiding it and then filling it with a valid, non filtering filter (such as {MAPS} !="some impossible value")

css:
th.dash-filter.column-1.last-of-type[data-dash-column="MAPS"] > input[type=text] {
display: none;

}

th.dash-filter.column-1[data-dash-column="MAPS"] > input[type=text] {
display: none;

}

[NonStopAggroPop]

Hi, is there an update to this issue?

Or at least I would appreciate additional input on the workaround. I have tried to put a dummy_column in "hidden_columns" when setting up the table. But then, in the callback I cannot set the filter query for "{hidden_column} != IMPOSSIBLE_VALUE", since for dash this column does not exist.

And for @amitsh1 suggestion, I was not able to hide the column via css (which I admit, never really was comfortable dealing with). Do I just put those two commands into the base-styles.css? And what does the th in the beginng stand for?
Thanks a lot for the help!

[jborman-exos]

@NonStopAggroPop this dash-table repo is unmaintained. I've opened an issue in the new repo here

[mz09code]

Hey, i had the same issues and i found this:
#370 (comment).
It works for me. Help it's helpful.