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