title: Why aren't these react-data-grid columns resizable?
body: <p>I'd like to have a react-data-grid with editable data and resizable columns.  Only the last column of my example can be resized. </p>
  
  <p>I have combined 'Basic Editing' and 'Column Resizing' from <a href="https://adazzle.github.io/react-data-grid/docs/examples/column-resizing" rel="nofollow noreferrer">https://adazzle.github.io/react-data-grid/docs/examples/column-resizing</a>.</p>
  
  <pre><code>import React from 'react';
  import ReactDataGrid from 'react-data-grid';
  
  const defaultColumnProperties = {
    editable: true, 
    resizable: true, 
    width: 120,
  };
  const columns = [
    { key: 'id', name: 'ID' },
    { key: 'title', name: 'Title' },
    { key: 'complete', name: 'Complete' },
  ].map(c =&gt; ({ ...c, ...defaultColumnProperties }));;
  
  const rows = [
    { id: 0, title: 'Task 1', complete: 20 },
    { id: 1, title: 'Task 2', complete: 40 },
  ];
  
  class Example extends React.Component {
    state = { rows };
  
    onGridRowsUpdated = ({ fromRow, toRow, updated }) =&gt; {
      this.setState(state =&gt; {
        const rows = state.rows.slice();
        for (let i = fromRow; i &lt;= toRow; i++) {
          rows[i] = { ...rows[i], ...updated };
        }
        return { rows };
      });
    };
  
    render() {
      return (
        &lt;ReactDataGrid
          columns={columns}
          rowGetter={i =&gt; this.state.rows[i]}
          rowsCount={this.state.rows.length}
          minHeight={500}
          onColumnResize={(idx, width) =&gt;
            console.log(`Column ${idx} has been resized to ${width}`)
          }
          onGridRowsUpdated={this.onGridRowsUpdated}
          enableCellSelect
        /&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>I expect to be able to grab the vertical separator between column 1 and 2, and drag to widen column 1, but the only grabbable column separator is after the last column, and so the only column I can resize is the last column.</p>