How to use `setFilters` from useTable for custom filter buttons?
I I am trying to create a button that can increment or decrement a date value as shown on the screenshot. But I am confused with how can I use the
setFilters
from useTable
hook is there any example code for a reference?
What I want to achieve is whenever user clicks left or right button date should be changed accordingly and update it on the filters date value above and query based on new date.9 Replies
metropolitan-bronze•2y ago
Hey @dipbazz check out the code samples from this doc https://refine.dev/docs/api-reference/core/hooks/useTable/#filtering
useTable | refine
useTable allows us to fetch data according to the sorter state, the filter state and the pagination states.
metropolitan-bronze•2y ago
setFilters
can be used in 3 different ways, each has an example in the doc above
Hope this helpsxenial-blackOP•2y ago
Hey @aliemirs, while implementing setFilters as mentioned in docs. I get these error. Is there something wrong that I am doing?
xenial-blackOP•2y ago
And also there is typo in the docs. In some example it is used as
setFilter
and in some it is used as setFilters
.metropolitan-bronze•2y ago
Sorry for the typos 🤦♂️ About the
field
error, CrudFilter
type is a union of LogicalFilter
and ConditionalFilter
. ConditionalFilter
type is the allows or
and and
operators and does not accept field
as a property 😅
To get rid of the error 'field' in item && item.field === 'date'
should do the trick 🚀
Sorry for the trouble, we'll try to update the docs as soon as possiblexenial-blackOP•2y ago
Thank you @aliemirs for your help. It's working now.
metropolitan-bronze•2y ago
Thank you as well for the PR 🚀
xenial-blackOP•2y ago
Is there a way to update the form fields on filters change? I am using
searchFormProps?.form?.setFieldValue('date', newDate)
to update the filter fields.metropolitan-bronze•2y ago
Yeah that's the way to update them. My advice is to do this in the same place with
setFilters
calls but if you're unable to do that, you can use onChange
of the <Table>
(if you use this, don't forget to call tableProps.onChange
too because refine also sends a callback onChange
in tableProps
) Or you can use filters
value in an effect, returned from the useTable
hook