old-apricot•12mo 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•12mo 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•12mo ago

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

other-emerald•12mo 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.