List, consist of cards

Hello, instead of table and columns i want to use cards, i will show file list. How can i achieve this with Ant Design?

5 Replies

Hi @Onder. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display a list consisting of cards instead of a table with columns using Ant Design in a refine application, you can follow these steps: 1. Create a Card Component: First, you need to create a card component that will represent each item in your list. Here is an example of a card component:

import React from "react";
import { Card } from "antd";

function FileCard({ name, material }: { name: string; material: string }) {
  return (
    <Card
      title={name}
      className="card"
      style={{
        marginBottom: "15px",
        boxShadow: "1px 4px 11px -2px rgba(135,135,135,0.75)",
      }}
    >
      {material}
    </Card>
  );
}

export default FileCard;

import React from "react";
import { Card } from "antd";

function FileCard({ name, material }: { name: string; material: string }) {
  return (
    <Card
      title={name}
      className="card"
      style={{
        marginBottom: "15px",
        boxShadow: "1px 4px 11px -2px rgba(135,135,135,0.75)",
      }}
    >
      {material}
    </Card>
  );
}

export default FileCard;

2. Use the Card Component in a List: Next, you can use this card component within a list. Instead of using a table, you will map through your data and render a FileCard for each item. Here is an example of how you can achieve this:

import React from "react";
import { List, useTable } from "@refinedev/antd";
import { Space } from "antd";
import FileCard from "../components/FileCard";

const FileList: React.FC = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        {tableProps.dataSource?.map((record) => (
          <FileCard key={record.id} name={record.name} material={record.material} />
        ))}
      </Space>
    </List>
  );
};

export default FileList;

import React from "react";
import { List, useTable } from "@refinedev/antd";
import { Space } from "antd";
import FileCard from "../components/FileCard";

const FileList: React.FC = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        {tableProps.dataSource?.map((record) => (
          <FileCard key={record.id} name={record.name} material={record.material} />
        ))}
      </Space>
    </List>
  );
};

export default FileList;

In this example: - The FileCard component is used to display each file's details. - The FileList component uses the useTable hook to fetch data and then maps through the data to render a FileCard for each item. This approach leverages Ant Design's Card component to display each item in a card format within a list. For more information on using the List component in refine, you can refer to the List documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/list/). If you need further customization or additional functionalities, you can refer to the Ant Design Card documentation (https://ant.design/components/card/) for more options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

ratty-blushOP•5mo ago

@kapa.ai thanks i will generate my own Card implementation which accepts data source so we'll reduce this

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can create a reusable Card component that accepts a data source to reduce redundancy. Here’s how you can achieve this: 1. Create a Reusable Card Component: This component will accept props for the data source and render the card accordingly.

import React from "react";
import { Card } from "antd";

interface FileCardProps {
  data: {
    id: string;
    name: string;
    material: string;
  };
}

const FileCard: React.FC<FileCardProps> = ({ data }) => {
  return (
    <Card
      title={data.name}
      className="card"
      style={{
        marginBottom: "15px",
        boxShadow: "1px 4px 11px -2px rgba(135,135,135,0.75)",
      }}
    >
      {data.material}
    </Card>
  );
};

export default FileCard;

import React from "react";
import { Card } from "antd";

interface FileCardProps {
  data: {
    id: string;
    name: string;
    material: string;
  };
}

const FileCard: React.FC<FileCardProps> = ({ data }) => {
  return (
    <Card
      title={data.name}
      className="card"
      style={{
        marginBottom: "15px",
        boxShadow: "1px 4px 11px -2px rgba(135,135,135,0.75)",
      }}
    >
      {data.material}
    </Card>
  );
};

export default FileCard;

2. Use the Reusable Card Component in a List: Now, you can use this reusable card component within a list and pass the data source to it.

import React from "react";
import { List, useTable } from "@refinedev/antd";
import { Space } from "antd";
import FileCard from "../components/FileCard";

const FileList: React.FC = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        {tableProps.dataSource?.map((record) => (
          <FileCard key={record.id} data={record} />
        ))}
      </Space>
    </List>
  );
};

export default FileList;

import React from "react";
import { List, useTable } from "@refinedev/antd";
import { Space } from "antd";
import FileCard from "../components/FileCard";

const FileList: React.FC = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        {tableProps.dataSource?.map((record) => (
          <FileCard key={record.id} data={record} />
        ))}
      </Space>
    </List>
  );
};

export default FileList;

In this setup: - The FileCard component is designed to be reusable and accepts a data prop. - The FileList component uses the useTable hook to fetch data and then maps through the data to render a FileCard for each item. This approach ensures that your card implementation is reusable and reduces redundancy in your code. For more information on using the List component in refine, you can refer to the List documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/list/). If you need further customization or additional functionalities, you can refer to the Ant Design Card documentation (https://ant.design/components/card/) for more options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

List, consist of cards

Did you find this page helpful?