How to rename the data index when filtering with FilterDropdown

Here is my code

          <Table.Column<BusinessProfile>
            dataIndex={['business_contract_data', 'business_type']}
            title="Business Type"
            render={(value) => <Tag color={value === 'commercial_business' ? 'blue' : 'orange'}>{value}</Tag>}
            filterDropdown={(props) => (
              <FilterDropdown {...props}>
                <Select
                  mode="multiple"
                  placeholder="Filter Business Type"
                  style={{ width: '150px' }}
                  options={[
                    { label: "Commercial Business", value: ContractBusinessType.COMMERCIAL_BUSINESS },
                    { label: "Freelancer", value: ContractBusinessType.FREELANCER },
                  ]}
                />
              </FilterDropdown>
            )}
          />

          <Table.Column<BusinessProfile>
            dataIndex={['business_contract_data', 'business_type']}
            title="Business Type"
            render={(value) => <Tag color={value === 'commercial_business' ? 'blue' : 'orange'}>{value}</Tag>}
            filterDropdown={(props) => (
              <FilterDropdown {...props}>
                <Select
                  mode="multiple"
                  placeholder="Filter Business Type"
                  style={{ width: '150px' }}
                  options={[
                    { label: "Commercial Business", value: ContractBusinessType.COMMERCIAL_BUSINESS },
                    { label: "Freelancer", value: ContractBusinessType.FREELANCER },
                  ]}
                />
              </FilterDropdown>
            )}
          />

Here i am using business_contract_data.business_type as the data index, but I want to filter to send the query params with key business_type only. how can i rename the query params key?

5 Replies

kapa.ai•4w 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 rename the query params key when filtering with FilterDropdown, you can use the mapValue property of the FilterDropdown component. This allows you to transform the selected keys before they are used in the filter query. Here's how you can modify your code to achieve this:

import { FilterDropdown, getDefaultFilter } from "@refinedev/antd";

// ... other imports

<Table.Column<BusinessProfile>
  dataIndex={['business_contract_data', 'business_type']}
  title="Business Type"
  render={(value) => <Tag color={value === 'commercial_business' ? 'blue' : 'orange'}>{value}</Tag>}
  filterDropdown={(props) => (
    <FilterDropdown 
      {...props}
      mapValue={(selectedKeys, event) => {
        if (event === "onChange") {
          // When filter is applied, rename the key to 'business_type'
          return {
            business_type: selectedKeys
          };
        }
        return selectedKeys;
      }}
    >
      <Select
        mode="multiple"
        placeholder="Filter Business Type"
        style={{ width: '150px' }}
        options={[
          { label: "Commercial Business", value: ContractBusinessType.COMMERCIAL_BUSINESS },
          { label: "Freelancer", value: ContractBusinessType.FREELANCER },
        ]}
      />
    </FilterDropdown>
  )}
  defaultFilteredValue={getDefaultFilter("business_type", filters, "in")}
/>

import { FilterDropdown, getDefaultFilter } from "@refinedev/antd";

// ... other imports

<Table.Column<BusinessProfile>
  dataIndex={['business_contract_data', 'business_type']}
  title="Business Type"
  render={(value) => <Tag color={value === 'commercial_business' ? 'blue' : 'orange'}>{value}</Tag>}
  filterDropdown={(props) => (
    <FilterDropdown 
      {...props}
      mapValue={(selectedKeys, event) => {
        if (event === "onChange") {
          // When filter is applied, rename the key to 'business_type'
          return {
            business_type: selectedKeys
          };
        }
        return selectedKeys;
      }}
    >
      <Select
        mode="multiple"
        placeholder="Filter Business Type"
        style={{ width: '150px' }}
        options={[
          { label: "Commercial Business", value: ContractBusinessType.COMMERCIAL_BUSINESS },
          { label: "Freelancer", value: ContractBusinessType.FREELANCER },
        ]}
      />
    </FilterDropdown>
  )}
  defaultFilteredValue={getDefaultFilter("business_type", filters, "in")}
/>

In this modified code: 1. We've added the mapValue prop to the FilterDropdown component. 2. The mapValue function checks if the event is "onChange" (which occurs when the filter is applied). 3. If it is "onChange", we return an object with the key 'business_type' and the selected values as its value. 4. We've also added defaultFilteredValue using getDefaultFilter to handle the initial filter state correctly. This approach will send the query params with the key business_type instead of business_contract_data.business_type. For more details on using FilterDropdown and its properties, you can refer to the FilterDropdown documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

sensitive-blueOP•4w ago

@kapa.ai this raises another error. When selecting the data on the select component, the value selected becomes an empty string

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. It seems that the solution I provided has led to an unexpected issue. Let's try to address this problem. Based on the information in the knowledge sources, there might be a type mismatch issue between the value expected by the <Select> component and the value returned by the FilterDropdown. This is a known issue that has been reported in refine. To resolve this, we can try the following approach: 1. Use the mapValue prop to ensure the correct type is passed to the <Select> component. 2. Modify the onChange handler to convert the value to the correct type. Here's an updated version of the code that might help:

import { FilterDropdown, getDefaultFilter } from "@refinedev/antd";
import { Select } from "antd";
<Table.Column<BusinessProfile>
  dataIndex={['business_contract_data', 'business_type']}
  title="Business Type"
  render={(value) => <Tag color={value === 'commercial_business' ? 'blue' : 'orange'}>{value}</Tag>}
  filterDropdown={(props) => (
    <FilterDropdown 
      {...props}
      mapValue={(selectedKeys, event) => {
        if (event === "onChange") {
          // When filter is applied, rename the key to 'business_type'
          return {
            business_type: selectedKeys.map(String)
          };
        }
        // Ensure the value is always an array of strings for the Select component
        return selectedKeys.map(String);
      }}
    >
      <Select
        mode="multiple"
        placeholder="Filter Business Type"
        style={{ width: '150px' }}
        options={[
          { label: "Commercial Business", value: ContractBusinessType.COMMERCIAL_BUSINESS },
          { label: "Freelancer", value: ContractBusinessType.FREELANCER },
        ]}
        onChange={(value) => {
          // Ensure the onChange handler receives the correct type
          props.onChange(value.map(String));
        }}
      />
    </FilterDropdown>
  )}
  defaultFilteredValue={getDefaultFilter("business_type", filters, "in")}
/>

import { FilterDropdown, getDefaultFilter } from "@refinedev/antd";
import { Select } from "antd";
<Table.Column<BusinessProfile>
  dataIndex={['business_contract_data', 'business_type']}
  title="Business Type"
  render={(value) => <Tag color={value === 'commercial_business' ? 'blue' : 'orange'}>{value}</Tag>}
  filterDropdown={(props) => (
    <FilterDropdown 
      {...props}
      mapValue={(selectedKeys, event) => {
        if (event === "onChange") {
          // When filter is applied, rename the key to 'business_type'
          return {
            business_type: selectedKeys.map(String)
          };
        }
        // Ensure the value is always an array of strings for the Select component
        return selectedKeys.map(String);
      }}
    >
      <Select
        mode="multiple"
        placeholder="Filter Business Type"
        style={{ width: '150px' }}
        options={[
          { label: "Commercial Business", value: ContractBusinessType.COMMERCIAL_BUSINESS },
          { label: "Freelancer", value: ContractBusinessType.FREELANCER },
        ]}
        onChange={(value) => {
          // Ensure the onChange handler receives the correct type
          props.onChange(value.map(String));
        }}
      />
    </FilterDropdown>
  )}
  defaultFilteredValue={getDefaultFilter("business_type", filters, "in")}
/>

In this updated code: 1. We're using mapValue to ensure that the values are always converted to strings, both for the filter query and for the <Select> component. 2. We've added an onChange handler to the <Select> component that converts the values to strings before passing them to the FilterDropdown's onChange function. If this solution doesn't resolve the issue, it might be related to a more complex interaction between refine and Ant Design components. In that case, I would recommend reporting this issue on the refine GitHub repository or seeking further assistance on their Discord support channel. GitHub Issues might also contain more recent discussions or solutions to similar problems. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

How to rename the data index when filtering with FilterDropdown

Did you find this page helpful?