stormy-gold
stormy-gold16mo ago

Antd Filter Search Not Visible

Hi! I'm following the Antd table documentation, which offers filterSearch. When I try adding it to <Table.column>, the icon doesn't seem to appear. How should I set it up so that it does?
3 Replies
kapa.ai
kapa.ai16mo ago
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set up filter search in your <Table.Column>, you need to use the useTable hook from Refine. This hook provides you with sorters and filters that you can use in your table columns. Here's an example of how you can set it up:
const { tableProps, sorters, filters } = useTable({
sorters: {
initial: [
{
field: "title",
order: "asc",
},
],
},
filters: {
initial: [
{
field: "status",
operator: "eq",
value: "published",
},
],
},
});

<Table.Column
dataIndex="title"
title="Title"
defaultSortOrder={getDefaultSortOrder("title", sorters)}
/>
<Table.Column
dataIndex="status"
title="Status"
render={(value) => <TagField value={value} />}
defaultFilteredValue={getDefaultFilter("status", filters)}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Radio.Group>
<Radio value="published">Published</Radio>
<Radio value="draft">Draft</Radio>
<Radio value="rejected">Rejected</Radio>
</Radio.Group>
</FilterDropdown>
)}
/>
const { tableProps, sorters, filters } = useTable({
sorters: {
initial: [
{
field: "title",
order: "asc",
},
],
},
filters: {
initial: [
{
field: "status",
operator: "eq",
value: "published",
},
],
},
});

<Table.Column
dataIndex="title"
title="Title"
defaultSortOrder={getDefaultSortOrder("title", sorters)}
/>
<Table.Column
dataIndex="status"
title="Status"
render={(value) => <TagField value={value} />}
defaultFilteredValue={getDefaultFilter("status", filters)}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Radio.Group>
<Radio value="published">Published</Radio>
<Radio value="draft">Draft</Radio>
<Radio value="rejected">Rejected</Radio>
</Radio.Group>
</FilterDropdown>
)}
/>
In this example, the useTable hook is used to define initial sorters and filters. The defaultSortOrder and defaultFilteredValue props are then used in the <Table.Column> component to apply these sorters and filters. The filterDropdown prop is used to create a custom filter dropdown. If you're using the initial option in your sorters or filters, don't forget to add getDefaultSortOrder or defaultFilteredValue to your <Table.Column> component. Otherwise, the hook states may not sync with the table. For more information, you can refer to the Refine documentation on useTable (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.ai16mo ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
itchy-amethyst
itchy-amethyst16mo ago
Hello @avangeous It's seems bot is right. https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#filtering you can find information in our filtering documentation. If you have encounter a problem please let us know
useTable | refine
By using useTable, you can get properties that are compatible with Ant Design component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses useList for the fetch.