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
extended-salmon•3y 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.
extended-salmon•3y ago
setFilters can be used in 3 different ways, each has an example in the doc above
Hope this helpswise-whiteOP•3y ago
Hey @aliemirs, while implementing setFilters as mentioned in docs. I get these error. Is there something wrong that I am doing?
wise-whiteOP•3y 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.extended-salmon•3y 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 possiblewise-whiteOP•3y ago
Thank you @aliemirs for your help. It's working now.
extended-salmon•3y ago
Thank you as well for the PR 🚀
wise-whiteOP•3y 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.extended-salmon•3y 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