title: Adapt React.createClass method to ES6 Class Component with react-data-grid
body: <p>I am working the <a href="https://github.com/adazzle/react-data-grid" rel="nofollow noreferrer">react-data-grid</a> library to create an filterable datatable in react. All of their examples use the depreciated <code>React.createClass</code> method, and I am trying to refactor to the ES6 Class Components.</p>
  
  <p>Specifically, I am trying to refactor the Filterable Grid example: </p>
  
  <ul>
  <li><a href="http://adazzle.github.io/react-data-grid/examples.html#/filterable-grid" rel="nofollow noreferrer">demo</a></li>
  <li><a href="http://adazzle.github.io/react-data-grid/scripts/example09-filterable-grid.js" rel="nofollow noreferrer">source</a></li>
  <li><a href="https://gist.github.com/pcooney10/18c448eec5b8426f9236a3d4a2760e02" rel="nofollow noreferrer">gist of non-refactored adaption that is working</a></li>
  </ul>
  
  <p>My refactored code looks like this:</p>
  
  <pre><code>import React from 'react'
  import ReactDataGrid from 'react-data-grid'
  const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons')
  
  class FilterableTable extends React.Component {
    constructor(props) {
      super(props);
  
      this._columns = [
        {
          key: 'id',
          name: 'ID',
          width: 80
        },
        {
          key: 'task',
          name: 'Title',
          editable: true
        },
        {
          key: 'priority',
          name: 'Priority',
          editable: true
        },
        {
          key: 'issueType',
          name: 'Issue Type',
          editable: true
        },
        {
          key: 'complete',
          name: '% Complete',
          editable: true
        },
        {
          key: 'startDate',
          name: 'Start Date',
          editable: true
        },
        {
          key: 'completeDate',
          name: 'Expected Complete',
          editable: true
        }
      ];
  
      this.state = { rows: this.createRows(1001), filters: {} };
      console.log(this.state);
    }
  
  
    getRandomDate = (start, end) =&gt; {
      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
    }
  
    createRows = () =&gt; {
      let rows = [];
      for (let i = 1; i &lt; 1000; i++) {
        rows.push({
          id: i,
          task: 'Task ' + i,
          complete: Math.min(100, Math.round(Math.random() * 110)),
          priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
          issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)],
          startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()),
          completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1))
        });
      }
  
      return rows;
    }
  
    getRows = () =&gt; {
      return Selectors.getRows(this.state);
    }
  
    getSize = () =&gt; {
      return this.getRows().length;
    }
  
    rowGetter = ( rowIdx ) =&gt; {
      let rows = this.getRows();
      return rows[rowIdx];
    }
  
    handleFilterChange = ({ filter }) =&gt; {
      let newFilters = Object.assign({}, this.state.filters);
      if (filter.filterTerm) {
        newFilters[filter.column.key] = filter;
      } else {
        delete newFilters[filter.column.key];
      }
      this.setState({ filters: newFilters });
    }
  
    onClearFilters = () =&gt; {
      // all filters removed
      this.setState({filters: {} });
    }
  
    render() {
      return (
        &lt;ReactDataGrid
          columns={this._columns}
          rowGetter={this.rowGetter}
          enableCellSelect={true}
          rowsCount={this.getSize()}
          minHeight={800}
          toolbar={&lt;Toolbar enableFilter={true}/&gt;}
          onAddFilter={this.handleFilterChange}
          onClearFilters={this.onClearFilters} /&gt;);
    }
  
  }
  
  export default FilterableTable
  </code></pre>
  
  <p><strong>Issue:</strong></p>
  
  <p>An issue arises when I click the filter button - a new header row is rendered (via the Toolbar component), but there is no input field. This screenshot shows the two examples side by side - my ES6 version on top and the createClass version on the bottom:
  <a href="https://i.stack.imgur.com/5A8Qm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5A8Qm.png" alt="screenshot comparison"></a></p>
  
  <p>I am not sure what is causing this, but have a feeling it might be due to the way I am importing <code>Toolbar</code> ? Any help or a point in the right direction would be greatly appreciated ! (As well as any other suggestions re refactoring this component.)</p>