How can I use an actual <List> element instead of a <Table> in ant design list page
I would like to render data inside a list, instead of using a table, I want to do that in the list page, how can I do this?
5 Replies
Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can use the
useSimpleList
hook from Refine to fetch data and render it inside an Ant Design's <List>
component. Here is an example of how you can do this:
In this example, useSimpleList
is used to fetch data from the API and provide properties that are compatible with the Ant Design's <List>
component. The renderItem
function is used to customize how each item in the list is rendered.
You can find more information about useSimpleList
in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list).
Please replace IProduct
and the renderItem
function with your own data structure and rendering logic.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
quickest-silver•5mo ago
@kapa.ai without interface
Let me check the knowledge base for you. One moment! :books:
----------------------
Sure, you can use the
useSimpleList
hook without defining an interface. Here's an example:
In this example, useSimpleList
is used to fetch data from the API and provide properties that are compatible with the Ant Design's <List>
component. The renderItem
function is used to customize how each item in the list is rendered.
You can find more information about useSimpleList
in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list).
Please replace the renderItem
function with your own data structure and rendering logic.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below