metropolitan-bronze•4h ago

Make a list of cards instead of table

I want to know if it's possible to make a list page with a list of cards instead of a table with ant design

2 Replies

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is absolutely possible to create a list page with a list of cards instead of a table using Refine with Ant Design. You can use the Ant Design <List /> component together with Refine's useSimpleList or useTable hooks to fetch your data, and then render each item as a card. Here’s a concrete example from the knowledge sources, where each company is displayed as a card in a list:

import { useSimpleList, AntdList, List } from "@refinedev/antd";
import { CompanyItem } from "components/company";

export const CompanyList = () => {
  const { listProps } = useSimpleList<ICompany>({ meta: { populate: ["logo"] } });

  return (
    <List title={"Your Companies"}>
      <AntdList
        grid={{ gutter: 16 }}
        {...listProps}
        renderItem={(item) => (
          <AntdList.Item>
            <CompanyItem item={item} />
          </AntdList.Item>
        )}
      />
    </List>
  );
};

import { useSimpleList, AntdList, List } from "@refinedev/antd";
import { CompanyItem } from "components/company";

export const CompanyList = () => {
  const { listProps } = useSimpleList<ICompany>({ meta: { populate: ["logo"] } });

  return (
    <List title={"Your Companies"}>
      <AntdList
        grid={{ gutter: 16 }}
        {...listProps}
        renderItem={(item) => (
          <AntdList.Item>
            <CompanyItem item={item} />
          </AntdList.Item>
        )}
      />
    </List>
  );
};

In this example, CompanyItem is a custom card component that displays the details of each company. The AntdList component from Refine is used to render a grid of these cards, rather than a table. This approach can be adapted for any resource—just create your own card component for the items you want to display. A similar approach is used for client lists and other resources, confirming that card-based layouts are fully supported and commonly used in Refine with Ant Design integrations Develop your Own Customizable Invoice Generator with Refine and Strapi | Part I Your Company Detail Page. You can also use the standard Ant Design <List /> component directly with the listProps from useSimpleList for maximum flexibility useSimpleList. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4h ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Make a list of cards instead of table

Did you find this page helpful?