Newer
Older
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
import * as React from "react";
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";
import Avatar from "@mui/material/Avatar";
export default function BasicTable({ rows }) {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell
style={{ fontSize: "1.15rem", fontWeight: "bold" }}
align="left"
>
Image
</TableCell>
<TableCell
style={{ fontSize: "1.15rem", fontWeight: "bold" }}
align="left"
>
Name
</TableCell>
<TableCell
style={{ fontSize: "1.15rem", fontWeight: "bold" }}
align="left"
>
Sport
</TableCell>
<TableCell
style={{ fontSize: "1.15rem", fontWeight: "bold" }}
align="left"
>
Date
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
align="left"
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell align="left" className="table_cell">
<Avatar src={row.sport.image} />
</TableCell>
<TableCell align="left" className="table_cell">
{row.user.name}
</TableCell>
<TableCell align="left" className="table_cell">
{row.sport.name}
</TableCell>
<TableCell align="left" className="table_cell">
{new Date(row.datetime).toLocaleString('uk')}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}