update table

Author: meanstackmax

src/components/Cell.jsx

@@ -9,14 +9,14 @@ export default class Cell extends React.Component {
     render() {
         const {value, onEdit, data} = this.props
 
-        if (Array.isArray(value)) {
+        if (value instanceof Object) {
             return <td>
                 <select className="form-control"
                         data-column={data.columnIndex}
                         data-row={data.rowIndex}
                         onChange={onEdit}
-                        value={value}>
-                    {value.map((item, i) => <option key={i}>{item}</option>)}
+                        value={value.selected}>
+                    {value.items.map((item, i) => <option key={i}>{item}</option>)}
                 </select>
             </td>
         }

src/components/CellDropdown.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export default class CellDropdown extends React.Component {
+    state = {}
+
+    componentDidMount() {
+        this.setState({value: this.props.value})
+    }
+    onChange(e,data){
+        this.props.onChange(e,this.state.value,data)
+    }
+
+    render() {
+        const {value, data} = this.props
+        return <select className="form-control"
+                       onChange={this.onChange.bind(this, {data, value: this.state.value})}
+                       value={value.selected}>
+            {value.items.map((item, i) => <option key={i}>{item}</option>)}
+        </select>
+    }
+}

src/pages/Index.jsx

@@ -3,41 +3,60 @@ import React, {Component} from 'react'
 import Layout from "../components/Layout";
 import DinamicTable from "../components/DinamicTable";
 
+const table = {
+    dataSource: [
+        [
+            "asdasd",
+            23,
+            343,
+            {
+                selected: 'hello',
+                items: ["hello", 'rich', 23]
+            }
 
-export default class Index extends Component {
+        ],
+        [
+            "asdasd",
+            23,
+            343,
+        ],
+        [
+            "asdasd",
+            23,
+            343,
+        ],
+        [
+            "asdasd",
+            23,
+            343,
+        ],
+    ],
+    columns: [
+        'TEXT',
+        'NUMBER 1',
+        'NUMBER 2',
+        'SUM',
+        'DROPDOWN',
+    ]
+}
 
+export default class Index extends Component {
 
     state = {
-        dataSource: [
-            [
-                "asdasd",
-                23,
-                343,
-                ["hello", 'rich', 23]
-            ],
-            [
-                "asdasd",
-                23,
-                343,
-            ],
-            [
-                "asdasd",
-                23,
-                343,
-            ],
-            [
-                "asdasd",
-                23,
-                343,
-            ],
-        ],
-        columns: [
-            'TEXT',
-            'NUMBER 1',
-            'NUMBER 2',
-            'SUM',
-            'DROPDOWN',
-        ]
+        columns: [],
+        dataSource: []
+    }
+
+    componentDidMount() {
+        const dataSource = table.dataSource
+        const columns = table.columns
+
+        dataSource.forEach((item, index) => {
+            while (item.length < columns.length) {
+                item.push("")
+            }
+        })
+        this.setState({dataSource, columns})
     }
 
     editCell({target}) {
@@ -68,7 +87,6 @@ export default class Index extends Component {
     handleAddColumn() {
         const {columns, dataSource} = this.state
 
-
         columns.push('column name')
 
         dataSource.forEach((item, index) => {
@@ -81,11 +99,7 @@ export default class Index extends Component {
 
     handleAddRow() {
         const {columns, dataSource} = this.state
-
-
         dataSource.push(Array(columns.length).fill(""))
-
-
         this.setState({dataSource})
     }