005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
import { styled } from '@mui/material/styles';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell, { tableCellClasses } 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 StyledTableCell = styled(TableCell)(({ theme }) => ({
|
|
[`&.${tableCellClasses.head}`]: {
|
|
backgroundColor: theme.palette.common.black,
|
|
color: theme.palette.common.white,
|
|
},
|
|
[`&.${tableCellClasses.body}`]: {
|
|
fontSize: 14,
|
|
},
|
|
}));
|
|
|
|
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
|
'&:nth-of-type(odd)': {
|
|
backgroundColor: theme.palette.action.hover,
|
|
},
|
|
// hide last border
|
|
'&:last-child td, &:last-child th': {
|
|
border: 0,
|
|
},
|
|
}));
|
|
|
|
function createData(name, calories, fat, carbs, protein) {
|
|
return { name, calories, fat, carbs, protein };
|
|
}
|
|
|
|
const rows = [
|
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
|
];
|
|
|
|
export default function CustomizedTables() {
|
|
return (
|
|
<TableContainer component={Paper}>
|
|
<Table sx={{ minWidth: 700 }} aria-label="customized table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
|
<StyledTableCell align="right">Calories</StyledTableCell>
|
|
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
|
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
|
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row) => (
|
|
<StyledTableRow key={row.name}>
|
|
<StyledTableCell component="th" scope="row">
|
|
{row.name}
|
|
</StyledTableCell>
|
|
<StyledTableCell align="right">{row.calories}</StyledTableCell>
|
|
<StyledTableCell align="right">{row.fat}</StyledTableCell>
|
|
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
|
|
<StyledTableCell align="right">{row.protein}</StyledTableCell>
|
|
</StyledTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|