harsh-harlequin•3mo ago

Use Antd <RangePicker/> to set filters on date column using Supbase as backend

I have an antd table with a date column and user a <RangePicker/> as a filter dropdown. I use the function rangePickerFilterMapper to map values. However the filtering does not work because the filters set use the operator "in" instead of "gte" and "lte". How to customize the call made to setFilters from the <FilterDropdown /> component ?

3 Replies

kapa.ai•3mo ago

Hi @Benoît- L'INCASSABLE. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the call made to set filters from the <FilterDropdown /> component using Ant Design's <RangePicker /> and Supabase as the backend, you need to ensure that the filters use the gte and lte operators instead of the in operator. Here's how you can achieve this: 1. Use rangePickerFilterMapper to map the values correctly: This function helps convert the selected date range into the appropriate format. 2. Customize the filter operators: Since Supabase does not support the between operator directly, you need to map the date range to gte and lte operators. Below is an example of how you can set this up:

import { getDefaultFilter } from "@refinedev/core";  
import {  
  DateField,  
  FilterDropdown,  
  rangePickerFilterMapper,  
  useTable,  
} from "@refinedev/antd";  
import { Table, DatePicker } from "antd";  

const { RangePicker } = DatePicker;

export const Posts = () => {  
  const { tableProps, filters } = useTable({  
    filters: {  
      initial: [  
        {  
          field: "created_at",  
          value: ["2022-01-01", "2022-01-31"],  
          operator: "between",  
        },  
      ],  
    },  
  });
return (  
    <Table {...tableProps} rowKey="id">  
      <Table.Column dataIndex="id" title="ID" />  
      <Table.Column dataIndex="title" title="Title" />  
      <Table.Column  
        dataIndex="createdAt"  
        title="Created At"  
        filterDropdown={(props) => (  
          <FilterDropdown  
            {...props}  
            mapValue={(selectedKeys, event) => {  
              const mappedValues = rangePickerFilterMapper(selectedKeys, event);
              if (event === "onChange") {
                return [
                  { field: "created_at", operator: "gte", value: mappedValues[0] },
                  { field: "created_at", operator: "lte", value: mappedValues[1] }
                ];
              }
              return mappedValues;
            }}  
          >  
            <RangePicker />  
          </FilterDropdown>  
        )}  
        defaultFilteredValue={getDefaultFilter(  
          "created_at",  
          filters,  
          "between",  
        )}  
      />  
    </Table>  
  );  
};

import { getDefaultFilter } from "@refinedev/core";  
import {  
  DateField,  
  FilterDropdown,  
  rangePickerFilterMapper,  
  useTable,  
} from "@refinedev/antd";  
import { Table, DatePicker } from "antd";  

const { RangePicker } = DatePicker;

export const Posts = () => {  
  const { tableProps, filters } = useTable({  
    filters: {  
      initial: [  
        {  
          field: "created_at",  
          value: ["2022-01-01", "2022-01-31"],  
          operator: "between",  
        },  
      ],  
    },  
  });
return (  
    <Table {...tableProps} rowKey="id">  
      <Table.Column dataIndex="id" title="ID" />  
      <Table.Column dataIndex="title" title="Title" />  
      <Table.Column  
        dataIndex="createdAt"  
        title="Created At"  
        filterDropdown={(props) => (  
          <FilterDropdown  
            {...props}  
            mapValue={(selectedKeys, event) => {  
              const mappedValues = rangePickerFilterMapper(selectedKeys, event);
              if (event === "onChange") {
                return [
                  { field: "created_at", operator: "gte", value: mappedValues[0] },
                  { field: "created_at", operator: "lte", value: mappedValues[1] }
                ];
              }
              return mappedValues;
            }}  
          >  
            <RangePicker />  
          </FilterDropdown>  
        )}  
        defaultFilteredValue={getDefaultFilter(  
          "created_at",  
          filters,  
          "between",  
        )}  
      />  
    </Table>  
  );  
};

Explanation: 1. rangePickerFilterMapper: This function is used to map the selected date range to the appropriate format. When the event is onChange, it converts the Dayjs objects to ISO 8601 string format. 2. Customizing the filter operators: Inside the mapValue function, we check if the event is onChange. If it is, we map the values to use gte and lte operators for the start and end dates, respectively. By following this approach, you ensure that the filters applied to the Supabase backend use the correct operators (gte and lte) for date ranges. For more details, you can refer to the documentation (https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#rangepickerfiltermapper) and the GitHub issue (https://github.com/refinedev/refine/issues/6119) discussing the support for date ranges and filter operators. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

harsh-harlequinOP•3mo ago

It would be better if we can simply specify which operator <FilterDropdown /> should use