Create editable table in React

React Native, ReactJS

We uses tables to display the data in organized way. Sometimes, we need to create dynamic tables in react with edit features. Here, we will create editable table in react.

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'));

Recommendation

Create Searchbar Component in React

Create Barcode in React

Timeline in React

Using MongoDB in Node.js

Create QR Code in React

Create Tooltips in React

How to validate form in React

Create Progressbar in React

Context Menu in React

How to create charts in ReactJS

Create Popup Component in React

Create Drag and Drop List in React

MultiSelect Components in React

Create AutoComplete or Autosuggest in React

Types of Storage For React

Card Components in React

For more React Tutorials Click hereNode.js Tutorials Click here.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.