How can I implement the server side pagination of mui-datatable?
Problems:
I can't seem to retrieve whatever value was selected by the user in the rowsPerPage options. If the user clicks 15, then these rowsPerPage inside the useEffect should be updated as well:
const getUsers = async () => {
const usersRef = collection(db, "users");
const q = query(
usersRef,
orderBy("firstName", "asc"),
limit(rowsPerPage)
);
const querySnapshot = await getDocs(q);
const arr = [];
querySnapshot.forEach((doc) => {
arr.push({
...doc.data()
});
});
if (isMounted) {
setUsers(arr);
setCount(arr.length);
loading(true);
}
};
How does the server side pagination and filter works for mui-datatable?
Recreated codesandbox: https://codesandbox.io/s/mui-datatable-server-side-pagination-filtering-and-sorting-y8pyp7?file=/src/App.js:611-1091
It's pretty obvious that in the sandbox in your code you have state
const [rowsPerPage, setRowsPerPage] = useState(10);
and the IDE underlines setRowsPerPage showing you that it's never used, so even if the user changes the value the state is not updated.
The docs show there's onChangeRowsPerPage which you can pass a callback to in order to update the state and then use the state's value to send to the backend
I found examples from (it's from official examples): click here
it has good example how to handle pagination
the logic is:
you should have pageSize state that handle pageSize
onPageSize change update pageSize state