DEV Community

Cover image for Editable table in React
Chetan Rohilla
Chetan Rohilla

Posted on • Originally published at readymadecode.com

Editable table in React

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

  }

}
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

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:)

Discussion (0)