stormy-gold•2y 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.

9 Replies

conscious-sapphire•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.

conscious-sapphire•2y ago

setFilters can be used in 3 different ways, each has an example in the doc above Hope this helps

stormy-gold•2y ago

Hey @aliemirs, while implementing setFilters as mentioned in docs. I get these error. Is there something wrong that I am doing?

stormy-gold•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.

conscious-sapphire•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 possible

stormy-gold•2y ago

Thank you @aliemirs for your help. It's working now.

conscious-sapphire•2y ago

Thank you as well for the PR 🚀

stormy-gold•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.

conscious-sapphire•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