React Bootstrap Table with custom filter

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/2.5.5/react-bootstrap-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/2.5.5/react-bootstrap-table-all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">Loading...</div>

JavaScript 1.7

var products = [];
function addProducts(quantity) {
    var startId = products.length;
    for (var i = 0; i < quantity; i++) {
        var id = startId + i;
        products.push({
            name: "Item name " + id,
            price: Math.random() * (10 - 1) + 1,
        });
    }
}
addProducts(5);

class RangeFilter extends React.Component {
    constructor(props) {
        super(props);
        this.filter = this.filter.bind(this);
        this.isFiltered = this.isFiltered.bind(this);
    }

    filter(event) { console.log('step 1 - call filterhandler and callback...')}
    isFiltered(targetValue) { console.log('step 2 - do boolean filtering')}
    
    renderPopover() {
      return (
        <ReactBootstrap.Popover id="popover-positioned-bottom">
         	<input ref="min" type="number" className="filter" onChange={this.filter} placeholder="min" />
          <input ref="max" type="number" className="filter" onChange={this.filter} placeholder="max" />
        </ReactBootstrap.Popover>
      );
    }
    
    render() {
      const overlayProps = {
        overlay: this.renderPopover(),
        placement: 'bottom',
        trigger: 'click',
      };

      return (
        <ReactBootstrap.OverlayTrigger {...overlayProps}>
        	<ReactBootstrap.Button>[open filter menu]</ReactBootstrap.Button>
        </ReactBootstrap.OverlayTrigger>
      );
    }
};


function getCustomFilter(filterHandler, customFilterParameters) {
    return (
      <RangeFilter filterHandler={filterHandler} />
    );
}

class CustomFilter extends React.Component {
		constructor(props) {
    	super(props);
      this.state = { showModal: false }
      this.openModal = this.openModal.bind(this);
      this.close = this.close.bind(this);
    }
    close() { this.setState({ showModal: false }); }
    openModal() { this.setState({ showModal: true }); }
    render() {
        return (
          <div>
            <button onClick={this.openModal}>Open Table</button>
            
           ...