extended-salmon•3mo ago

trying to filter resource by dates through api

i have resource orders, that is taken from my backend api i am trying to pass two dates so that api only extract orders within this period of time. I pass them through meta parameters and it works

const { tableProps, setFilters } = useTable<InterfaceOrders>({
        resource: "orders",
        pagination: { mode: "server", current: 1, pageSize: 10 },
        sorters: {
            initial: [{ field: "createdAt", order: "desc" }]
        },
        syncWithLocation: true,
        meta: {
            searchFrom: dayjs().startOf('day').format("YYYY-MM-DDTHH:mm:ss"),
            searchTill: dayjs().endOf('day').format("YYYY-MM-DDTHH:mm:ss")
        }
    });

const { tableProps, setFilters } = useTable<InterfaceOrders>({
        resource: "orders",
        pagination: { mode: "server", current: 1, pageSize: 10 },
        sorters: {
            initial: [{ field: "createdAt", order: "desc" }]
        },
        syncWithLocation: true,
        meta: {
            searchFrom: dayjs().startOf('day').format("YYYY-MM-DDTHH:mm:ss"),
            searchTill: dayjs().endOf('day').format("YYYY-MM-DDTHH:mm:ss")
        }
    });

now i want to create a date picker to choose dates and refetch with those dates, how do i refresh meta parameters?

3 Replies

kapa.ai•3mo ago

Hi @oskar_o1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To refresh the meta parameters with new dates from a date picker and refetch the data, you can use the setFilters function returned by useTable along with the filters option. Here's how you can modify your code to achieve this: 1. First, update your useTable hook to include filters:

const { tableProps, setFilters } = useTable<InterfaceOrders>({
    resource: "orders",
    pagination: { mode: "server", current: 1, pageSize: 10 },
    sorters: {
        initial: [{ field: "createdAt", order: "desc" }]
    },
    syncWithLocation: true,
    filters: {
        mode: "server",
        defaultBehavior: "replace",
    },
    meta: {
        searchFrom: dayjs().startOf('day').format("YYYY-MM-DDTHH:mm:ss"),
        searchTill: dayjs().endOf('day').format("YYYY-MM-DDTHH:mm:ss")
    }
});

const { tableProps, setFilters } = useTable<InterfaceOrders>({
    resource: "orders",
    pagination: { mode: "server", current: 1, pageSize: 10 },
    sorters: {
        initial: [{ field: "createdAt", order: "desc" }]
    },
    syncWithLocation: true,
    filters: {
        mode: "server",
        defaultBehavior: "replace",
    },
    meta: {
        searchFrom: dayjs().startOf('day').format("YYYY-MM-DDTHH:mm:ss"),
        searchTill: dayjs().endOf('day').format("YYYY-MM-DDTHH:mm:ss")
    }
});

2. Then, create a date picker component and use setFilters to update the dates:

import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

// ... inside your component
const handleDateChange = (dates: any, dateStrings: [string, string]) => {
    setFilters([
        {
            field: 'dateRange',
            operator: 'eq',
            value: {
                searchFrom: dateStrings[0],
                searchTill: dateStrings[1]
            }
        }
    ], "replace");
};

// ... in your JSX
<RangePicker
    onChange={handleDateChange}
    format="YYYY-MM-DDTHH:mm:ss"
/>

import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

// ... inside your component
const handleDateChange = (dates: any, dateStrings: [string, string]) => {
    setFilters([
        {
            field: 'dateRange',
            operator: 'eq',
            value: {
                searchFrom: dateStrings[0],
                searchTill: dateStrings[1]
            }
        }
    ], "replace");
};

// ... in your JSX
<RangePicker
    onChange={handleDateChange}
    format="YYYY-MM-DDTHH:mm:ss"
/>

This approach uses the setFilters function to update the filters, which will trigger a refetch of the data with the new date range. The meta parameters will be updated automatically based on the new filter values. Note that you may need to adjust your data provider to handle these filter values and convert them to the appropriate meta parameters for your API. This solution is based on the information from the useTable documentation (https://refine.dev/docs/data/hooks/use-table/#filtering) and the Building a React Admin Dashboard with Refine (https://refine.dev/blog/building-react-admin-dashboard/#building-the-daily-revenue-component) blog post. Remember to adjust the date format and the exact implementation details according to your specific needs and API requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@274902222809071616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

extended-salmonOP•3mo ago

ok for anyone who will lookup this question, thanks for the bot, but now i understand that those parameters that i was passing through meta is incorrect, filters doing exactly what i was supposed to do in the first place

trying to filter resource by dates through api

Did you find this page helpful?