eastern-cyan•13mo ago

How to keep the filter after refresh on Antd Table?

@kapa.ai How to keep the filter when the page is refreshed with FilterDropdown?

        <Table.Column dataIndex="customer_id" title="Customer"
          render={(value) => {
            if (customerIsLoading) {
              return <>Loading...</>;
            } else {
              return <Link href={`/customer/show/${value}`}>{customerData?.data?.find((item) => item.id === value)?.name}</Link>;
            }
          }}
          // Filter Dropdown: Filter by Customer
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                style={{ width: '200px' }}
                placeholder="Filter by customer"
                mode="multiple"
                options={customerData?.data?.map((item) => ({
                  value: item.id,
                  label: item.name,
                }))}
              />
            </FilterDropdown>
          )}
        />

        <Table.Column dataIndex="customer_id" title="Customer"
          render={(value) => {
            if (customerIsLoading) {
              return <>Loading...</>;
            } else {
              return <Link href={`/customer/show/${value}`}>{customerData?.data?.find((item) => item.id === value)?.name}</Link>;
            }
          }}
          // Filter Dropdown: Filter by Customer
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                style={{ width: '200px' }}
                placeholder="Filter by customer"
                mode="multiple"
                options={customerData?.data?.map((item) => ({
                  value: item.id,
                  label: item.name,
                }))}
              />
            </FilterDropdown>
          )}
        />

5 Replies

kapa.ai•13mo 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: ---------------------- To keep the filter after refreshing the page with FilterDropdown in an Antd Table using refine, you can follow these steps: 1. Use the getDefaultFilter function from @refinedev/core to retrieve the default filter value from the URL. 2. Add the defaultFilteredValue prop to your Table.Column component, using the value from getDefaultFilter. Here's how you can modify your code to achieve this:

import { getDefaultFilter } from "@refinedev/core";

// Inside your component
const { filters } = useTable();

// In your Table.Column
<Table.Column 
  dataIndex="customer_id" 
  title="Customer"
  defaultFilteredValue={getDefaultFilter("customer_id", filters, "eq")}
  render={(value) => {
    if (customerIsLoading) {
      return <>Loading...</>;
    } else {
      return <Link href={`/customer/show/${value}`}>{customerData?.data?.find((item) => item.id === value)?.name}</Link>;
    }
  }}
  filterDropdown={(props) => (
    <FilterDropdown {...props}>
      <Select
        style={{ width: '200px' }}
        placeholder="Filter by customer"
        mode="multiple"
        options={customerData?.data?.map((item) => ({
          value: item.id,
          label: item.name,
        }))}
      />
    </FilterDropdown>
  )}
/>

import { getDefaultFilter } from "@refinedev/core";

// Inside your component
const { filters } = useTable();

// In your Table.Column
<Table.Column 
  dataIndex="customer_id" 
  title="Customer"
  defaultFilteredValue={getDefaultFilter("customer_id", filters, "eq")}
  render={(value) => {
    if (customerIsLoading) {
      return <>Loading...</>;
    } else {
      return <Link href={`/customer/show/${value}`}>{customerData?.data?.find((item) => item.id === value)?.name}</Link>;
    }
  }}
  filterDropdown={(props) => (
    <FilterDropdown {...props}>
      <Select
        style={{ width: '200px' }}
        placeholder="Filter by customer"
        mode="multiple"
        options={customerData?.data?.map((item) => ({
          value: item.id,
          label: item.name,
        }))}
      />
    </FilterDropdown>
  )}
/>

By adding the defaultFilteredValue prop with the getDefaultFilter function, the filter will be preserved when the page is refreshed. The getDefaultFilter function retrieves the filter value from the URL, allowing it to persist across page reloads. For more information on initial filters and sorters, you can refer to the refine documentation on useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#initial-filter-and-sorter). If you want to set permanent filters that won't be cleared when the user changes the filter, you can use the filters.permanent property in the useTable hook:

const { tableProps, sorter, tableQueryResult, searchFormProps } = useTable({
  filters: {
    permanent: [
      {
        field: "customer_id",
        operator: "eq",
        value: someValue,
      },
    ],
  },
});

const { tableProps, sorter, tableQueryResult, searchFormProps } = useTable({
  filters: {
    permanent: [
      {
        field: "customer_id",
        operator: "eq",
        value: someValue,
      },
    ],
  },
});

This will set a permanent filter that won't be cleared when the user changes the filter or refreshes the page. You can find more information about permanent filters in the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filterspermanent). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

eastern-cyanOP•13mo ago

I did with this instead, because I have multiple mode select defaultFilteredValue={getDefaultFilter("customer_id", filters, "in")} @kapa.ai how to set the filter programmatically?

kapa.ai•13mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To set the filter programmatically in refine with Ant Design's Table component, you can use the setFilters function provided by the useTable hook. Here's how you can do it: 1. First, import the useTable hook from @refinedev/antd:

import { useTable } from "@refinedev/antd";

import { useTable } from "@refinedev/antd";

2. In your component, destructure the setFilters function from the useTable hook:

const { tableProps, setFilters } = useTable();

const { tableProps, setFilters } = useTable();

3. You can then use the setFilters function to programmatically set the filters. Here's an example:

setFilters([
  {
    field: "name",
    operator: "contains",
    value: "Foo",
  },
]);

setFilters([
  {
    field: "name",
    operator: "contains",
    value: "Foo",
  },
]);

This will set a filter on the "name" field, using the "contains" operator with the value "Foo". You can call this function wherever you need to set the filter programmatically, such as in a button click handler or useEffect hook. Here's a more complete example:

import { useTable } from "@refinedev/antd";
import { Button } from "antd";

const MyComponent = () => {
  const { tableProps, setFilters } = useTable();

  const handleSetFilter = () => {
    setFilters([
      {
        field: "name",
        operator: "contains",
        value: "Foo",
      },
    ]);
  };

  return (
    <>
      <Button onClick={handleSetFilter}>Set Filter</Button>
      <Table {...tableProps}>
        {/* Your table columns */}
      </Table>
    </>
  );
};

import { useTable } from "@refinedev/antd";
import { Button } from "antd";

const MyComponent = () => {
  const { tableProps, setFilters } = useTable();

  const handleSetFilter = () => {
    setFilters([
      {
        field: "name",
        operator: "contains",
        value: "Foo",
      },
    ]);
  };

  return (
    <>
      <Button onClick={handleSetFilter}>Set Filter</Button>
      <Table {...tableProps}>
        {/* Your table columns */}
      </Table>
    </>
  );
};

It's important to note that by default, the setFilters function will merge the new filters with existing ones. If you want to replace all existing filters instead, you can pass "replace" as the second argument:

setFilters([
  {
    field: "name",
    operator: "contains",
    value: "Foo",
  },
], "replace");

setFilters([
  {
    field: "name",
    operator: "contains",
    value: "Foo",
  },
], "replace");

You can find more information about the setFilters function and its usage in the refine documentation for useTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#setfilters). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

How to keep the filter after refresh on Antd Table?

Did you find this page helpful?