72 lines
3.3 KiB
TypeScript
72 lines
3.3 KiB
TypeScript
import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
|
|
import React, { useEffect } from "react";
|
|
import "@scss/transactions.scss";
|
|
|
|
function createData(
|
|
d: string,
|
|
description: string,
|
|
amount: number,
|
|
total: number
|
|
) {
|
|
const date: Date = new Date(d);
|
|
return { date, description, amount, total };
|
|
}
|
|
|
|
const rows = [
|
|
createData("05.10.2022", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
|
|
createData("04.10.2022", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
|
|
createData("30.09.2022", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
|
|
createData("30.09.2022", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
|
|
createData("15.08.2022", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
|
|
createData("12.08.2022", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
|
|
createData("5.08.2022", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
|
|
createData("1.08.2022", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
|
|
createData("26.07.2022", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
|
|
createData("20.07.2022", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
|
|
];
|
|
|
|
|
|
export default function Transactions() {
|
|
return (
|
|
<div id="tablePage">
|
|
<header>
|
|
header
|
|
</header>
|
|
<aside>
|
|
sidebar
|
|
</aside>
|
|
<main>
|
|
<TableContainer className="table" component={Paper}>
|
|
<Table aria-label="simple table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Date</TableCell>
|
|
<TableCell>Description</TableCell>
|
|
<TableCell align="right">Amount</TableCell>
|
|
<TableCell align="right">Total</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row) => (
|
|
<TableRow
|
|
key={row.date.getDate()}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
<TableCell component="th" scope="row">
|
|
{row.date.toDateString()}
|
|
</TableCell>
|
|
<TableCell>{row.description}</TableCell>
|
|
<TableCell align="right">{row.amount}</TableCell>
|
|
<TableCell align="right">{row.total}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</main>
|
|
<footer>
|
|
footer
|
|
</footer>
|
|
</div>
|
|
);
|
|
} |