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
65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell from '@mui/material/TableCell';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import Paper from '@mui/material/Paper';
|
|
|
|
let id = 0;
|
|
function createData(name, calories, fat, carbs, protein) {
|
|
id += 1;
|
|
return { id, 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),
|
|
];
|
|
|
|
function DenseCheckboxTable() {
|
|
return (
|
|
<Box sx={{ width: '100%' }}>
|
|
<Paper sx={{ mt: 3, width: '100%', overflowX: 'auto', mb: 2 }}>
|
|
<Table sx={{ minWidth: 650 }} size="small">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell padding="checkbox">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell padding="none">Dessert (100g serving)</TableCell>
|
|
<TableCell align="right">Calories</TableCell>
|
|
<TableCell align="right">Fat (g)</TableCell>
|
|
<TableCell align="right">Carbs (g)</TableCell>
|
|
<TableCell align="right">Protein (g)</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row) => (
|
|
<TableRow key={row.id}>
|
|
<TableCell padding="checkbox">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell padding="none" component="th" scope="row">
|
|
{row.name}
|
|
</TableCell>
|
|
<TableCell align="right">{row.calories}</TableCell>
|
|
<TableCell align="right">{row.fat}</TableCell>
|
|
<TableCell align="right">{row.carbs}</TableCell>
|
|
<TableCell align="right">{row.protein}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default DenseCheckboxTable;
|