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)