xenial-black
xenial-black2y ago

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.
No description
9 Replies
metropolitan-bronze
metropolitan-bronze2y 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
metropolitan-bronze2y ago
setFilters can be used in 3 different ways, each has an example in the doc above Hope this helps
xenial-black
xenial-blackOP2y ago
Hey @aliemirs, while implementing setFilters as mentioned in docs. I get these error. Is there something wrong that I am doing?
No description
xenial-black
xenial-blackOP2y 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
metropolitan-bronze2y 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 possible
xenial-black
xenial-blackOP2y ago
Thank you @aliemirs for your help. It's working now.
metropolitan-bronze
metropolitan-bronze2y ago
Thank you as well for the PR 🚀
xenial-black
xenial-blackOP2y 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
metropolitan-bronze2y 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