flat-fuchsia
flat-fuchsia3mo 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
kapa.ai3mo 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
kapa.ai3mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsia3mo ago
@kapa.ai without interface
kapa.ai
kapa.ai3mo 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
kapa.ai3mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below