how to change useTable column table filter operator?

how to change useTable column table filter operator using antdesign

5 Replies

kapa.ai•15mo ago

Hi @ganuzaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can change the filter operator in the useTable hook by using the onSearch property. This property is a function that is called when the form is submitted. You can define your custom filter operator in this function. Here is an example of how you can do it:

import { HttpError } from "@refinedev/core";  
import { List, TagField, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input } from "antd";  

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
}  

interface ISearch {  
 title: string;  
}  

const PostList: React.FC = () => {  
 const { tableProps, searchFormProps } = useTable<IPost, HttpError, ISearch>(  
 {  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  // Here you can change the operator
 value: values.title,  
 },  
 ];  
 },  
 },  
 );  

 return (  
 <List>  
 <Form {...searchFormProps} layout="inline">  
 <Form.Item name="title">  
 <Input placeholder="Search by title" />  
 </Form.Item>  
 <SaveButton onClick={searchFormProps.form?.submit} />  
 </Form>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="content" title="Content" />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

import { HttpError } from "@refinedev/core";  
import { List, TagField, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input } from "antd";  

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
}  

interface ISearch {  
 title: string;  
}  

const PostList: React.FC = () => {  
 const { tableProps, searchFormProps } = useTable<IPost, HttpError, ISearch>(  
 {  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  // Here you can change the operator
 value: values.title,  
 },  
 ];  
 },  
 },  
 );  

 return (  
 <List>  
 <Form {...searchFormProps} layout="inline">  
 <Form.Item name="title">  
 <Input placeholder="Search by title" />  
 </Form.Item>  
 <SaveButton onClick={searchFormProps.form?.submit} />  
 </Form>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="content" title="Content" />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

In this example, the operator is set to "contains". You can change it to any operator you want. For more information, you can refer to the useTable documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@149140198213550080> kapa.ai is still learning and improving, please let us know how it did by reacting below

harsh-harlequin•15mo ago

hello @ganuzaz , <FilterDropdown> gets filter operator from initialFilter https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#initial-filter-and-sorter

genetic-orangeOP•15mo ago

alr it works, thanks!

harsh-harlequin•15mo ago

🚀 I'm glad to hear that