title: How to add sorting to table with react virtualized?
body: <p>I am trying to add sorting to my project with the table sorting demo on <a href="https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js" rel="noreferrer">Github</a>.</p>
  
  <p>My code:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized';
  import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
  
  import 'react-virtualized/styles.css';
  
  class NewTable extends React.Component {
    constructor(props) {
      super(props);
  
      this.dataList = props.list;
  
      this.state = {
        headerHeight: 50,
        rowHeight: 25,
        rowCount: this.dataList.length,
        height: 400,
        sortBy: 'columnone',
        sortDirection: SortDirection.ASC,
      };
  
      this.headerRenderer = this.headerRenderer.bind(this);
      this.sort = this.sort.bind(this);
    }
  
    isSortEnabled() {
      const list = this.dataList;
      const rowCount = this.state;
  
      return rowCount &lt;= list.length;
    }
  
    sort({ sortBy, sortDirection }) {
      this.setState({ sortBy, sortDirection });
    }
  
    headerRenderer({
      dataKey,
      sortBy,
      sortDirection,
    }) {
      return (
        &lt;div&gt;
          Column One
          {sortBy === dataKey &amp;&amp;
            &lt;SortIndicator sortDirection={sortDirection} /&gt;
          }
        &lt;/div&gt;
      );
    }
  
    render() {
      const {
        headerHeight,
        height,
        rowHeight,
        sortBy,
        sortDirection,
      } = this.state;
  
      const list = this.dataList;
      const sortedList = this.isSortEnabled() ?
        (list.sortBy(item =&gt; item[sortBy]).update(list =&gt; sortDirection === SortDirection.DESC ?
          list.reverse() : list))
        : list;
  
      return (
        &lt;AutoSizer disableHeight&gt;
          {({ width }) =&gt; (
            &lt;Table
              headerHeight={headerHeight}
              height={height}
              rowCount={list.length}
              rowGetter={({ index }) =&gt; sortedList[index]}
              rowHeight={rowHeight}
              sort={this.sort}
              sortBy={sortBy}
              sortDirection={sortDirection}
              width={width}
            &gt;
              &lt;Column
                dataKey='columnone'
                headerRenderer={this.headerRenderer}
                disableSort={!this.isSortEnabled}
                width={200}
                flexGrow={1}
              /&gt;
            &lt;/Table&gt;
          )}
        &lt;/AutoSizer&gt;
      );
    }
  }
  
  export default NewTable;
  </code></pre>
  
  <p>My code shows the ASC and DESC arrows flipping up and down when clicked, but the actual sorting does not happen. What am I missing?</p>
  
  <p>I don't really understand where the sorting is happening. I see the functions, but I don't see where the output goes.</p>
  
  <p>Thank you!</p>
  
  <p>EDIT: Data enters as JSON.</p>