62 lines
3.0 KiB
TypeScript
62 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
|
|
|
|
function createData(
|
|
d: string,
|
|
description: string,
|
|
amount: number,
|
|
total: number
|
|
) {
|
|
const date: Date = new Date(d);
|
|
return { date, description, amount, total };
|
|
}
|
|
|
|
const rows = [
|
|
createData("2022-10-05", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
|
|
createData("2022-10-04", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
|
|
createData("2022-09-30", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
|
|
createData("2022-09-29", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
|
|
createData("2022-08-15", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
|
|
createData("2022-08-12", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
|
|
createData("2022-08-05", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
|
|
createData("2022-08-01", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
|
|
createData("2022-07-26", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
|
|
createData("2022-07-20", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
|
|
];
|
|
|
|
export default () => {
|
|
function CHF_currency(amount: number){
|
|
return `CHF ${Math.round(amount) == amount ? (amount + ".-") : amount}`
|
|
}
|
|
|
|
return (
|
|
<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.getTime()}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
<TableCell component="th" scope="row">
|
|
{row.date.toLocaleDateString()}
|
|
</TableCell>
|
|
<TableCell className="description">{row.description}</TableCell>
|
|
<TableCell align="right" className={"amount " + (row.amount < 0 ? "negative" : "positive")}>{CHF_currency(row.amount)}</TableCell>
|
|
<TableCell align="right" className="total">{CHF_currency(row.total)}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)
|
|
}
|