flat-fuchsia•3mo ago

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

kapa.ai•3mo ago

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:

import { useSimpleList } from "@refinedev/antd";  
import { Typography, List } from "antd";  

const { Text } = Typography;  

interface IProduct {  
 id: number;  
 name: string;  
 description: string;  
 price: string;  
}  

const ProductList: React.FC = () => {  
 const { listProps } = useSimpleList<IProduct>();  

 return <List {...listProps} renderItem={renderItem} />;  
};  

const renderItem = (item: IProduct) => {  
 const { id, name, description, price } = item;  

 return (  
 <List.Item actions={[<Text key={id}>{price}</Text>]}>  
 <List.Item.Meta title={name} description={description} />  
 </List.Item>  
 );  
};

import { useSimpleList } from "@refinedev/antd";  
import { Typography, List } from "antd";  

const { Text } = Typography;  

interface IProduct {  
 id: number;  
 name: string;  
 description: string;  
 price: string;  
}  

const ProductList: React.FC = () => {  
 const { listProps } = useSimpleList<IProduct>();  

 return <List {...listProps} renderItem={renderItem} />;  
};  

const renderItem = (item: IProduct) => {  
 const { id, name, description, price } = item;  

 return (  
 <List.Item actions={[<Text key={id}>{price}</Text>]}>  
 <List.Item.Meta title={name} description={description} />  
 </List.Item>  
 );  
};

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: ----------------------

kapa.ai•3mo ago

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

flat-fuchsia•3mo ago

@kapa.ai without interface

kapa.ai•3mo ago

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:

import { useSimpleList } from "@refinedev/antd";  
import { Typography, List } from "antd";  

const { Text } = Typography;  

const ProductList: React.FC = () => {  
 const { listProps } = useSimpleList();  

 return <List {...listProps} renderItem={renderItem} />;  
};  

const renderItem = (item: any) => {  
 const { id, name, description, price } = item;  

 return (  
 <List.Item actions={[<Text key={id}>{price}</Text>]}>  
 <List.Item.Meta title={name} description={description} />  
 </List.Item>  
 );  
};

import { useSimpleList } from "@refinedev/antd";  
import { Typography, List } from "antd";  

const { Text } = Typography;  

const ProductList: React.FC = () => {  
 const { listProps } = useSimpleList();  

 return <List {...listProps} renderItem={renderItem} />;  
};  

const renderItem = (item: any) => {  
 const { id, name, description, price } = item;  

 return (  
 <List.Item actions={[<Text key={id}>{price}</Text>]}>  
 <List.Item.Meta title={name} description={description} />  
 </List.Item>  
 );  
};

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: ----------------------

kapa.ai•3mo ago

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