47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
|
import Table from '@mui/joy/Table';
|
||
|
|
|
||
|
|
function createData(
|
||
|
|
name: string,
|
||
|
|
calories: number,
|
||
|
|
fat: number,
|
||
|
|
carbs: number,
|
||
|
|
protein: number,
|
||
|
|
) {
|
||
|
|
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 TableHover() {
|
||
|
|
return (
|
||
|
|
<Table hoverRow>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th style={{ width: '40%' }}>Column width (40%)</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat (g)</th>
|
||
|
|
<th>Carbs (g)</th>
|
||
|
|
<th>Protein (g)</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{rows.map((row) => (
|
||
|
|
<tr key={row.name}>
|
||
|
|
<td>{row.name}</td>
|
||
|
|
<td>{row.calories}</td>
|
||
|
|
<td>{row.fat}</td>
|
||
|
|
<td>{row.carbs}</td>
|
||
|
|
<td>{row.protein}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</Table>
|
||
|
|
);
|
||
|
|
}
|