Skip to content

Commit 53c21d6

Browse files
meanstackmaxmeanstackmax
committed
refactor table
1 parent eaf1aca commit 53c21d6

File tree

3 files changed

+104
-106
lines changed

3 files changed

+104
-106
lines changed

‎src/components/DinamicTable.jsx

+98-28
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,103 @@ import {Table} from "reactstrap"
33
import Cell from "./Cell";
44
import HeaderCell from "./HeaderCell";
55

6-
// export default class DinamicTable extends React.Component {
7-
// render() {
8-
// return
9-
// }
10-
// }
11-
export default ({data, columns, onEditCell, onAddRow, onAddColumn, onEditColumn}) => <Table>
12-
<thead>
13-
<tr>
14-
{columns.map((column, key) =>
15-
<HeaderCell value={column} onEdit={onEditColumn} key={key} data={{key}}/>
16-
)}
17-
<th>
18-
<i className='fa fa-plus' onClick={onAddColumn}/>
19-
</th>
20-
</tr>
21-
</thead>
22-
<tbody>
23-
{data.map((item, rowIndex) =>
24-
<tr key={rowIndex}>
25-
{item.map((value, columnIndex) =>
26-
<Cell key={columnIndex} value={value} onEdit={onEditCell} data={{rowIndex, columnIndex}}/>
27-
)}
28-
</tr>)}
29-
<tr>
30-
<td><i className='fa fa-plus' onClick={onAddRow}/></td>
31-
</tr>
32-
</tbody>
33-
</Table>
6+
export default class DinamicTable extends React.Component {
7+
state = {
8+
columns: [],
9+
dataSource: []
10+
}
3411

12+
componentDidMount() {
13+
const dataSource = this.props.data
14+
const columns = this.props.columns
15+
16+
dataSource.forEach((item) => {
17+
while (item.length < columns.length) {
18+
item.push("")
19+
}
20+
})
21+
this.setState({dataSource, columns})
22+
}
23+
24+
editCell({target}) {
25+
26+
const rowIndex = target.dataset.row
27+
const columnIndex = target.dataset.column
28+
const fieldValue = target.value
29+
30+
const {dataSource} = this.state
31+
32+
if (target.dataset.select) {
33+
dataSource[rowIndex][columnIndex] = {
34+
selected: fieldValue,
35+
items: JSON.parse(target.dataset.select)
36+
}
37+
} else {
38+
dataSource[rowIndex][columnIndex] = fieldValue;
39+
}
40+
41+
42+
this.setState({dataSource})
43+
}
44+
45+
editColumn({target}) {
46+
47+
const rowIndex = target.dataset.key
48+
const fieldValue = target.value
49+
50+
const {columns} = this.state
51+
52+
columns[rowIndex] = fieldValue;
53+
54+
this.setState({columns})
55+
}
56+
57+
handleAddColumn() {
58+
const {columns, dataSource} = this.state
59+
60+
columns.push('column name')
61+
62+
dataSource.forEach((item) => {
63+
item.push("")
64+
return item
65+
})
66+
67+
this.setState({columns, dataSource})
68+
}
69+
70+
handleAddRow() {
71+
const {columns, dataSource} = this.state
72+
dataSource.push(Array(columns.length).fill(""))
73+
this.setState({dataSource})
74+
}
75+
76+
render() {
77+
const {dataSource, columns} = this.state
78+
79+
return <Table>
80+
<thead>
81+
<tr>
82+
{columns.map((column, key) =>
83+
<HeaderCell value={column} onEdit={this.handleAddColumn.bind(this)} key={key} data={{key}}/>
84+
)}
85+
<th>
86+
<i className='fa fa-plus' onClick={this.handleAddColumn.bind(this)}/>
87+
</th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
{dataSource.map((item, rowIndex) =>
92+
<tr key={rowIndex}>
93+
{item.map((value, columnIndex) =>
94+
<Cell key={columnIndex} value={value} onEdit={this.editCell.bind(this)}
95+
data={{rowIndex, columnIndex}}/>
96+
)}
97+
</tr>)}
98+
<tr>
99+
<td><i className='fa fa-plus' onClick={this.handleAddRow.bind(this)}/></td>
100+
</tr>
101+
</tbody>
102+
</Table>
103+
}
104+
}
35105

‎src/pages/Index.jsx

+2-78
Original file line numberDiff line numberDiff line change
@@ -42,88 +42,12 @@ const table = {
4242

4343
export default class Index extends Component {
4444

45-
state = {
46-
columns: [],
47-
dataSource: []
48-
}
49-
50-
componentDidMount() {
51-
const dataSource = table.dataSource
52-
const columns = table.columns
53-
54-
dataSource.forEach((item, index) => {
55-
while (item.length < columns.length) {
56-
item.push("")
57-
}
58-
})
59-
this.setState({dataSource, columns})
60-
}
61-
62-
editCell({target}) {
63-
64-
const rowIndex = target.dataset.row
65-
const columnIndex = target.dataset.column
66-
const fieldValue = target.value
67-
68-
const {dataSource} = this.state
69-
70-
if (target.dataset.select) {
71-
dataSource[rowIndex][columnIndex] = {
72-
selected: fieldValue,
73-
items: JSON.parse(target.dataset.select)
74-
}
75-
} else {
76-
dataSource[rowIndex][columnIndex] = fieldValue;
77-
}
78-
79-
80-
this.setState({dataSource})
81-
}
82-
83-
editColumn({target}) {
84-
85-
const rowIndex = target.dataset.key
86-
const fieldValue = target.value
87-
88-
const {columns} = this.state
89-
90-
columns[rowIndex] = fieldValue;
91-
92-
this.setState({columns})
93-
}
94-
95-
handleAddColumn() {
96-
const {columns, dataSource} = this.state
97-
98-
columns.push('column name')
99-
100-
dataSource.forEach((item, index) => {
101-
item.push("")
102-
return item
103-
})
104-
105-
this.setState({columns, dataSource})
106-
}
107-
108-
handleAddRow() {
109-
const {columns, dataSource} = this.state
110-
dataSource.push(Array(columns.length).fill(""))
111-
this.setState({dataSource})
112-
}
113-
11445

11546
render() {
116-
const {dataSource} = this.state
117-
console.log(dataSource)
118-
11947
return <Layout>
12048
<DinamicTable
121-
data={this.state.dataSource}
122-
onEditColumn={this.editColumn.bind(this)}
123-
onEditCell={this.editCell.bind(this)}
124-
columns={this.state.columns}
125-
onAddColumn={this.handleAddColumn.bind(this)}
126-
onAddRow={this.handleAddRow.bind(this)}
49+
data={table.dataSource}
50+
columns={table.columns}
12751
/>
12852
</Layout>
12953
}

‎src/style.scss

+4
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@
99

1010
th .form-control {
1111
font-weight: bold;
12+
}
13+
14+
.table thead th {
15+
vertical-align: middle;
1216
}

0 commit comments

Comments
 (0)