41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
|
import { NoSsr } from '@mui/base/NoSsr';
|
||
|
|
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';
|
||
|
|
|
||
|
|
const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
|
||
|
|
const rows = Array.from(new Array(100)).map(() => data);
|
||
|
|
|
||
|
|
export default function TableMui() {
|
||
|
|
return (
|
||
|
|
<NoSsr defer>
|
||
|
|
<Table>
|
||
|
|
<TableHead>
|
||
|
|
<TableRow>
|
||
|
|
<TableCell>Dessert (100g serving)</TableCell>
|
||
|
|
<TableCell>Calories</TableCell>
|
||
|
|
<TableCell>Fat (g)</TableCell>
|
||
|
|
<TableCell>Carbs (g)</TableCell>
|
||
|
|
<TableCell>Protein (g)</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableHead>
|
||
|
|
<TableBody>
|
||
|
|
{rows.map((row, index) => (
|
||
|
|
<TableRow key={index}>
|
||
|
|
<TableCell component="th" scope="row">
|
||
|
|
{row.name}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>{row.calories}</TableCell>
|
||
|
|
<TableCell>{row.fat}</TableCell>
|
||
|
|
<TableCell>{row.carbs}</TableCell>
|
||
|
|
<TableCell>{row.protein}</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</NoSsr>
|
||
|
|
);
|
||
|
|
}
|