// ** React Imports import { useState, Fragment } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import Paper from '@mui/material/Paper' import Table from '@mui/material/Table' import Collapse from '@mui/material/Collapse' import TableRow from '@mui/material/TableRow' import TableHead from '@mui/material/TableHead' import TableBody from '@mui/material/TableBody' import TableCell from '@mui/material/TableCell' import Typography from '@mui/material/Typography' import IconButton from '@mui/material/IconButton' import TableContainer from '@mui/material/TableContainer' // ** Icons Imports import ChevronUp from 'mdi-material-ui/ChevronUp' import ChevronDown from 'mdi-material-ui/ChevronDown' const createData = (name: string, calories: number, fat: number, carbs: number, protein: number, price: number) => { return { name, calories, fat, carbs, protein, price, history: [ { date: '2020-01-05', customerId: '11091700', amount: 3 }, { date: '2020-01-02', customerId: 'Anonymous', amount: 1 } ] } } const Row = (props: { row: ReturnType }) => { // ** Props const { row } = props // ** State const [open, setOpen] = useState(false) return ( *': { borderBottom: 'unset' } }}> setOpen(!open)}> {open ? : } {row.name} {row.calories} {row.fat} {row.carbs} {row.protein} History Date Customer Amount Total price ($) {row.history.map(historyRow => ( {historyRow.date} {historyRow.customerId} {historyRow.amount} {Math.round(historyRow.amount * row.price * 100) / 100} ))}
) } const rows = [ createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99), createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99), createData('Eclair', 262, 16.0, 24, 6.0, 3.79), createData('Cupcake', 305, 3.7, 67, 4.3, 2.5), createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5) ] const TableCollapsible = () => { return ( Dessert (100g serving) Calories Fat (g) Carbs (g) Protein (g) {rows.map(row => ( ))}
) } export default TableCollapsible