Sorting with row selection

[jfougere]

When selecting a row via the checkbox or the click on row (if activated), we loose the current active sort on columns.

It seems to revert to the default sorting.

[AllenFang]

@jfougere, ok I'll check this out. Thanks :)

[AllenFang]

@jfougere, could you please show your steps for reproducing this issues? I sort a column and then select a row, but everything is fine.

[jfougere]

OK in fact I pinned down the issue to my provided onSelect method.
I do a setState in it and this seems to refresh the table which loose its active sort.

Any ideas ?

[AllenFang]

what's state you changed?

[jfougere]

I'm setting the state of one property of the datatable's wrapper component.

[AllenFang]

I'll test it based on your situation.

[AllenFang]

@jfougere, I need your code for me to reproduce this issue. Thanks :)

[jfougere]

Ok so I checked and it seems to be related to how i push the data to the table component.

[Warning] I am a react beginner, so my way of doing things may be completely wrong ;)
So my parent component has a method loading data through ajax and store the result in the parent state.
Then the table data attribute is defined like this:
data={this.state.packages}

Finally, I have onSelect, onSelectAll methods defined which call setState on the parent component but not changing the loaded data state at all.

I assume that calling setState on the parent, also re-render the table child component. I hoped that setting a property which is not linked to the child component display would not have the child re-rendered. But this does not seems to work like that :).

Maybe you have a suggestion for me.

[AllenFang]

@jfougere, ok there's something I need to make sure firstly,

1. You create a React component which wrap the <BootstrapTable> directly and also fetch data from server?
2. setState will call a render for all the child component, if you want some child component do not re-render, you can implement shouldComponentUpdate to tell react whether re-render it or not.

Hope these can help you :)

BTW, I've wrote a test bese on your case, I also call setState in onSelect, but I dont change the source data, just change a unimportant state. But I didn't see any problem or error.

However, maybe you can tell me your UI flow or scenario, maybe I can help you.

[jfougere]

1. yes
2. I was thinking about that, but it would mean that I need to create a child component just to wrap the <BootstrapTable> and implement the shouldComponentUpdate in it.

I think the difference between my case and yours is just that in your test case the data prop of your table is static and not in the wrapping component state.

I tried an empty setState call and result is the same. So my conclusion is that putting state data as value for the data prop make the <BootstrapTable> rerender and so loose active sort.

[AllenFang]

1. thanks
2. Exactly

I think the difference between my case and yours is just that in your test case the data prop of your table is static and not in the wrapping component state.

I'm not sure, need to check my test after getting off work.

I tried an empty setState call and result is the same. So my conclusion is that putting state data as value for the data prop make the rerender and so loose active sort.

maybe it's a bug, I'll confirm it today. Thanks !

[jfougere]

Ok I think I found where that happens.

In BootstrapTable in method componentWillReceiveProps, we have the following code:

const sortInfo = this.store.getSortInfo();
const sortField = options.sortName || (sortInfo ? sortInfo.sortField : undefined);
const sortOrder = options.sortOrder || (sortInfo ? sortInfo.order : undefined);
if (sortField && sortOrder) this.store.sort(sortOrder, sortField);

The problem here is that default order options have precedence against the one already set in the store.
So if default sorting is defined, but a different sort is currently apply when receiving new props, the current sort will be lost.

I think that options.sortName & options.sortOrder should take precedence only if changed otherwise we should keep the one defined in the store if any.

@AllenFang what do u think ?

[AllenFang]

@jfougere, I think there's some mistake, could you please use defaultSortName and defaultSortOrder instead?

Actually, you find a bug on default sort, because I change the default sort options from v2.1.3 but I forgot to modify the code in componentWillReceiveProps. I'll fix it

[AllenFang]

EDIT:
sorry, I make a wrong explantation, that's say,
sortName and sortOrder is used on external sorting management, check this example
defaultSortName and defaultSortOrder is used on default sorting, just work on first rendered.

so I thinks you use defaultSortName and defaultSortOrder will solve your problem.

[jfougere]

That's it ! Thanks. I was using sortName instead of defaultSortName. Now my only issue is that sorting result still could change a bit because I can have several lines with same value in some sortable columns. And so the sort result does not seems to be constant in such case.