Mui-datatables: Reset pagination on sorting

[pierreyves-lebrun]

At first thanks for this awesome npm package, I really like its API and find it easy to use.

That said, I have a disagreement on how pagination should be handled when users sort data by clicking on a table column.

Currently when a user goes to let's say page 7 and then sorts the table differently, even-though the displayed data changed, page number remains 7.

In my humble opinion, the page number should be reset to 0 in that case.

---

From a user perspective, I would say sorting data has a clear intent: finding the biggest/smallest value(s) among many rows. In this scenario, it makes sense to show the first page as the user probably doesn't care about seeing page 7 of the rearranged dataset.

This actually is the behaviour of all datatables I could test so far so I thought I should kindly point it out in this issue.

In the case you disagree with this view, I decided to take a look at how to implement this myself. However I couldn't find an elegant way to change the table internal page state.

---

From what I understand, the table options page property is read only once when the MUIDataTable component mounts. It is then ignored upon re-rendereing.

That sounded a bit counter-intuitive to me as other options like count are read and updated on every render.

I think if the page option is read only once when the components gets mounted, it would make sense to rename it to initalPage. Then the option called page could actually be the property allowing developers to control the table page state.

Expected Behavior

I was expecting pagination to get reset to 0 after clicking on a column, which sorts rows.

Current Behavior

Page number remains the same regardless of user actions. In some cases it probably would makes sense to reset pagination or at let devs control it.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.5.2 |
| MUI-datatables | 2.12.4 |
| React | 16.11 |
| browser | Chrome |
| etc | |

[gabrielliwerant]

Thanks @pierreyves-lebrun and thanks for your involvement in opening this issue.

Firstly, it actually isn't a clear cut UX case to me as to which page a user should be on after a sort action takes place. Seems like a valid expectation that if I'm on page 7 and I sort, I might want to see the new results for page 7, rather than be sent back to page 0 and have to page back up. If I want to see the very first result, I go back to page 0, and then I sort. That being said, I think both cases are valid depending on the situation, so I'm wary of changing this behavior (which would be a breaking change) as it would likely result in open issues asking for it to be switched back.

The case with page is complicated. There are many places where the value is being changed, but devs currently don't have a good way to hook into it as most callbacks are firing after the internal state is updated. If you use serverside, the page value will update based on your inputs after initial render, but it shouldn't be required to use serverside to access this behavior.

I think what is needed is a separate callback that can fire before the state is updated, such as onColumnSortChangeStart or something like that, probably deprecating the old one and using onColumnSortChangeEnd so that the distinction is clear. onColumnSortChangeStart could optionally return an object containing new internal state values (like page), so that they could be overridden by the devs. My time to work on these things is limited, but I would gladly review and accept a PR that took this approach.

I think a separate issue is whether or not to change the API to have a page and a initialPage value, but this is more complicated and costly given all of the places page is being used, including serverside behavior.

[pierreyves-lebrun]

It’s fair to say that if you change mui-datatables behavior on that one, people would open issues asking for putting it back the other way around.

To me the behavior I suggested makes much more sense but I guess other people can have the opposite view.

In any case thanks for your feedback, if I can find the time to work on it I’ll submit a PR.

[samking314]

What if you allowed both options with an attribute so that we can set it to our desired pagination?

[Aveeery]

Hi,

Has the mentioned issue been addressed?
I would also need to reset the pagination on sorting.

[wdh2100]

@Boultak

I am also the same with @gabrielliwerant.
Different people may accept it differently.
But I think you can get the desired result by combining the two below.

Name | Type | Default | Description
-- | -- | -- | --
onColumnSortChange | function |   | Callback function that triggers when a column has been sorted. function(changedColumn: string, direction: string) => void
page | number |   | User provided page for pagination.

[akhnegi]

I did something of the same feature but on onChangeRowsPerPage.

this.props.changeRowsPerPage(event.target.value);
this.props.changePage(0);

And this would reset your page to reset back to 0;