---------------------- 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: ```jsx import { useState } from "react"; import { useList, HttpError } from "@refinedev/core"; interface IProduct { id: number; name: string; material: string; } const ProductList: React.FC = () => { const [value, setValue] = useState("Cotton"); const { data, isLoading, isError } = useList({ resource: "products", filters: [ { field: "material", operator: "eq", value, }, ], }); const products = data?.data ?? []; if (isLoading) { return

; } if (isError) { return

Something went wrong!

; } return (

material:

{product.name} - ({product.material})

); }; ``` 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.

{product.name} - ({product.material})

useList

Similar Threads

Similar Threads

Similar Threads