9 Replies
Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useList
hook in Refine supports the filtering feature. You can pass the filters
property to enable filtering. The useList
hook passes the filters
property to the getList
method from the dataProvider
to handle filtering. Dynamically changing the filters
property will trigger a new request.
Here is an example of how to use the filters
property with the useList
hook:
In this example, the useList
hook is used to fetch a list of products filtered by the material type. The filters
property is an array of filter objects, each specifying a field
, operator
, and value
for the filter condition. The useState
hook is used to manage the selected material type, and changing the selected material triggers a new request with the updated filter.
For more information, you can refer to the useList documentation (https://refine.dev/docs/data/hooks/use-list).
However, if you want to handle client-side filtering, you might want to consider using the useTable
hook with filters.mode: "off"
. This will disable server-side filtering and allow you to handle filtering on the client side. You can find more information about this in the useTable documentation (https://refine.dev/docs/data/hooks/use-table#how-can-i-handle-client-side-filtering).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon•8mo ago
@kapa.ai how do i do client side filtering with the useList hook
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useList
hook in Refine is designed to fetch data from the server and doesn't directly support client-side filtering. It fetches data according to the sorter, filter, and pagination states and passes these states to the getList
method from the dataProvider
to handle filtering, sorting, and pagination on the server-side.
If you want to perform client-side filtering, you would need to fetch all the data first and then use JavaScript's array methods to filter the data on the client-side. However, please note that this approach is not recommended for large datasets as it could lead to performance issues.
Here's a basic example of how you could do this:
In this example, useList
is used to fetch all posts, and then JavaScript's filter
method is used to filter the posts on the client-side.
For more complex scenarios or for large datasets, you might want to consider using the useTable
hook with filters.mode: "off"
. This will disable server-side filtering and allow you to handle filtering on the client side. You can find more information about this in the useTable documentation (https://refine.dev/docs/data/hooks/use-table#how-can-i-handle-client-side-filtering).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon•8mo ago
@kapa.ai so its not possibly nativly in the hook itself
Let me check the knowledge base for you. One moment! :books:
----------------------
Correct, the
useList
hook in Refine is designed for server-side operations and does not natively support client-side filtering. It's designed to work with a dataProvider
to fetch data from a server, and it passes filter, sort, and pagination parameters to the server for handling.
If you want to perform client-side filtering, you would need to fetch all the data first and then use JavaScript's array methods to filter the data on the client-side. However, this approach is not recommended for large datasets due to potential performance issues.
For more complex scenarios or for large datasets, you might want to consider using the useTable
hook with filters.mode: "off"
. This will disable server-side filtering and allow you to handle filtering on the client side. You can find more information about this in the useTable documentation (https://refine.dev/docs/data/hooks/use-table#how-can-i-handle-client-side-filtering).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
inland-turquoise•7mo ago
Hello @Joe Gaffney please check our documentation https://refine.dev/docs/data/hooks/use-list/#mode
useList | Refine
useList is an extended version of TanStack Query's useQuery that supports all of its features and also adds some more.