fair-rose•3y 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•3y 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•3y ago

<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•3y 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

Interface References | refine

CrudFilters

Omer•3y ago

Hey @sensib0i , Ah, yes, you are right! Would you like to create a PR to fix this? It will be warmly welcomed 🥳

useList filtering

Did you find this page helpful?