Autodesk / react-base-table

A react table component to display large datasets with high performance and flexibility
https://autodesk.github.io/react-base-table/
MIT License
1.5k stars 164 forks source link

Change the default sort direction to DESC on first click on each column header #290

Open Jaguar1 opened 3 years ago

Jaguar1 commented 3 years ago

Hello, currently if you click on random column header you get results sorted ASC and then DESC, and etc. The toggle ASC/DESC is correct but it always starts with ASC. I need this to start with DESC: when you click on any column header I need first sort direction to be DESC. Here is a basic playground:

https://autodesk.github.io/react-base-table/playground#MYGwhgzhAEBOCmZgBcBCl4BUwCMTwFEAPMAWwAd9p4jl4A7AExgCVEUA6AYQHsKf6DZNADeAKGjQJwARGSwArih6wAFOVg9yEAJSiJk6BAXl4ajVt0BuA5PzCZIBaXowAvNGQALAJYQOAPoA5vDIAMoqyDhg+LxOLhCqOjaG0PbQjGDIYNAeIYKwWfAAIllgqo7OrgA00ABMAAxNOhwIAG5mEPBJNraevv5yRbn6qZIQkagAngBco2OSANbws9AA5JUuALQNa9V9qSqMZnNrxxDAawfQAL77C5uuc48Q92OZ2XMfYH03KbcGAzBUIRWBRGLwOJVdzQJK5AB88zsoWgLxG+TMRShCVUAEYGsk+gAzFSw9I+EYNKzQCkAHlRPHirg4+HoQW81J8AGouXpxA9GdCANo+AC6HAmYNwVA88gU8H+khufQQyAUsHoDKZEH+yoMAmx9FBwg8krQUwRSP6fglIOydFU-LGZumb1S3zm3htQzoHG+rXgHVgXSSv0JSt6kgQTDMcKdUdC6s1qlpjB8bXhfVpXlx8ON8EY0BwFtpOHhIi9g3t8AlkymHGWUxutIA9GWMj4ECgfAJoKXy5WJdXa2DphwjmZm234a2c5nUrTsHh4NciT4iAXri83BWBkOihwXsqFt8d4OfTXvsfnXWz3uLyPzdfDvRDca7zaDYKXMbn9AWzOLZphm4YAsqNDkJEGTwESYAKCAwgIEgaAYEu+DEGQlAKkAA

How can I instruct react-base-table to change first click to DESC?

nihgwu commented 3 years ago

you can always use controlled state to control the next sort direction, for the sort indicator, you can use customised SortIndicator as well

Jaguar1 commented 3 years ago

you can always use controlled state to control the next sort direction, for the sort indicator, you can use customised SortIndicator as well

Hello, thank you for replying.

Sort indicator is nice and I do not want to mess with changing it. The problem is that currently the component always returns 'ASC' in onColumnSort sortBy on first click:

onColumnSort = sortBy => {
   this.setState({
     sortBy,
     data: this.state.data.reverse()
  });
};
// ...
<Table
   fixed
   columns={this.state.columns}
   data={this.state.data}
   sortBy={this.state.sortBy}
   onColumnSort={this.onColumnSort}
/>

This seems to be the initial state of sort. Isn't it possible to pass some property with default first sort to the component like "firstSort=DESC"?

Thank you once again!

nihgwu commented 3 years ago

I don't want to bloat the api, perhaps next time I should simply omit the next sort order, it could means nothing in your case, you can simply ignore it, in that case you can even clear the sort state after a toggle round, DESC -> ASC -> NONE https://autodesk.github.io/react-base-table/examples/multi-sort

Jaguar1 commented 3 years ago

Hi again,

In my case I can have multiple columns (50+) with financial data, and just one of them must be with a default DESC sort at the very beginning. The rest must not be ordered. This is a list of companies with their data, and the only column with default DESC order is Total Operating Revenue. At the very beginning the rest must not be ordered (no multi-sort as well). User can order by single column on header click but he/she must be able to order only by a single column: exactly like on the example I provided.

Your NPM package is really great and I truly believe it would be an user-friendly option to provide API property like: 

defaultSortDirection = 'DESC'

Best regards, Vladimir

nihgwu commented 3 years ago

Sorry for the later response, the problem is that in that case we would need more props like clearing sort on the second click, in the future perhaps I should support custom reducer for the next sort state