title: Single editable table row on add or edit
body: <p>I have a react-table in my react app which renders rows of transactions. I have logic that adds a new, empty row on a button click. I want this row (and only this row) to be editable so that I can use it to create new transactions. I've tried to accomplish this using the <code>Cell</code> column property and the row index from the cellInfo. This works to make only the single column that I'm testing with editable, but the rest of the cells in that column are blank.</p>
  
  <p><a href="https://i.stack.imgur.com/XBD80.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XBD80.png" alt="enter image description here"></a></p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  import ReactTable from "react-table";
  import "react-table/react-table.css";
  
  const API = 'http://127.0.0.1:8000/api/transactions/';
  
  class Transactions extends React.Component {
  
    constructor() {
      super();
  
      this.state = {
        data: [],
        isLoading: true,
        error: null
      };
      this.fetchData = this.fetchData.bind(this);
      this.handleAddTransaction = this.handleAddTransaction.bind(this);
      this.renderEditable = this.renderEditable.bind(this);
    }
  
    handleAddTransaction() {
      let newEmptyRow = {
        date: "",
        payee: "",
        category: "",
        amount: ""
      }
  
      const insert = (arr, index, newItem) =&gt; [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
      console.log(newEmptyRow);
      this.setState(currentState =&gt; ({ data: insert(currentState.data, 0, newEmptyRow) }));
    }
  
    fetchData(state, instance) {
      this.setState({
        isLoading: true
      });
  
      axios.get(API).then(response =&gt; {
        this.setState({
          data: response.data.results,
          isLoading: false
        });
      });
    }
  
    renderEditable(cellInfo) {
      if(cellInfo.row._index === 0) {
        return (
          &lt;div
            style={{ backgroundColor: "#009999" }}
            contentEditable
            suppressContentEditableWarning
            onBlur={e =&gt; {
              const data = [...this.state.data];
              data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
              this.setState({ data });
            }}
            dangerouslySetInnerHTML={{
              __html: this.state.data[cellInfo.index][cellInfo.column.id]
            }}
          /&gt;
        );
      }
    }
  
    render() {
      const {
        data,
        isLoading
      } = this.state;
  
      return (
        &lt;div&gt;
          &lt;button onClick={this.handleAddTransaction} type="button"&gt;New +&lt;/button&gt;
          &lt;div&gt;
            &lt;ReactTable
              columns = {[
              {
                Header: 'Date',
                accessor: 'date',
                width: 200,
                Cell: this.renderEditable
              },
              {
                Header: 'Payee',
                accessor: 'payee',
                width: 400
              },
              {
                Header: 'Category',
                accessor: 'category',
                width: 200
              },
              {
                Header: 'Amount',
                accessor: 'amount',
                width: 200
              },
              {
                Header: 'Balance',
                accessor: 'balance',
                width: 200
              }]}
              data = {data}
              onFetchData={this.fetchData} // Request new data when things change
              defaultPageSize = {500}
              sortable = {false}
              manual
              style={{
                // This will force the table body to overflow and scroll
                // TODO Finalize height
                height: "800px"
              }}
              loading={isLoading}
              className="-striped -highlight"
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;)
    };
  }
  
  export default Transactions;
  </code></pre>