Sample application using version 3.0.0 of react-bootstrap-table

App.js

import React, { Component } from 'react';
import './App.css';
import ReactTable from './react-sample-table';

class App extends Component {
  render() {
    return (
      <div className="main main-raised">
        <div className="container">
          <ReactTable />
        </div>
      </div>
    );
  }
}

export default App;

react-bootstrap-table.patch.js

import ReactDOM from 'react-dom';
import { BootstrapTable as bt, TableHeaderColumn } from 'react-bootstrap-table';

// The class below is a wrapper around react-bootstrap-table library and overrides
// the Add button click event in the toolbar which launches a form.
// We want to override that behaviour by calling props.options.onAdd event handler
class BootstrapTable extends bt {
  componentDidMount() {
    super.componentDidMount();
    var onAdd = this.props.options || {};
    //var props = this.props;
    const dom = ReactDOM.findDOMNode(this);
    const addButton = dom.getElementsByClassName('react-bs-table-add-btn')[0];
    if (addButton) {
      addButton.onclick = function onclick(event) {
        event.stopPropagation();
        onAdd.onAdd();
      };
    }
  }

  render() {
    return super.render({ ...this.props });
  }
}

export {
  BootstrapTable,
  TableHeaderColumn
};

react-sample-table.js

/* eslint max-len: 0 */
/* eslint no-unused-vars: 0 */
/* eslint no-alert: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn, InsertButton } from './react-bootstrap-table.patch';

const products = [];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    products.push({
      id: id,
      name: 'Item name ' + id,
      price: 2100 + i
    });
  }
}

addProducts(5);

export default class ReactTable extends React.Component {

  createCustomInsertButton = () => {
    return (
      <InsertButton
        btnText='CustomInsertText'
        btnContextual='btn-warning'
        className='my-custom-class'
        btnGlyphicon='glyphicon-edit'/>
    );
  }

  render() {
    const options = {
      onAdd: this.createCustomInsertButton
    };
    return (
      <BootstrapTable data={ products } options={ options } insertRow>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

Hi Allen,

I think it's better to reconsider the name onAdd. It would imply a callback function and not a component that needs to be renedered. I would suggest naming it to addButton instead.

Hi @invalidred thanks so much for helping out! I did as you told me and added the InsertButton to the export list in react-bootstrap-table.patch.js. I still get the same error:

warning.js:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).