mui-datatables
mui-datatables copied to clipboard
"Change rowsPerPage" logic in Mui-Datatables. Data count shows wrong numbers
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 ? ( <LinearProgress /> ) : ( '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.
. 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
. 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
numberOfRows starts from zero and the dropdown starts from 1
you can manually update your pageSize by adding 1
onChangeRowsPerPage: (numberOfRows) => {
//number of rows starts from 0 by default
setPageSize(numberOfRows+1)
},