¿Cómo puedo usar la paginación del lado del servidor y el filtrado de Mui-Datatable para mostrar los datos? A partir de ahora, no he hecho que funcione todavía. Estos son los códigos que he hecho.

También tengo un problema en el que se obtienen todos los datos de Firestore en lugar de solo 10 datos. El 10 proviene de rowsPerPage .

Codesandbox recreado: https://codesandbox.io/s/mui-datatable-server-side-pagination-filtering-and-sorting-y8pyp7

 export default function App() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(false); const [count, setCount] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); useEffect(() => { let isMounted = true; const getUsers = async () => { const querySnapshot = await getDocs( collection(db, "users"), orderBy("firstName", "asc"), limit(rowsPerPage) ); const arr = []; querySnapshot.forEach((doc) => { arr.push({ ...doc.data() }); }); if (isMounted) { setUsers(arr); setCount(arr.length); loading(true); } }; getUsers().catch((err) => { if (!isMounted) return; console.error("failed to fetch data", err); }); return () => { isMounted = false; }; }, []); const columns = [ { name: "firstName", label: "First Name", options: { filter: false, display: true } }, { name: "lastName", label: "Last Name", options: { filter: false, display: true } }, { name: "number", label: "Number", options: { filter: false, sort: true } } ]; console.log(rowsPerPage, "rowsPaerPage"); console.log(users, "users"); const options = { print: true, filterType: "multiselect", selectableRows: "none", responsive: "standard", fixedHeader: true, count: count, rowsPerPage: rowsPerPage, serverSide: true }; return ( <div className="App"> <ThemeProvider theme={createTheme()}> <MUIDataTable title={"Reports"} options={options} columns={columns} data={users} /> </ThemeProvider> </div> ); }