How can I implement the server side pagination of mui-datatable?

Question

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

Answer 1

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

Answer 2

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