gregnb / gregnb/mui-datatables

"Change rowsPerPage" logic in Mui-Datatables. Data count shows wrong numbers

Open
#1,793 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

The problem is in behaviour of preinstalled logic of mui datatables Here is my options for table

count: ticket_count,
rowsPerPageOptions: [10, 50, 100, 200],
rowsPerPage: perPage,
page: pageNumber,
serverSide: true,
onRowSelectionChange: (currentRowSelected) => {
let ticket = data[currentRowSelected[0].dataIndex];
ticket
? dispatch(selectDataInTable(ticket))
: dispatch(selectDataInTable({}));
},
jumpToPage: true,
textLabels: {
body: {
noMatch: loadingTickets ? (

) : (
'Sorry, there is no matching data to display'
),
},
},
onChangeRowsPerPage: (num) => {
dispatch(setPerPage(num));
dispatch(setPageNum(0));
dispatch(fetchTicketsAsync(accountId, 0, num, pickedCategory));
},
onChangePage: (num) => {
dispatch(
fetchTicketsAsync(accountId, num * perPage, perPage, pickedCategory)
);

dispatch(setPageNum(num));
},

onTableChange: (action, tableState) => {
switch (action) {
case 'search':
return setTimeout(() => {
searchData(tableState.searchText);
}, 200);
case 'filterChange':
if (tableState.filterList[8]) {
setPickedCategory(tableState.filterList[8][0]);
tableState.page = 0;
}
break;
default:
return;
}
},
};`
i.e when I am on page number 3 ( 3 times click on next arrow ) I have 15 rows per page.
![image](https://user-images.githubusercontent.com/62267491/137210797-864583a7-a580-40b6-9ca0-d4f4fe06af67.png)
. Then I try to change my rows per page to 25 and expect that I (as user) will see from 31 to 56. But it jumps on another condition
![image](https://user-images.githubusercontent.com/62267491/137210862-809945b3-e95b-422b-9ceb-fb4a6ea9f481.png)
. I have 2 cases of using this library. With server pagination and client pagination. But in both cases it works wrong. With server pagination I have query parameter &start={number} and I try to put there result of calculation NUMBER_OF_PAGE * ROWS_PER_PAGE. But it work only for changing page, and has same behaviour as I mentioned above when i thy to change rows per page. Could you share information how to manipulate with changing rows per page and stay on same page and position after you change it on another count

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the behavior with the supplied rowsPerPage, page, serverSide, onChangeRowsPerPage, and onChangePage options, then inspect the table's pagination callbacks and state handling. Done means changing rows per page preserves the intended position and data range for both client-side and server-side pagination.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.