Refine•11mo ago

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>
            )}
          />

          <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

business_type

business_type

business_type only.

how can i rename the query params key?

kapa.ai•1/31/25, 11:16 AM

Hi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•1/31/25, 11:16 AM

----------------------
To rename the query params key when filtering with FilterDropdown, you can use the mapValuemapValue property of the FilterDropdownFilterDropdown 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:

We've added the mapValuemapValue prop to the FilterDropdownFilterDropdown component.
The mapValuemapValue function checks if the event is "onChange" (which occurs when the filter is applied).
If it is "onChange", we return an object with the key 'business_type' and the selected values as its value.
We've also added defaultFilteredValuedefaultFilteredValue using getDefaultFiltergetDefaultFilter to handle the initial filter state correctly.

kapa.ai•1/31/25, 11:16 AM

This approach will send the query params with the key

business_type

business_type

instead of business_contract_data.business_typebusiness_contract_data.business_type.

For more details on using FilterDropdownFilterDropdown and its properties, you can refer to the FilterDropdown documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/31/25, 11:16 AM

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

sacred-roseOP•1/31/25, 11:20 AM

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

kapa.ai•1/31/25, 11:20 AM

Let me check the knowledge base for you again. One moment!

kapa.ai•1/31/25, 11:20 AM

----------------------
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><Select> component and the value returned by the FilterDropdownFilterDropdown. This is a known issue that has been reported in refine.

To resolve this, we can try the following approach:

Use the mapValuemapValue prop to ensure the correct type is passed to the <Select><Select> component.
Modify the onChangeonChange handler to convert the value to the correct type.

Here's an updated version of the code that might help:

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

kapa.ai•1/31/25, 11:20 AM

<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

``

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 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

 component.
2. We've added an

onChange handler to the handler to the <Select> component that converts the values to strings before passing them to the component that converts the values to strings before passing them to the FilterDropdown's 's onChange` function.

kapa.ai•1/31/25, 11:20 AM

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 ask-any-questionFilterDropdown closes after selecting value without filtering.

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

----------------------

kapa.ai•1/31/25, 11:20 AM

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