question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reset pagination on sorting

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

6reactions
samking314commented, May 20, 2020

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

3reactions
pierreyves-lebruncommented, Nov 4, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Should the pagination be reset when changing the order?
You can see that both filtering and sorting come before pagination. This means that whenever the order changes (sort), you should repaginate.
Read more >
How to avoid pagination reset while sorting datatables
I am having a simple jquery-datatable which allows basic sorting and pagination functionality. Consider below data-tables snippet.
Read more >
How do I reset the state (filters, sorting, pagination, etc.) of an ...
I want to reset all the filters, sorting, pagination, etc., of an object-table component. How can I do this? ... This is reasonably...
Read more >
Primeng Tablelazy Sort Pagination Reset - StackBlitz
project used to provide a sample test case to. demonstrate a defect to help PrimeNG Team. ## Development server. Run `ng serve` for...
Read more >
Table with server side pagination: reset to first page while ...
Hey @jignesh! You can use your table's .selectPage property to reset the page when you run whatever query is backing your search. One...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found