How to reset column filters in PrimeReact Datatable?

Question

I am trying to figure out how to create a button to reset the column filters in PrimeReact Datatable. I am able to click the button and have the sorting be rest on the table, but the value in the column sort filed remains. How do I reset the value too?

I've tried a ton of things, below is the latest attempt...

const resetFilters = () => {
    console.log('filters', dt.current.getFilters());
    let filters = dt.current.getFilters()
    for (const filter in filters){
        dt.current.filters = filters[filter].value = '';
    }
    dt.current.reset();
}

The '3' is not cleared out when dt.current.reset() resets the table filter.

Pavan Pavan · Accepted Answer · 2021-03-30T14:07:33

I think you would easily enable\disable the filter on columns by controlling the filter property. You can use the state variable for this filter property and toggle that boolean state variable when button clicked. In that way even filters gets hidden for the column when filter=false

 const [filterEnabled, setFilterEnabled] = useState(true)

 <Column field="personId" header="PersonID" filter={fiterEnabled} />

// And call setFilterEnabled(false) when button is clicked to reset\disable the filters

How to reset column filters in PrimeReact Datatable?

1 Answers