title: How do I add column sort functionality to my table?
body: <p>I have tried now for a couple of hours to add sort functionality on a react-virtualized table, but can't get my head around it... here is the <a href="https://bvaughn.github.io/react-virtualized/#/components/Table" rel="nofollow noreferrer">example</a> and <a href="https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js" rel="nofollow noreferrer">source code</a>. Sorry, I was not able to create a plnkr, so I have attached a link to my github <a href="https://github.com/isaklafleur/autoMDM/blob/master/client/src/components/PartTable.js" rel="nofollow noreferrer">repo</a>.</p>
  
  <p>I get this error, when I submit the form with a input text SCREW for example:</p>
  
  <pre><code>TypeError: list.sortBy is not a function
      at PartTable._sortList (PartTable.js:136)
      at new PartTable (PartTable.js:18)
  </code></pre>
  
  <p>In the example on the <a href="https://bvaughn.github.io/react-virtualized/#/components/Table" rel="nofollow noreferrer">site</a> they uses context (<code>const { list } = this.context;</code>) instead of props. Maybe this is the issue?</p>
  
  <p>When I console log <code>this.props.list</code> I get the correct list (see the two example documents)</p>
  
  <pre><code>_sortList({ sortBy, sortDirection }) {
      const { list } = this.props;
  
      // console.log(list);
  
      return list
        .sortBy(item =&gt; item[sortBy])
        .update(
          list =&gt; (sortDirection === SortDirection.DESC ? list.reverse() : list)
        );
    }
  </code></pre>
  
  <p>Here are two objects coming from my server and into <code>props.list</code></p>
  
  <pre><code>[
    {
      customsTariff: "73181568",
      facility: "SDC",
      netWeight: "0,07",
      partName: "CAPSCREW",
      partNumber: "3121210233",
      __v: 0,
      _id: "59a9429ac0b7467bf084eb6e"
    },
    {
      customsTariff: "73481568",
      facility: "SDC",
      netWeight: "0,08",
      partName: "CAPSCREW2",
      partNumber: "3121210333",
      __v: 0,
      _id: "59a9429ac0b7463bf084eb6e"
    }
  ];
  </code></pre>
  
  <p><strong>Here is the code from PartTable.js</strong> </p>
  
  <pre><code>import React, { PureComponent } from "react";
  import { AutoSizer, Column, Table } from "react-virtualized";
  import { CSVLink, CSVDownload } from "react-csv";
  import Button from "material-ui/Button";
  import PropTypes from "prop-types";
  import SortDirection from "./SortDirection";
  import SortIndicator from "./SortIndicator";
  import Checkbox from "material-ui/Checkbox";
  import "react-virtualized/styles.css";
  import "../../styles/App.css";
  import styles from "./Table.example.css";
  
  export default class PartTable extends PureComponent {
    constructor(props) {
      super(props);
      const sortBy = "partNumber"; // I want to sort by partNumber by default
      const sortDirection = SortDirection.ASC;
      const sortedList = this._sortList({ sortBy, sortDirection });
  
      this.state = {
        sortBy,
        sortDirection,
        rowCount: 1000,
        sortedList
      };
      this._noRowsRenderer = this._noRowsRenderer.bind(this);
      this._generateCheckbox = this._generateCheckbox.bind(this);
      this._sort = this._sort.bind(this);
    }
  
    render() {
      // console.log(this.props.list);
      const { sortBy, sortDirection, sortedList } = this.state;
      const rowGetter = ({ index }) =&gt; this._getDatum(sortedList, index);
      const { list, headers } = this.props;
      return (
        &lt;div&gt;
          &lt;AutoSizer disableHeight&gt;
            {({ width }) =&gt; (
              &lt;Table
                width={width}
                height={500}
                headerHeight={50}
                rowHeight={50}
                rowCount={list.length}
                rowGetter={rowGetter}
                noRowsRenderer={this._noRowsRenderer}
                sort={this._sort}
                sortBy={sortBy}
                sortDirection={sortDirection}
              &gt;
                {headers.map(header =&gt; {
                  return (
                    &lt;Column
                      key={header.id}
                      label={header.label}
                      dataKey={header.id}
                      disableSort
                      width={100}
                      flexGrow={1}
                      cellRenderer={
                        header.index ? this._generateCheckbox : undefined
                      }
                    /&gt;
                  );
                })}
              &lt;/Table&gt;
            )}
          &lt;/AutoSizer&gt;
          &lt;CSVLink data={list}&gt;
            &lt;Button color="accent"&gt;Export {list.length} records to CSV&lt;/Button&gt;
          &lt;/CSVLink&gt;
        &lt;/div&gt;
      );
    }
  
    _noRowsRenderer() {
      return &lt;div&gt;No Parts here...&lt;/div&gt;;
    }
    _generateCheckbox(event) {
      // console.log(event);
      return (
        &lt;div className="table-check-box"&gt;
          {this.props.activeCheckboxes &amp;&amp; (
            &lt;Checkbox
              onChange={() =&gt; this.props._activeCheckbox(event.rowData._id)}
              checked={this.props.activeCheckboxes.includes(event.rowData._id)}
            /&gt;
          )}
          {event.cellData}
        &lt;/div&gt;
      );
    }
    _isSortEnabled() {
      const { list } = this.props;
      const { rowCount } = this.state;
      return rowCount &lt;= list.size;
    }
  
    _getDatum(list, index) {
      return list.get(index % list.size);
    }
  
    _sort({ sortBy, sortDirection }) {
      const sortedList = this._sortList({ sortBy, sortDirection });
  
      this.setState({ sortBy, sortDirection, sortedList });
    }
  
    _sortList({ sortBy, sortDirection }) {
      const { list } = this.props;
  
      // console.log(list);
  
      return list
        .sortBy(item =&gt; item[sortBy])
        .update(
          list =&gt; (sortDirection === SortDirection.DESC ? list.reverse() : list)
        );
    }
    _rowClassName({ index }) {
      if (index &lt; 0) {
        return styles.headerRow;
      } else {
        return index % 2 === 0 ? styles.evenRow : styles.oddRow;
      }
    }
  }
  
  PartTable.PropTypes = {
    list: PropTypes.arrayOf({}).isRequired,
    activeCheckboxes: PropTypes.arrayOf({}),
    _activeCheckbox: PropTypes.func,
    headers: PropTypes.arrayOf({}.isRequired)
  };
  </code></pre>