App.js
1.88 KB
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
import React, { Component } from 'react';
import './App.css';
import Customer from './components/Customer';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import { withStyles } from '@material-ui/core/styles';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit*3,
overflowX: "auto"
},
table: {
minWidth: 1080
}
})
const customers =[
{
'id': 1,
'image': 'https://placeimg.com/64/64/any',
'name': '이혜연',
'birthday': '000416',
'gender': '여자',
'job': '대학생'
},
{
'id': 2,
'image': 'https://placeimg.com/64/64/2',
'name': '김다은',
'birthday': '000101',
'gender': '여자',
'job': '재수생'
},
{
'id': 3,
'image': 'https://placeimg.com/64/64/3',
'name': '김석희',
'birthday': '900103',
'gender': '남자',
'job': '회사원'
},
]
class App extends Component {
render() {
const { classes } = this.props;
return (
<Paper className = {classes.root}>
<Table className = {classes.table}>
<TableHead>
<TableRow>
<TableCell>번호</TableCell>
<TableCell>이미지</TableCell>
<TableCell>이름</TableCell>
<TableCell>생년월일</TableCell>
<TableCell>성별</TableCell>
<TableCell>직업</TableCell>
</TableRow>
</TableHead>
<TableBody>
{customers.map(c=> { return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />)})}
</TableBody>
</Table>
</Paper>
);
}
}
export default withStyles(styles)(App);