CODEWITHSUNDEEP
react-virtualized
garajo
garajo

Reputation: 756

Different default sort directions for Columns in Table in React-virtualized

Using the Table and Column components of react-virtualized, I have achieved a default sort column and direction by defining a sortBy dataKey and the sortDirection in the Table component. I have another column, which I would like to have sort in descending order (instead of the default ascending order) the first time a users clicks it, but can't see how to do this. Is it possible to have a default sort direction per Column?

Update: I don't want to sort columns simultaneously, but instead want to have different sort directions for each column when sort is first implemented per column. For example, I want to start the defaults for my table to be sorted by lastname in ascending order. However, I have a few other columns that hold integers or booleans, and that I would like to sort in descending order when the user first clicks on those columns. In ascending order, those columns would first display false and 0's (if any), but would be more meaningful if they were first sorted with true or a set's upper numbers. I'm trying to slightly improve the user experience as to not have to click twice on the columns to get a descending order.

Upvotes: 0

Views: 1101

Answers (1)

bvaughn
bvaughn

Reputation: 13487

RV's Table does not support the concept of sorting by multiple columns simultaneously. (I'm not sure how it would make sense, unless 1 field is the primary sort and the other is a secondary sort?) Either way, I think that use-case is uncommon.

I think the easiest way to do what you're looking for would be for you to specify your own headerRenderer for the sorted-by Columns:

<Column
  {...otherProps}
  headerRenderer={yourHeaderRenderer}
/>

You could even decorate the default/built-in header renderer. Then instead of using the sort-by props from Table just pass your own to the sorted-by columns:

import {defaultTableHeaderRenderer} from 'react-virtualized';

function yourHeaderRenderer(props) {
  return defaultTableHeaderRenderer({
    ...props,
    sortBy: yourSortByHere,
    sortDirection: yourSortDirectionHere
  });
}

Update What you're actually asking for here (a default sort direction per column) is completely up to your application. Basically your sort function could look like this:

let prevSortBy;

const sort = ({ sortBy, sortDirection }) => {
  if (sortBy !== prevSortBy) {
    // You can decide the initial sort direction based on the data.
    // Just ignore RV's best-guess default in your case.
  }

  prevSortBy = sortBy;

  // Do your sort-logic here (eg dispatch a Redux action or whatever)
}

Upvotes: 1

Related Questions