title: React virtualized table - sort and sortBy
body: <p>I'm trying to make my react virtualized table sortable. I want the table sort by a particular column when click on a sortable header. I've followed the docs but it dosen't work at all so far. Here is the code:</p>
  
  <pre><code>// @flow
  import React from 'react';
  
  import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
  import { Table, Column, SortDirection } from 'react-virtualized/dist/commonjs/Table';
  import 'react-virtualized/styles.css';
  import './table.css';
  
  class TableView extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              sortBy: 'index',
              sortDirection: SortDirection.ASC 
          };
      }
      render() {
    if (this.props.table.length &lt; 1) return null;
    const list = this.props.table[0].tabs.map(function({ info, call_stats, ...a }) {
      var call_stats_lookup = {
        lookup_max: 0,
        lookup_min: 0,
        lookup_median: 0,
        lookup_percentile_75: 0,
        lookup_percentile_90: 0,
        lookup_percentile_95: 0,
        lookup_percentile_99: 0,
        lookup_percentile_999: 0,
        lookup_count: 0
      };
      var call_stats_insert = {
        insert_max: 0,
        insert_min: 0,
        insert_median: 0,
        insert_percentile_75: 0,
        insert_percentile_90: 0,
        insert_percentile_95: 0,
        insert_percentile_99: 0,
        insert_percentile_999: 0,
        insert_count: 0
      };
      if (call_stats !== 'undefined' &amp;&amp; typeof call_stats !== 'undefined') {
        var Lookup = call_stats.filter(function(obj) {
          return obj.func === 'lookup';
        });
        var Insert = call_stats.filter(function(obj) {
          return obj.func === 'insert';
        });
        if (Lookup.length !== 0) {
          call_stats_lookup.lookup_max = Lookup[0].time.max;
          call_stats_lookup.lookup_min = Lookup[0].time.min;
          call_stats_lookup.lookup_median = Lookup[0].time.median;
          call_stats_lookup.lookup_percentile_75 = Lookup[0].time.percentile[75];
          call_stats_lookup.lookup_percentile_90 = Lookup[0].time.percentile[90];
          call_stats_lookup.lookup_percentile_95 = Lookup[0].time.percentile[95];
          call_stats_lookup.lookup_percentile_99 = Lookup[0].time.percentile[99];
          call_stats_lookup.lookup_percentile_999 =
            Lookup[0].time.percentile[999];
          call_stats_lookup.lookup_count = Lookup[0].count;
        }
        if (Insert.length !== 0) {
          call_stats_insert.insert_max = Insert[0].time.max;
          call_stats_insert.insert_min = Insert[0].time.min;
          call_stats_insert.insert_median = Insert[0].time.median;
          call_stats_insert.insert_percentile_75 = Insert[0].time.percentile[75];
          call_stats_insert.insert_percentile_90 = Insert[0].time.percentile[90];
          call_stats_insert.insert_percentile_95 = Insert[0].time.percentile[95];
          call_stats_insert.insert_percentile_99 = Insert[0].time.percentile[99];
          call_stats_insert.insert_percentile_999 =
            Insert[0].time.percentile[999];
          call_stats_insert.insert_count = Insert[0].count;
        }
      }
      var call_stats_obj = {
        ...call_stats_insert,
        ...call_stats_lookup
      };
      return { ...a, ...info, ...call_stats_obj };
    });
    const rowGetter = ({ index }) =&gt; list[index];
    return (
      &lt;AutoSizer&gt;
        {({ width, height }) =&gt; (
          &lt;Table
            ref="Table"
            disableHeader={false}
            width={width}
            headerHeight={50}
            height={height}
            rowHeight={30}
            rowGetter={rowGetter}
            rowCount={list.length}
            sortBy={this.state.sortBy}
            sortDirection={this.state.sortDirection}
            rowClassName={({ index }) =&gt; {
                if(index !== -1){
                    return 'ets-table-row';
                } else {
                    return 'ets-table-header';
                }
            }}
            sort={({ sortBy, sortDirection }) =&gt; {
                this.setState({sortBy, sortDirection});
            }}
          &gt;
            &lt;Column
              width={150}
              label="Name"
              cellRenderer={({ cellData }) =&gt; cellData}
              dataKey="name"
              disableSort={false}
            className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="Memory"
              dataKey="memory"
              cellRenderer={({ cellData }) =&gt; cellData}
              disableSort={false}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="Size"
              dataKey="size"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="Type"
              disableSort
              dataKey="type"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="Write concurrency"
              disableSort
              dataKey="write_concurrency"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="Read concurrency"
              disableSort
              dataKey="read_concurrency"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="lookup max time"
              dataKey="lookup_max"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="lookup count"
              dataKey="lookup_count"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="insert max time"
              dataKey="insert_max"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
            &lt;Column
              width={100}
              label="insert count"
              dataKey="insert_count"
              cellRenderer={({ cellData }) =&gt; cellData}
              className={'ets-table-cell'}
            /&gt;
          &lt;/Table&gt;
        )}
      &lt;/AutoSizer&gt;
    );
    }
  }
  
  export default TableView;
  </code></pre>
  
  <p>Any help will be appreciated!</p>