1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import {
Toolbar,
Typography,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Paper,
} from '@material-ui/core';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing(3),
overflowX: 'auto',
},
table: {
minWidth: 700,
},
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return {
id,
name,
calories,
fat,
carbs,
protein
};
}
const data = [
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),
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Toolbar>
<div className={classes.title}>
<Typography variant="h6">Nutrition</Typography>
</div>
</Toolbar>
<Table className={classes.table}>
<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>
{data.map(n => ([
<TableRow key={n.id}>
<TableCell>{n.name}</TableCell>
<TableCell align="right">{n.calories}</TableCell>
<TableCell align="right">{n.fat}</TableCell>
<TableCell align="right">{n.carbs}</TableCell>
<TableCell align="right">{n.protein}</TableCell>
</TableRow>
])
)}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
|
