We uses tables to display the data in organized way. Sometimes, we need to create dynamic tables in react with edit features.
Create editable table in React
class EditableCell extends React.Component {
render() {
return (
<td>
<input type='text' name={this.props.cellData.type} id={this.props.cellData.id} value={this.props.cellData.value} onChange={this.props.onProductTableUpdate}/>
</td>
);
}
}
Now, we have component <<EditableCell /> now we can use this in our class or functional components. Below we have created components where we are using <EditableCell /> component.
class ListItems extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state.list_items = [
{
id: 1,
name: 'PHP'
}, {
id: 2,
name: 'MYSQL'
}
];
}
handleUserInput(userInput) {
};
handleRowDel(list_item) {
var index = this.state.list_items.indexOf(list_item);
this.state.list_items.splice(index, 1);
this.setState(this.state.list_items);
};
handleAddEvent(evt) {
var id = (+ new Date() + Math.floor(Math.random() * 999999)).toString(36);
var list_item = {
id: id,
name: "",
}
this.state.list_items.push(list_item);
this.setState(this.state.list_items);
}
handlelistItemTable(evt) {
var item = {
id: evt.target.id,
name: evt.target.name,
value: evt.target.value
};
var list_items = this.state.list_items.slice();
var newlist_items = list_items.map(function(list_item) {
for (var key in list_item) {
if (key == item.name && list_item.id == item.id) {
list_item[key] = item.value;
}
}
return list_item;
});
this.setState({list_items:newlist_items});
};
render() {
var list_item = this.state.list_items.map(function(list_item) {
return (
<tr className="eachRow">
<EditableCell onlistItemTableUpdate={(e)=>this.handlelistItemTable(e)} cellData={{
"type": "name",
value: list_item.name,
id: list_item.id
}}/>
<td className="del-cell">
<input type="button" onClick={(list_item)=>this.handleRowDel(list_item)} value="X" className="del-btn"/>
</td>
</tr>
)
});
return (
<div>
<button type="button" onClick={(e)=>this.handleAddEvent(e)} className="btn btn-success pull-right">Add</button>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{list_item}
</tbody>
</table>
</div>
);
}
}
ReactDOM.render( < ListItems / > , document.getElementById('container'));
Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials please visit my website.
Thanks:)
Happy Coding:)
Top comments (0)