molecular-blue
molecular-blue8mo ago

how to change useTable column table filter operator?

how to change useTable column table filter operator using antdesign
5 Replies
kapa.ai
kapa.ai8mo 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
kapa.ai8mo ago
<@149140198213550080> kapa.ai is still learning and improving, please let us know how it did by reacting below
sensitive-blue
sensitive-blue8mo ago
hello @ganuzaz , <FilterDropdown> gets filter operator from initialFilter https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#initial-filter-and-sorter
molecular-blue
molecular-blue8mo ago
alr it works, thanks!
sensitive-blue
sensitive-blue8mo ago
🚀 I'm glad to hear that