flat-fuchsia
flat-fuchsia9mo ago

useList filtering

Hello, is there a way to make filters with 'OR' operator? I want to do global search input inside my table and wonders how to do it. I had an idea to use "contains" operator from Strapi for each field but it seems that useList is not prepared for multiple fields being filtered with "OR" operator because theres non. Doing it like so
filters: globalFilter
? [
{ field: "product_code", operator: "contains", value: globalFilter },
{ field: "name", operator: "contains", value: globalFilter },
]
: undefined,
filters: globalFilter
? [
{ field: "product_code", operator: "contains", value: globalFilter },
{ field: "name", operator: "contains", value: globalFilter },
]
: undefined,
won't give me option to filter by "product"_code OR "name". Any ideas how can I implement it?
4 Replies
kapa.ai
kapa.ai9mo ago
Hi @sensib0i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the 'OR' operator in refine to filter results based on multiple fields. This is done using the CrudFilters array, which can contain multiple filter objects. Each filter object has a field, operator, and value property. The field property is the name of the field you want to filter, the operator property is the operator you want to use for filtering, and the value property is the value you want to filter by. To use the 'OR' operator, you can use a ConditionalFilter which works with or / and operator and expects an array of LogicalFilter objects in the value property. Here is an example:
const filter = [
{
operator: "or",
value: [
{
field: "product_code",
operator: "contains",
value: globalFilter,
},
{
field: "name",
operator: "contains",
value: globalFilter,
},
],
},
];
const filter = [
{
operator: "or",
value: [
{
field: "product_code",
operator: "contains",
value: globalFilter,
},
{
field: "name",
operator: "contains",
value: globalFilter,
},
],
},
];
In this example, the query will look like: ("product_code" contains globalFilter) OR ("name" contains globalFilter) You can use this filter in your useList or useTable hooks. For example:
const { data } = useList({
resource: "posts",
filters: filter,
});
const { data } = useList({
resource: "posts",
filters: filter,
});
Please note that the availability of operators depends on the data provider you're using. For more information, you can refer to the Handling Filters (https://refine.dev/docs/advanced-tutorials/data-provider/handling-filters/) and Table Search (https://refine.dev/docs/advanced-tutorials/search/table-search/) sections in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsia9mo ago
Nice, it works. I assume that documentation is not updated because I can't find anything about it in interface here: https://refine.dev/docs/api-reference/core/interfaceReferences/#crudfilters
Omer
Omer9mo ago
Hey @sensib0i , Ah, yes, you are right! Would you like to create a PR to fix this? It will be warmly welcomed 🥳