forked from sheetjs/docs.sheetjs.com
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { utils, writeFileXLSX } from 'xlsx';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell 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';
|
|
|
|
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 BasicTable() {
|
|
const tbl = useRef<HTMLTableElement>(null);
|
|
return ( <>
|
|
<button onClick={() => {
|
|
const wb = utils.table_to_book(tbl.current);
|
|
writeFileXLSX(wb, "SheetJSMaterialUI.xlsx");
|
|
}}>Export</button>
|
|
<TableContainer component={Paper}>
|
|
<Table sx={{ minWidth: 650 }} aria-label="simple table" ref={tbl}>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>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.name}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
<TableCell 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>
|
|
</TableContainer>
|
|
</> );
|
|
} |