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>
							 | 
						||
| 
								 | 
							
								  </> );
							 | 
						||
| 
								 | 
							
								}
							 |