How to setFilters with custom parameters with Antd useTable?

I am using Antd useTable hook. How can I use setFilters?

  const { tableProps, tableQuery: { refetch }, filters, setFilters } = useTable<Accounting>({
    syncWithLocation: true,
    dataProviderName: DATA_PROVIDER_NAME.RQ,
    resource: 'crm/business/accounting',
    queryOptions: {
      meta: {
        queryParams: {
          _startDate: '2021-01-01',
          _endDate: '2021-12-31',
        }
      }
    }
  });

  const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
    setFilters({
      ...filters,
      _startDate: dates[0].format('YYYY-MM-DD'),
      _endDate: dates[1].format('YYYY-MM-DD'),
    });
    refetch();
  }

  const { tableProps, tableQuery: { refetch }, filters, setFilters } = useTable<Accounting>({
    syncWithLocation: true,
    dataProviderName: DATA_PROVIDER_NAME.RQ,
    resource: 'crm/business/accounting',
    queryOptions: {
      meta: {
        queryParams: {
          _startDate: '2021-01-01',
          _endDate: '2021-12-31',
        }
      }
    }
  });

  const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
    setFilters({
      ...filters,
      _startDate: dates[0].format('YYYY-MM-DD'),
      _endDate: dates[1].format('YYYY-MM-DD'),
    });
    refetch();
  }

8 Replies

kapa.ai•3w ago

Hi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can help you with using setFilters in the Ant Design useTable hook. However, there are a few things to note about your current implementation and how to properly use setFilters. The setFilters function in useTable expects an array of filter objects that conform to the CrudFilters type. Each filter object should have a field, operator, and value property. Your current implementation is not following this structure. Here's how you can modify your onRangeChange function to properly use setFilters:

const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
  setFilters([
    {
      field: "_startDate",
      operator: "eq",
      value: dates[0].format('YYYY-MM-DD'),
    },
    {
      field: "_endDate",
      operator: "eq",
      value: dates[1].format('YYYY-MM-DD'),
    }
  ], "replace");
};

const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
  setFilters([
    {
      field: "_startDate",
      operator: "eq",
      value: dates[0].format('YYYY-MM-DD'),
    },
    {
      field: "_endDate",
      operator: "eq",
      value: dates[1].format('YYYY-MM-DD'),
    }
  ], "replace");
};

In this modified version: 1. We're passing an array of filter objects to setFilters. 2. Each filter object has a field, operator, and value property. 3. We're using the "replace" behavior to replace any existing filters for these fields. Also, note that you don't need to call refetch() manually after setting filters. The useTable hook will automatically trigger a refetch when the filters change. For more information on how to use setFilters, you can refer to the useTable API documentation. If you want to keep your existing filters and just add or update these date filters, you can use the "merge" behavior (which is the default if not specified):

const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
  setFilters([
    {
      field: "_startDate",
      operator: "eq",
      value: dates[0].format('YYYY-MM-DD'),
    },
    {
      field: "_endDate",
      operator: "eq",
      value: dates[1].format('YYYY-MM-DD'),
    }
  ]);
};

const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
  setFilters([
    {
      field: "_startDate",
      operator: "eq",
      value: dates[0].format('YYYY-MM-DD'),
    },
    {
      field: "_endDate",
      operator: "eq",
      value: dates[1].format('YYYY-MM-DD'),
    }
  ]);
};

This will merge the new filters with any existing ones. Remember that the filters state in useTable is designed to work with the built-in filtering system of refine. If you're using custom query parameters that are not part of the standard filtering system, you might need to handle them differently, possibly by updating the meta.queryParams in your useTable options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

xenial-blackOP•3w ago

how to pass _startDate and _endDate directly as query params on the request url? @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To pass _startDate and _endDate directly as query parameters on the request URL when using the Ant Design useTable hook, you can utilize the meta property in the useTable configuration. This approach allows you to include custom query parameters that are not part of the standard filtering system. Here's how you can modify your useTable hook to include these custom query parameters:

const { tableProps, tableQuery: { refetch } } = useTable<Accounting>({
  syncWithLocation: true,
  dataProviderName: DATA_PROVIDER_NAME.RQ,
  resource: 'crm/business/accounting',
  meta: {
    queryParams: {
      _startDate: '2021-01-01',
      _endDate: '2021-12-31',
    }
  }
});

const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
  refetch({
    meta: {
      queryParams: {
        _startDate: dates[0].format('YYYY-MM-DD'),
        _endDate: dates[1].format('YYYY-MM-DD'),
      }
    }
  });
};

const { tableProps, tableQuery: { refetch } } = useTable<Accounting>({
  syncWithLocation: true,
  dataProviderName: DATA_PROVIDER_NAME.RQ,
  resource: 'crm/business/accounting',
  meta: {
    queryParams: {
      _startDate: '2021-01-01',
      _endDate: '2021-12-31',
    }
  }
});

const onRangeChange = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
  refetch({
    meta: {
      queryParams: {
        _startDate: dates[0].format('YYYY-MM-DD'),
        _endDate: dates[1].format('YYYY-MM-DD'),
      }
    }
  });
};

In this approach: 1. We're using the meta.queryParams in the initial useTable configuration to set the default date range. 2. In the onRangeChange function, we're using the refetch method with updated meta.queryParams to change the date range. This method will pass _startDate and _endDate directly as query parameters in the request URL. The resulting URL might look something like:

<https://api.example.com/crm/business/accounting?_startDate=2021-01-01&_endDate=2021-12-31>

<https://api.example.com/crm/business/accounting?_startDate=2021-01-01&_endDate=2021-12-31>

It's important to note that this approach bypasses the standard filtering system of refine and directly manipulates the query parameters. This means that these parameters won't be included in the filters state of useTable. If you need to sync these custom query parameters with the URL (for bookmarking or sharing purposes), you can use the syncWithLocation: true option as shown in the code above. This will include the custom query parameters in the browser's URL. For more information on using custom query parameters and the meta property, you can refer to the useTable documentation. Github Issue: Pagination for useTable hooks also provides some insights into manipulating query parameters, although it's focused on pagination, the concept is similar for custom date parameters. Remember that the exact behavior might depend on your data provider implementation. Make sure your data provider is set up to handle these custom query parameters correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

xenial-blackOP•3w ago

The queryParams meta on the useTable hook seems not working, how can I modify the data provider for useTable hook? @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To modify the data provider for the useTable hook when the queryParams meta is not working as expected, you have a couple of options. One approach is to override the getList method of your data provider. This allows you to customize how the query parameters are handled. Here's how you can modify your data provider: 1. First, create a custom data provider by extending your current one:

import dataProvider from "@refinedev/simple-rest";

const customDataProvider = {
  ...dataProvider("API_URL"),
  getList: async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10 } = pagination ?? {};

    const queryParams = new URLSearchParams();

    if (meta?.queryParams) {
      Object.entries(meta.queryParams).forEach(([key, value]) => {
        queryParams.append(key, value.toString());
      });
    }

    queryParams.append("_start", ((current - 1) * pageSize).toString());
    queryParams.append("_end", (current * pageSize).toString());

    const { data, headers } = await httpClient.get(`${url}?${queryParams.toString()}`);

    const total = +headers["x-total-count"];

    return {
      data,
      total,
    };
  },
};

import dataProvider from "@refinedev/simple-rest";

const customDataProvider = {
  ...dataProvider("API_URL"),
  getList: async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10 } = pagination ?? {};

    const queryParams = new URLSearchParams();

    if (meta?.queryParams) {
      Object.entries(meta.queryParams).forEach(([key, value]) => {
        queryParams.append(key, value.toString());
      });
    }

    queryParams.append("_start", ((current - 1) * pageSize).toString());
    queryParams.append("_end", (current * pageSize).toString());

    const { data, headers } = await httpClient.get(`${url}?${queryParams.toString()}`);

    const total = +headers["x-total-count"];

    return {
      data,
      total,
    };
  },
};

2. Then, use this custom data provider in your <Refine> component:

<Refine
  dataProvider={customDataProvider}
  // ... other props
>
  {/* ... */}
</Refine>

<Refine
  dataProvider={customDataProvider}
  // ... other props
>
  {/* ... */}
</Refine>

This approach allows you to directly control how the query parameters are constructed and sent to your API. For more information on customizing data providers, you can refer to the Creating a data provider documentation. Alternatively, if you're using the @refinedev/simple-rest data provider, you might want to check if your API endpoints are compatible with the default query parameter structure. The simple-rest data provider uses _start and _end for pagination by default, as shown in this Github issue comment. If you need to make more specific modifications or if you're still encountering issues, you might want to consider "swizzling" the data provider. This allows you to create a local copy of the data provider that you can modify as needed. You can find more information about this in the Swizzle documentation. Remember to ensure that your backend API is set up to handle the query parameters in the way you're sending them. The exact implementation may vary depending on your specific API requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

How to setFilters with custom parameters with Antd useTable?

Did you find this page helpful?