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
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:
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:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
itchy-amethyst•16mo 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.