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