Table multi column sort functionality

[bvaughn]

Counter proposal for PR #946 and #957. cc @CzBuCHi

import {
  createTableMultiSort,
  Column,
  Table,
} from 'react-virtualized';

function sortCallback({
  sortBy,
  sortDirection,
}) {
  // 'sortBy' is an ordered Array of fields.
  // 'sortDirection' is a map of field name to "ASC" or "DESC" directions.
  // Sort your collection however you'd like.
  // When you're done, setState() or update your Flux store, etc.
}

const sortState = createTableMultiSort(sortCallback);

// When rendering your header columns,
// Use the sort state exposed by sortState:
const headerRenderer = ({ dataKey, label }) => {
  const showSortIndicator = sortState.sortBy.includes(dataKey);
  return (
    <>
      <span title={label}>{label}</span>
      {showSortIndicator && (
        <SortIndicator sortDirection={sortState.sortDirection[dataKey]} />
      )}
    </>
  );
};

// Connect sortState to Table by way of the `sort` prop:
<Table
  {...tableProps}
  sort={sortState.sort}
  sortBy={undefined}
  sortDirection={undefined}>
  <Column
    {...columnProps}
    headerRenderer={headerRenderer}
  />
</Table>

This proposal does not include a recommendation for how your application code should apply its multi-criteria sort, but neither did the other two pull requests.

[CzBuCHi]

i example above im guessing that createMultiSort === createTableMultiSort ...

looked at your code and im confused with createMultiSort.js:

• dont see anywhere slice call so i think, that calling sort method will change sort defaults

• soo im guessing, that i can delete my fork then :)

[bvaughn]

i example above im guessing that createMultiSort === createTableMultiSort

Yes.

dont see anywhere slice call so i think, that calling sort method will change sort defaults

Your sortCallback should not modify the sortBy array passed in. Treat it as read-only. I could clone before passing but I didn't want to pay the cost of cloning unnecessarily.