-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Table.jsx
102 lines (100 loc) · 3.37 KB
/
Table.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import "./table.scss";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
const List = () => {
const rows = [
{
id: 3453334,
product: "Acer Nitro 5",
img: "https://m.media-amazon.com/images/I/81bc8mA3nKL._AC_UY327_FMwebp_QL65_.jpg",
customer: "Tom Hanks",
date: "12 December",
amount: 1025,
method: "PayPal",
status: "Approved",
},
{
id: 3453248,
product: "Playstation 5",
img: "https://m.media-amazon.com/images/I/31JaiPXYI8L._AC_UY327_FMwebp_QL65_.jpg",
customer: "Roy Payton",
date: "10 December",
amount: 624.9,
method: "Card",
status: "Pending",
},
{
id: 3453134,
product: "Redragon S101",
img: "https://m.media-amazon.com/images/I/71kr3WAj1FL._AC_UY327_FMwebp_QL65_.jpg",
customer: "Jennie Nichols",
date: "15 November",
amount: 374.8,
method: "Cash on Delivery",
status: "Pending",
},
{
id: 3452832,
product: "Razer Blade 15",
img: "https://m.media-amazon.com/images/I/71wF7YDIQkL._AC_UY327_FMwebp_QL65_.jpg",
customer: "Tina Drake",
date: "23 October",
amount: 432.5,
method: "PayPal",
status: "Approved",
},
{
id: 3450642,
product: "ASUS ROG Strix",
img: "https://m.media-amazon.com/images/I/81hH5vK-MCL._AC_UY327_FMwebp_QL65_.jpg",
customer: "Alan Wake",
date: "22 October",
amount: 2340,
method: "Card",
status: "Pending",
},
];
return (
<TableContainer component={Paper} className="table">
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell className="tableCell">Tracking ID</TableCell>
<TableCell className="tableCell">Product</TableCell>
<TableCell className="tableCell">Customer</TableCell>
<TableCell className="tableCell">Date</TableCell>
<TableCell className="tableCell">Amount ($)</TableCell>
<TableCell className="tableCell">Payment Method</TableCell>
<TableCell className="tableCell">Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell className="tableCell">{row.id}</TableCell>
<TableCell className="tableCell">
<div className="cellWrapper">
<img src={row.img} alt="" className="image" />
{row.product}
</div>
</TableCell>
<TableCell className="tableCell">{row.customer}</TableCell>
<TableCell className="tableCell">{row.date}</TableCell>
<TableCell className="tableCell">{row.amount}</TableCell>
<TableCell className="tableCell">{row.method}</TableCell>
<TableCell className="tableCell">
<span className={`status ${row.status}`}>{row.status}</span>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default List;