How to use form instance ANTD inside filterDropdown?
https://codesandbox.io/s/compassionate-bash-pzxuf7?file=/src/App.jsx
Please help me build a correct way on filter dropdown, I need multiple inputs inside the filterDropdown and really don't know how to do it; my mission: get data dynamically from api on table change params (pagination, fitlers or sortings) instead of using default antd statically fitlers...
I just need to output from each column the key and value and columnKey as object, and create an array inside App.jsx, after that I will manage by myself axios get actions. Really thanks, maybe also something wrong with my code, but I tried my best, many thanks... 🙏
7 Replies
Hi @vity31. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand that you want to create a filter dropdown with multiple inputs and fetch data dynamically from an API based on table parameters like pagination, filters, or sorting. I can guide you on how to achieve this using refine and Ant Design based on the information extracts provided.
First, you need to use the
useTable
hook from refine to fetch data from your API and make it compatible with Ant Design's <Table>
component. The useTable
hook will handle pagination, filtering, and sorting for you. Here's an example of how to use the useTable
hook:
(Source: react-crud-app-with-dynamic-form-ant-design (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design))
Next, you can use the filterDropdown
property from <Table.Column>
to create custom filter dropdowns. To do this, you need to put the filtering form inside the <FilterDropdown>
component and pass the properties coming to the function to these component's properties. Here's an example of how to use the filterDropdown
with <FilterDropdown>
component:
(Source: api-reference/antd/components/filter-dropdown (https://refine.dev/docs/api-reference/antd/components/filter-dropdown))
You can modify the example above to include multiple inputs inside the FilterDropdown
component as per your requirements. Once you have the filter values, you can manage the API calls using axios as needed.
Please note that the code provided is based on the information extracts and may need to be adjusted to fit your specific use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@782880497369874452> kapa.ai is still learning and improving, please let us how it did by reacting below
harsh-harlequin•17mo ago
filterDropdown
from antd accepts react node. this means you can return any react component. inside that react component you can fetch api request or anything you want
https://codesandbox.io/s/suspicious-gwen-e65gu5?file=/src/App.jsx:1352-1382absent-sapphire•17mo ago
yes but how i can prevent default antd static filter and call my exampleAPI() function with fitlers?
harsh-harlequin•17mo ago
if i understand correctly, we have example for that:
https://codesandbox.io/s/github/refinedev/refine/tree/next/examples/base-antd?from-embed=&file=/src/pages/posts/list.tsx:1262-1292
category column is a relational field, we are fetching all categories and filter post resource by category id.
repo: https://github.com/refinedev/refine/tree/next/examples/base-antd
absent-sapphire•17mo ago
Sorry but I only use antd, not refine... is there a way to do that with only antd?
harsh-harlequin•17mo ago
Ofcourse. We did it 🚀
it's not a short task, i can't prepare demo code.
You need to handle state and use it instead of antd state. Antd table have filteredValue prop. You need to give your state to this prop