filterDropdown change filter operator from eq to startswith or contains

By default applying the following filter for a table column in antd adding eq filter, id love to use other filter operator
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Input {...props} placeholder="Search Question" />
</FilterDropdown>
)}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Input {...props} placeholder="Search Question" />
</FilterDropdown>
)}
5 Replies
kapa.ai
kapa.ai4mo ago
Hi @danyalutsevich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the filter operator from eq to startswith or contains in the filterDropdown for a table column in Ant Design using refine, you can follow the approach discussed in the knowledge sources. Unfortunately, Ant Design's FilterDropdown does not natively support changing the filter operator directly. However, you can achieve this by using the useTable hook and customizing the filter configuration. Here's an example of how you can set up the useTable hook to use a different filter operator: 1. Set up the useTable hook with a custom filter configuration:
import { useTable } from "@refinedev/core";
import { Table, Input, Select } from "antd";

const { tableProps, setFilters, changeFilterOperator } = useTable({
filterConfig: {
title: {
operator: 'contains', // Set the default operator to 'contains'
},
},
});
import { useTable } from "@refinedev/core";
import { Table, Input, Select } from "antd";

const { tableProps, setFilters, changeFilterOperator } = useTable({
filterConfig: {
title: {
operator: 'contains', // Set the default operator to 'contains'
},
},
});
2. Customize the filterDropdown to allow changing the filter operator:
const FilterDropdownOpt = (props) => (
<div>
<Select defaultValue="contains" onChange={(newOp) => changeFilterOperator("title", newOp)}>
<Select.Option value="eq">Equals</Select.Option>
<Select.Option value="contains">Contains</Select.Option>
<Select.Option value="startswith">Starts With</Select.Option>
</Select>
<FilterDropdown {...props}>
<Input {...props} placeholder="Search Title" />
</FilterDropdown>
</div>
);

<Table {...tableProps}>
<Table.Column
dataIndex="title"
title="Title"
filterDropdown={FilterDropdownOpt}
/>
</Table>
const FilterDropdownOpt = (props) => (
<div>
<Select defaultValue="contains" onChange={(newOp) => changeFilterOperator("title", newOp)}>
<Select.Option value="eq">Equals</Select.Option>
<Select.Option value="contains">Contains</Select.Option>
<Select.Option value="startswith">Starts With</Select.Option>
</Select>
<FilterDropdown {...props}>
<Input {...props} placeholder="Search Title" />
</FilterDropdown>
</div>
);

<Table {...tableProps}>
<Table.Column
dataIndex="title"
title="Title"
filterDropdown={FilterDropdownOpt}
/>
</Table>
In this example: - The useTable hook is configured with a default filter operator of contains for the title field. - The FilterDropdownOpt component includes a Select dropdown to change the filter operator dynamically. - The changeFilterOperator function is used to update the filter operator based on the user's selection. This approach allows you to customize the filter operator for the filterDropdown in a refine-based Ant Design table. For more details, you can refer to the useTable documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#return-values) and the FilterDropdown example (https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#example). If you encounter any issues or need further assistance, feel free to check the related GitHub issues and discussions: - Issue 1373 (https://github.com/refinedev/refine/issues/1373) - Issue 1386 (https://github.com/refinedev/refine/issues/1386) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@447478993101389824> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronze
metropolitan-bronzeOP4mo ago
@kapa.ai there is no filterConfig option in useTable hook
kapa.ai
kapa.ai4mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- It appears that there is no filterConfig option in the useTable hook based on the provided knowledge sources. However, you can still achieve the desired functionality by setting the initial filter state and using the filters object to specify the filter operator. Here's how you can set up the useTable hook to use a different filter operator, such as contains or startswith: 1. Set up the useTable hook with the initial filter state:
import { useTable } from "@refinedev/core";
import { Table, Input } from "antd";

const { tableProps, setFilters } = useTable({
filters: {
initial: [
{
field: "title",
operator: "contains", // Set the default operator to 'contains'
value: "",
},
],
},
});
import { useTable } from "@refinedev/core";
import { Table, Input } from "antd";

const { tableProps, setFilters } = useTable({
filters: {
initial: [
{
field: "title",
operator: "contains", // Set the default operator to 'contains'
value: "",
},
],
},
});
2. Customize the filterDropdown to allow changing the filter operator:
const FilterDropdownOpt = (props) => (
<div>
<Input
{...props}
placeholder="Search Title"
onChange={(e) => {
setFilters([
{
field: "title",
operator: "contains", // Change this to 'startswith' if needed
value: e.target.value,
},
]);
}}
/>
</div>
);

<Table {...tableProps}>
<Table.Column
dataIndex="title"
title="Title"
filterDropdown={FilterDropdownOpt}
/>
</Table>
const FilterDropdownOpt = (props) => (
<div>
<Input
{...props}
placeholder="Search Title"
onChange={(e) => {
setFilters([
{
field: "title",
operator: "contains", // Change this to 'startswith' if needed
value: e.target.value,
},
]);
}}
/>
</div>
);

<Table {...tableProps}>
<Table.Column
dataIndex="title"
title="Title"
filterDropdown={FilterDropdownOpt}
/>
</Table>
In this example: - The useTable hook is configured with an initial filter state for the title field using the contains operator. - The FilterDropdownOpt component includes an Input field that updates the filter value and operator using the setFilters function. This approach allows you to customize the filter operator for the filterDropdown in a refine-based Ant Design table. For more details, you can refer to the useTable documentation (https://refine.dev/docs/data/hooks/use-table/#filtering) and the Ant Design Table component's filtering feature (https://ant.design/components/table#components-table-demo-head). If you encounter any issues or need further assistance, feel free to check the related GitHub issues and discussions: - Issue 1199 (https://github.com/refinedev/refine/issues/1199) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@447478993101389824> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?