How to extend CRUD filter

5 Replies

Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To extend CRUD filters in refine, you can utilize the CrudFilter and CrudFilters types. Here’s a step-by-step guide on how to work with and extend these filters: Understanding CrudFilter and CrudFilters 1. CrudFilter: This type can be either a LogicalFilter or a ConditionalFilter.

    type CrudFilter = LogicalFilter | ConditionalFilter;

    type CrudFilter = LogicalFilter | ConditionalFilter;

Source (https://refine.dev/docs/core/interface-references#crudfilter) 2. CrudFilters: This is an array of CrudFilter.

    type CrudFilters = CrudFilter[];

    type CrudFilters = CrudFilter[];

Source (https://refine.dev/docs/core/interface-references/#crudfilters) Example Usage When you need to create filters for a table, you can define them using the CrudFilters type. Here’s an example from a useTable hook:

import { HttpError } from "@refinedev/core";
import { Dayjs } from "dayjs";

const { searchFormProps } = useTable<IPost, HttpError, { title: string; createdAt: [Dayjs, Dayjs] }>({
    onSearch: (params) => {
        const filters: CrudFilters = [];
        const { q, createdAt } = params;

        filters.push(
            {
                field: "q",
                operator: "eq",
                value: q,
            },
            {
                field: "createdAt",
                operator: "gte",
                value: createdAt ? createdAt[0].toISOString() : undefined,
            },
            {
                field: "createdAt",
                operator: "lte",
                value: createdAt ? createdAt[1].toISOString() : undefined,
            },
        );

        return filters;
    },
});

import { HttpError } from "@refinedev/core";
import { Dayjs } from "dayjs";

const { searchFormProps } = useTable<IPost, HttpError, { title: string; createdAt: [Dayjs, Dayjs] }>({
    onSearch: (params) => {
        const filters: CrudFilters = [];
        const { q, createdAt } = params;

        filters.push(
            {
                field: "q",
                operator: "eq",
                value: q,
            },
            {
                field: "createdAt",
                operator: "gte",
                value: createdAt ? createdAt[0].toISOString() : undefined,
            },
            {
                field: "createdAt",
                operator: "lte",
                value: createdAt ? createdAt[1].toISOString() : undefined,
            },
        );

        return filters;
    },
});

Source (https://refine.dev/docs/advanced-tutorials/search/table-search) Extending Filters for Deep Filtering If you need to perform deep filtering, especially with providers like Strapi, you might need to transform the filter format. Here’s an example of how you can handle deep filters:

const filter = [
    {
        field: "chef[restaurants][stars]",
        operator: "eq",
        value: "John",
    },
];

const filter = [
    {
        field: "chef[restaurants][stars]",
        operator: "eq",
        value: "John",
    },
];

This converts to: /api/restaurants?filters[chef][restaurants][stars][$eq]=5 Source (https://github.com/refinedev/refine/issues/2127) Helper Functions for Strapi To make it easier, you can use helper functions to transform Strapi filters into refine filters:

import { strapiToRefineFilters } from "@pankod/refine-strapi-v4";

import { strapiToRefineFilters } from "@pankod/refine-strapi-v4";

Source (https://github.com/refinedev/refine/issues/2127) Conclusion By understanding and utilizing CrudFilter and CrudFilters, you can effectively extend and customize your filtering logic in refine. For deep filtering, especially with Strapi, consider using helper functions to transform the filter format. For more detailed information, you can refer to the CrudFilter documentation (https://refine.dev/docs/core/interface-references#crudfilter) and the CrudFilters documentation (https://refine.dev/docs/core/interface-references/#crudfilters). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

itchy-amethyst•2mo ago

@kapa.ai i want to use icontains which is not present in place of onSearch: (value: any) => { const { title } = value; return [ { field: 'source_name', operator: 'icontains', value: title, }, ]; }, how to achieve this

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To achieve the functionality of using the icontains operator, which is not directly available, you can use the contains operator as a workaround. The contains operator performs a case-insensitive search by default in many systems. Here’s how you can implement it using the onSearch function: Example Code

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
  
interface ICategory {  
  id: number;  
  title: string;  
}  
  
const PostCreate: React.FC = () => {  
  const { selectProps } = useSelect<ICategory>({  
    resource: "categories",  
    onSearch: (value) => [  
      {  
        field: "source_name",  
        operator: "contains",  // Use "contains" as a workaround for "icontains"
        value,  
      },  
    ],  
  });  
  
  return (  
    <Select  
      placeholder="Select a category"  
      style={{ width: 300 }}  
      {...selectProps}  
    />  
  );  
};

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
  
interface ICategory {  
  id: number;  
  title: string;  
}  
  
const PostCreate: React.FC = () => {  
  const { selectProps } = useSelect<ICategory>({  
    resource: "categories",  
    onSearch: (value) => [  
      {  
        field: "source_name",  
        operator: "contains",  // Use "contains" as a workaround for "icontains"
        value,  
      },  
    ],  
  });  
  
  return (  
    <Select  
      placeholder="Select a category"  
      style={{ width: 300 }}  
      {...selectProps}  
    />  
  );  
};

Explanation - Operator: The contains operator is used to perform a case-insensitive search. This is a common approach when icontains is not available. - onSearch Function: The onSearch function is used to set the search value and apply the filter. Additional Information If you need more advanced filtering capabilities or if your backend supports custom operators, you might need to handle this on the server side or extend the refine framework to support custom operators. For more information, you can refer to the useSelect documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select/#onsearch). If you have any further questions or need additional customization, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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