Tables are user interface components used to present structured data in a tabular format, with rows and columns. They are commonly used for displaying and organizing large sets of data.
import React, { useState } from "react";
import { Avatar, Badge, Button, Dropdown, Grid, Space, Table, theme, Typography } from "antd";
import { DeleteOutlined, DownloadOutlined, EditOutlined, EllipsisOutlined, EyeOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onSelectChange = (selectedRowKeys) => {
setSelectedRowKeys(selectedRowKeys);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
const columns = [
{
title: "Invoice Number",
key: "number",
dataIndex: "number",
sorter: (a, b) => a.number.localeCompare(b.number),
},
{
title: "Date",
key: "date",
dataIndex: "date",
sorter: (a, b) => new Date(a.date) - new Date(b.date),
},
{
title: "Customer",
key: "customer",
width: 320,
render: (_, record) => (
<Space>
<Avatar
size="large"
alt={record.customerName}
src={record.customerAvatar}
>
{record.customerName
.split(" ")
.map((part) => part[0])
.join("")}
</Avatar>
<Space direction="vertical" size={0}>
<Text strong>{record.customerName}</Text>
<Text style={styles.text}>{record.customerEmail}</Text>
</Space>
</Space>
),
},
{
title: "Gross Amount",
key: "amount",
dataIndex: "amount",
align: "right",
sorter: (a, b) => parseFloat(a.amount) - parseFloat(b.amount),
render: (_, record) => <Text>${record.amount}</Text>,
},
{
title: "Status",
key: "status",
dataIndex: "status",
render: (_, record) => {
let badgeStatus;
if (record.status === "Draft") {
badgeStatus = "default";
} else if (record.status === "Paid") {
badgeStatus = "success";
} else if (record.status === "Overdue") {
badgeStatus = "error";
} else {
badgeStatus = "default"; // Default fallback status
}
return <Badge status={badgeStatus} text={record.status} />;
},
},
{
title: "",
key: "action",
align: "right",
width: 64,
fixed: "right",
render: (_, record) => (
<Dropdown
menu={{
items,
}}
placement="bottomRight"
>
<Button type="text" icon={<EllipsisOutlined />} />
</Dropdown>
),
},
];
const data = [
{
key: "1",
number: "01/2023",
date: "Jan 5, 2023",
amount: "140.00",
customerName: "John Brown",
customerAvatar:
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80",
customerEmail: "john.brown@example.com",
status: "Draft",
},
{
key: "2",
number: "02/2023",
date: "Jan 6, 2023",
amount: "200.00",
customerName: "Alice Smith",
customerAvatar: "",
customerEmail: "alice.smith@example.com",
status: "Paid",
},
{
key: "3",
number: "03/2023",
date: "Jan 7, 2023",
amount: "90.00",
customerName: "Emily Johnson",
customerAvatar:
"https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80",
customerEmail: "emily.johnson@example.com",
status: "Overdue",
},
{
key: "4",
number: "04/2023",
date: "Jan 8, 2023",
amount: "120.00",
customerName: "Michael Williams",
customerAvatar:
"https://images.unsplash.com/photo-1601455763557-db1bea8a9a5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80",
customerEmail: "michael.williams@example.com",
status: "Draft",
},
{
key: "5",
number: "05/2023",
date: "Jan 9, 2023",
amount: "180.00",
customerName: "Sophia Martinez",
customerAvatar: "",
customerEmail: "sophia.martinez@example.com",
status: "Paid",
},
{
key: "6",
number: "06/2023",
date: "Jan 10, 2023",
amount: "60.00",
customerName: "James Johnson",
customerAvatar: "",
customerEmail: "james.johnson@example.com",
status: "Overdue",
},
{
key: "7",
number: "07/2023",
date: "Jan 11, 2023",
amount: "220.00",
customerName: "Olivia Davis",
customerAvatar:
"https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80",
customerEmail: "olivia.davis@example.com",
status: "Draft",
},
{
key: "8",
number: "08/2023",
date: "Jan 12, 2023",
amount: "150.00",
customerName: "William Miller",
customerAvatar:
"https://images.unsplash.com/photo-1579492445-71938985f4e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80",
customerEmail: "william.miller@example.com",
status: "Paid",
},
];
const items = [
{
key: "1",
label: "View",
icon: <EyeOutlined />,
},
{
key: "3",
label: "Edit",
icon: <EditOutlined />,
},
{
key: "3",
label: "Download PDF",
icon: <DownloadOutlined />,
},
{
type: 'divider',
},
{
key: "4",
label: "Archive",
icon: <DeleteOutlined />,
danger: true,
},
];
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
text: {
color: token.colorTextSecondary
}
};
return (
<div style={styles.section}>
<div style={styles.container}>
<Table
pagination={false}
rowSelection={rowSelection}
columns={columns}
dataSource={data}
scroll={screens.lg ? "" : { x: token.screenXL }}
/>
</div>
</div>
);
}
import React from "react";
import { Avatar, Button, Dropdown, Grid, Rate, Space, Table, Tag, theme, Typography } from "antd";
import { CopyOutlined, DeleteOutlined, EditOutlined, EllipsisOutlined, EyeOutlined, FileOutlined, RollbackOutlined, ShareAltOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columns = [
{
title: "Product",
key: "product",
width: 320,
render: (_, record) => (
<Space size={"middle"}>
<Avatar
size="middle"
alt={record.productName}
src={record.productAvatar}
shape="square"
icon={<FileOutlined />}
/>
<Text strong>{record.productName}</Text>
</Space>
),
},
{
title: "Status",
key: "status",
dataIndex: "status",
render: (_, record) => (
<Tag color={record.status === "Published" ? "green" : "default"}>
{record.status}
</Tag>
),
},
{
title: "Price",
key: "price",
align: "right",
dataIndex: "price",
sorter: (a, b) => parseFloat(a.price) - parseFloat(b.price),
render: (_, record) => <Text>${record.price}</Text>,
},
{
title: "Total Sales",
key: "totalSales",
dataIndex: "totalSales",
align: "right",
sorter: (a, b) => a.totalSales - b.totalSales,
},
{
title: "Total Revenue",
key: "totalRevenue",
dataIndex: "totalRevenue",
align: "right",
sorter: (a, b) => parseFloat(a.totalRevenue) - parseFloat(b.totalRevenue),
render: (_, record) => <Text>${record.totalRevenue}</Text>,
},
{
title: "Reviews",
key: "reviews",
width: 180,
dataIndex: "reviews",
render: (_, record) => <Rate disabled defaultValue={record.reviews} />,
},
{
title: "",
key: "action",
align: "right",
width: 88,
fixed: "right",
render: (_, record) => (
<Space>
<Button type="text" icon={<ShareAltOutlined />} />
<Dropdown
menu={{
items,
}}
placement="bottomRight"
>
<Button type="text" icon={<EllipsisOutlined />} />
</Dropdown>
</Space>
),
},
];
const data = [
{
key: "1",
productName: "Digital Ebook Bundle",
productAvatar: "https://images.unsplash.com/photo-1455541504462-57ebb2a9cec1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
price: "29.99",
totalSales: 120,
totalRevenue: "3598.80",
reviews: 5,
status: "Published",
},
{
key: "2",
productName: "UI Kit Essentials",
productAvatar: "https://images.unsplash.com/photo-1581287053822-fd7bf4f4bfec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
price: "59.99",
totalSales: 80,
totalRevenue: "4799.20",
reviews: 4,
status: "Published",
},
{
key: "3",
productName: "Web Design Masterclass",
productAvatar: "",
price: "199.99",
totalSales: 0,
totalRevenue: "0.00",
reviews: 0,
status: "Draft",
},
{
key: "4",
productName: "Mobile App UI Kit",
productAvatar: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
price: "39.99",
totalSales: 100,
totalRevenue: "3999.00",
reviews: 4,
status: "Published",
},
{
key: "5",
productName: "Responsive Website Templates",
productAvatar: "https://images.unsplash.com/photo-1559028006-448665bd7c7f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
price: "49.99",
totalSales: 90,
totalRevenue: "4499.10",
reviews: 4,
status: "Published",
},
{
key: "6",
productName: "Social Media Graphics Pack",
productAvatar: "https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
price: "19.99",
totalSales: 150,
totalRevenue: "2998.50",
reviews: 5,
status: "Published",
},
{
key: "7",
productName: "UI/UX Design Crash Course",
productAvatar: "",
price: "99.99",
totalSales: 0,
totalRevenue: "0.00",
reviews: 0,
status: "Draft",
},
{
key: "8",
productName: "Icon Set Mega Bundle",
productAvatar: "https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
price: "79.99",
totalSales: 50,
totalRevenue: "3999.50",
reviews: 4,
status: "Published",
},
];
const items = [
{
key: "1",
label: "Edit",
icon: <EditOutlined />,
},
{
key: "2",
label: "Share",
icon: <ShareAltOutlined />,
},
{
key: "3",
label: "Preview",
icon: <EyeOutlined />,
},
{
key: "4",
label: "Unpublish",
icon: <RollbackOutlined />,
},
{
key: "5",
label: "Duplicate",
icon: <CopyOutlined />,
},
{
type: 'divider',
},
{
key: "6",
label: "Delete",
icon: <DeleteOutlined />,
danger: true,
},
];
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
text: {
color: token.colorTextSecondary
}
};
return (
<div style={styles.section}>
<div style={styles.container}>
<Table
pagination={false}
columns={columns}
dataSource={data}
scroll={screens.lg ? "" : { x: token.screenXL }}
/>
</div>
</div>
);
}
import React from "react";
import { Avatar, Button, Dropdown, Grid, Space, Table, Tag, theme, Typography } from "antd";
import { DeleteOutlined, EditOutlined, EllipsisOutlined, EyeOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columns = [
{
title: "Name",
key: "name",
render: (_, record) => (
<Space>
<Avatar size="large" alt={record.name} src={record.avatar}>
{record.name
.split(" ")
.map((part) => part[0])
.join("")}
</Avatar>
<Space direction="vertical" size={0}>
<Text strong>{record.name}</Text>
<Text style={styles.text}>{record.email}</Text>
</Space>
</Space>
),
},
{
title: "Phone",
key: "phone",
dataIndex: "phone",
},
{
title: "Job",
key: "job",
dataIndex: "job",
},
{
title: "Status",
key: "status",
dataIndex: "status",
render: (_, record) => (
<Tag color={record.statusActive ? "green" : "red"}>
{record.statusActive ? "Active" : "Not Active"}
</Tag>
),
},
{
title: "",
key: "action",
align: "right",
width: 64,
fixed: "right",
render: (_, record) => (
<Dropdown
menu={{
items,
}}
placement="bottomRight"
>
<Button type="text" icon={<EllipsisOutlined />} />
</Dropdown>
),
},
];
const data = [
{
key: "1",
name: "John Brown",
job: "Front-end developer",
avatar:
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80",
email: "john.brown@example.com",
phone: "00-123-456-922",
statusActive: true,
},
{
key: "2",
name: "Alice Smith",
job: "Backend Developer",
avatar:
"https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80",
email: "alice.smith@example.com",
phone: "00-987-654-321",
statusActive: false,
},
{
key: "3",
name: "Robert Johnson",
job: "UI/UX Designer",
avatar:
"https://images.unsplash.com/photo-1601455763557-db1bea8a9a5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80",
email: "robert.johnson@example.com",
phone: "00-555-123-789",
statusActive: true,
},
{
key: "4",
name: "Emily Davis",
job: "Product Manager",
avatar: "",
email: "emily.davis@example.com",
phone: "00-123-789-555",
statusActive: true,
},
{
key: "5",
name: "Michael Wilson",
job: "Software Engineer",
avatar:
"https://images.unsplash.com/photo-1579492445-71938985f4e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80",
email: "michael.wilson@example.com",
phone: "00-987-555-123",
statusActive: true,
},
{
key: "6",
name: "Sophia Johnson",
job: "Data Analyst",
avatar:
"https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80",
email: "sophia.johnson@example.com",
phone: "00-123-555-789",
statusActive: true,
},
];
const items = [
{
key: "1",
label: "View profile",
icon: <EyeOutlined />,
},
{
key: "2",
label: "Edit profile",
icon: <EditOutlined />,
},
{
type: 'divider',
},
{
key: "3",
label: "Delete",
icon: <DeleteOutlined />,
danger: true,
},
];
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeXXL}px 0px`
},
text: {
color: token.colorTextSecondary
}
};
return (
<div style={styles.section}>
<div style={styles.container}>
<Table pagination={false} columns={columns} dataSource={data} scroll={screens.lg ? "" : {x: token.screenXL}}/>
</div>
</div>
);
}
