remote-alternative.jsx

class RemoteStoreAlternative extends React.Component {
  constructor(props) {
    super(props);
    this.products = getProducts();
    this.state = {
      data: this.products
    };
  }

  onCellEdit = (row, fieldName, value) => {
    const { data } = this.state;
    let rowIdx;
    const targetRow = data.find((prod, i) => {
      if (prod.id === row.id) {
        rowIdx = i;
        return true;
      }
      return false;
    });
    if (targetRow) {
      targetRow[fieldName] = value;
      data[rowIdx] = targetRow;
      this.setState({ data });
    }
  }

  onAddRow = (row) => {
    this.products.push(row);
    this.setState({
      data: this.products
    });
  }

  onDeleteRow = (row) => {
    this.products = this.products.filter((product) => {
      return product.id !== row[0];
    });

    this.setState({
      data: this.products
    });
  }

  render() {
    return (
      <RemoteAlternative
        onCellEdit={ this.onCellEdit }
        onAddRow={ this.onAddRow }
        onDeleteRow={ this.onDeleteRow }
        { ...this.state } />
    );
  }
}

class RemoteAlternative extends React.Component {
  constructor(props) {
    super(props);
  }

  remote(remoteObj) {
    // Only cell editing, insert and delete row will be handled by remote store
    remoteObj.cellEdit = true;
    remoteObj.insertRow = true;
    remoteObj.dropRow = true;
    return remoteObj;
  }

  render() {
    const cellEditProp = {
      mode: 'click'
    };
    const selectRow = {
      mode: 'checkbox',
      cliclToSelct: true
    };
    return (
      <BootstrapTable data={ this.props.data }
                      selectRow={ selectRow }
                      remote={ this.remote }
                      insertRow deleteRow search pagination
                      cellEdit={ cellEditProp }
                      options={ {
                        onCellEdit: this.props.onCellEdit,
                        onDeleteRow: this.props.onDeleteRow,
                        onAddRow: this.props.onAddRow
                      } }>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price' dataSort>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}