tableWithNaturalSort.md

By default, Table assumes the sortable rows can be sorted in ascending or descending order. Clicking a column header the first time will trigger the sort callback with a suggested ordering of ascending. Clicking it a second time will call sort with a suggested ordering of descending. Clicking a third time will suggest ascending.

This is often desirable but it has a subtle side effect: Once you have sorted a Table there is no way to return to an unsorted, "natural" order.

Fortunately Table makes it easy for you to implement this functionality within your application code like so:

export default class NaturalSortTable extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      list: props.list, // Naturally sorted list
    };
  }

  componentWillUpdate(nextProps, nextState) {
    const {sortBy: prevSortBy, sortDirection: prevSortDirection} = this.state;

    if (
      nextState.sortBy !== prevSortBy ||
      nextState.sortDirection !== prevSortDirection
    ) {
      const {sortBy, sortDirection} = nextState;

      let {list} = this.props;

      if (sortBy) {
        list = list.sortBy(item => item[sortBy]);
        if (sortDirection === SortDirection.DESC) {
          list = list.reverse();
        }
      }
    }
  }

  render() {
    const {list, sortBy, sortDirection} = this.state;

    return (
      <Table
        {...this.props}
        sort={this._sort}
        sortBy={sortBy}
        sortDirection={sortDirection}>
        {/* <Column>s go here */}
      </Table>
    );
  }

  _sort({sortBy, sortDirection}) {
    const {sortBy: prevSortBy, sortDirection: prevSortDirection} = this.state;

    // If list was sorted DESC by this column.
    // Rather than switch to ASC, return to "natural" order.
    if (prevSortDirection === SortDirection.DESC) {
      sortBy = null;
      sortDirection = null;
    }

    this.setState({sortBy, sortDirection});
  }
}