Trigger cleanFilter from Dash callback

[Flavio Camarrone]

Hi @pjaol!

I am still playing around with your cool extension :)
Is it possible to clean the filter boxes in the column headers manually from a dash callback?

[patrick oleary]

There's a clearFilterButtonType that creates a button that gives you the manual ability to clear the filters.
check out the example that puts a button with Clear Filters at the top of the table.

# clearFilterButtonType
# takes 
#       css     => class names
#       text    => Text on the button
clearFilterButtonType = {"css": "btn btn-outline-dark", "text":"Clear Filters"}

Clearing the filters from a call back could be done depending on the call back, but you might find it hard to get the right end user experience.
http://tabulator.info/docs/4.5/filter#manage
When you call tabulator.clearFilter(), it clears the filters and resets the data.

Let me give you a use case - say you have a public kiosk, where people are searching and you want to reset the page after 60 seconds.

Identify the callback you want to trigger http://tabulator.info/docs/4.5/callbacks Maybe dataLoaded or dataFiltered
Use the javascript function registrations from https://github.com/preftech/dash-tabulator#javascript

Create a function that calls a call back in 60 seconds after the data is loaded
(this code is completely sudo, so probably won't work)

file: assets/custom_tab.js

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
        resetFiltersIn60 : function (filters, rows, table) { //based on dataFiltered function(filters, rows)
                            setTimeout(()=> {table.clearFilters()}, 60000);
                         }
        }
});

Then in your python code

from dash_extensions.javascript import Namespace
...
ns = Namespace("MyNamespace", "tabulator")
...
options = { dataFiltered : ns("resetFiltersIn60")}  #connect dataFiltered to resetFiltersIn60

Then 60 seconds after a user filters their content the filters clear and data resets.

There's probably other ways like creating event listeners on other outputs that onChange doX(), or setting booleans of shouldClear=true / false and using that combined with the above logic.

But this is the simplest way I can't think of using the existing framework.

[patrick oleary]

closing due to lack of feedback

[Sudheer Moguluri]

Hi @pjaol , dash-tabulator is great work, Thanks a lot. But i am facing this same issue and I tried to follow your approach and added the below code. But still the Header filters are not cleared on callbacks.

Please look at my below code and suggest any corrections are requried for it to work. Thanks in Advance.

JS code:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        clear_filters: function(filters, rows,table) {
            console.log(table);
            table.clearFilter(true);
            table.clearHeaderFilter(true);
            console.log(filters);
            console.log("Clear filters clicked");
        }
    }
});

Python Code:

options = {"pagination": "local","paginationSize":20,"clearHeaderFilter":"true",
               # "initialFilter":[],
               "dataFiltered": ns("clear_filters"),
               # "initialHeaderFilter": [],
               # "clearFilter":"true",
               "movableColumns":"false",
               "layout":"fitColumns",
               "downloadConfig":{"downloadRowRange":"all", "columnHeaders":"true"}}

[patrick oleary]

Hi @SudheerRaghu can you give me a full example? Maybe a gist or a temp repo so I can replicate it?

[Sudheer Moguluri]

Hi @pjaol , Please repo URL below. I have added most of the code how my application works. Please let me know if you face any issues running this app. Thanks.

https://github.com/SudheerRaghu/dash-tabulator

[patrick oleary]

Sudheer it looks like it's working - what issue are you facing and are you sure it's not a browser version issue?

[Sudheer Moguluri]

Hi @pjaol , clear filters button is working. But i need the header filters need to be cleared automatically whenever there is a callback or table refresh.

Example scenario would be first you filter the table, then again click on the chart which filters the table using callback. Now issur is that previous header filters are retained.

[patrick oleary]

Ok I think I understand

From what I'm seeing you are using the wrong callback
Change from dataFiltered to dataLoaded
e.g.

 # "dataFiltered": ns("clear_filters") ,
"dataLoaded" : ns("clear_filters") ,

That will at least get triggered when the sun burst chart is clicked
The full list of callbacks is https://github.com/ngduc/react-tabulator/blob/master/src/ConfigUtils.tsx

You'll need to play around with then that should trigger as the data gets loaded at the start and also when it's changed
I don't believe it's called when filtered by the headers though