Change the sorting behavior

[dana2208]

Hi,

I would like to be able to do this:

1. First click on column: sort ascendingly
2. Second click on column: sort descendingly
3. Third click on column: remove the sorting

Is there a way to hook the actual sorting behavior, i.e. write my own function in my code without touching the source code?

[AllenFang]

@dana2208, I thinks it's hard to give some hook for you without touching source code. But I can accept a new feature for your case, just perform sorting as desc, asc, none. How do you think?

If ok, PR is welcome; otherwise, I prefer to fix bug and some important feature first

[AllenFang]

if another question, welcome to join gitter to discuss

[dana2208]

OK I'll do a PR. Thank you!

[alanqthomas]

This is a little dated, but I was looking for a way to do something similar to this and found that there are currently no plans to implement this feature through options. However, I figured out that it can be achieved with the existing API.

I just wanted to flip the default sort direction from 'desc' to 'asc'.

Using sortName, I was able to achieve this. The example in the docs should give a pretty good idea, but here's what I did.

Initialize my state in the constructor:

this.state = {
  sortName: 'Name', // name of column I want to initially sort by
  sortOrder: 'asc'
};

Give the options prop on the BootstrapTable component the following options object:

{
  sortName: this.state.sortName,
  sortOrder: this.state.sortOrder,
  onSortChange: this.onSortChange.bind(this) // bind context here or in constructor
}

Define onSortChange:

onSortChange(sortName, sortOrder) {
  let newOrder = sortOrder;
  if (sortName !== this.state.sortName) { // start as 'asc' if a different column header is clicked
    newOrder = 'asc';
  }

  this.setState({
    sortName,
    sortOrder: newOrder
  });
}

Giving it a third/none state should be fairly trivial to add this this if you're familiar with component state.

All that being said, I do think there should be an easier way to do this - probably with an options object. Hope this helps someone.

[AllenFang]

@alanqthomas, thanks your feedback, Currently I'm busy on my work, and focus on the development of v3.0.0 and some bug fixing. As my consideration, this feature is not very urgent so that I prefer to do other tickets, so PR is welcome and If I've free time, I'll back to support this feature.

thanks

[Siyfion]

@AllenFang & @dana2208 I could be wrong, but is is not just a case of changing this line to also allow it to set the sort to null?

https://github.com/AllenFang/react-bootstrap-table/blob/master/src/TableHeaderColumn.js#L28

[AllenFang]

@Siyfion, I thinks it's not just this line, I need to check overall for the sorting behavior, and this is not urgent issue for me currently and really busy... sorry. Anyway, PR is welcome

[johnsonsamuel]

Hi, I am unable to setState in the function for onSelect.

onSelect: this.handleRowSelect

handleRowSelect(row, isSelected, e){
const {selectedItems} = this.state;

Getting error because I am unable to access state. Any thoughts ?

I am using "react": "^16.3.2",

Please advise.