Puede ver cómo se ordenan y filtran las filas dentro del TableBody continuación, simplemente tome la parte donde se filtra a la función handleSelectAllClick :

 <TableBody> {/* if you don't need to support IE11, you can replace the `stableSort` call with: rows.slice().sort(getComparator(order, orderBy)) */} {stableSort(rows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row, index) => { return (...); }

 const handleSelectAllClick = (event) => { if (event.target.checked) { const newSelecteds = stableSort(rows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((n) => n.name); setSelected(newSelecteds); return; } setSelected([]); };

En este punto, casi funciona, excepto que no puede borrar toda la selección porque el estado de la Checkbox de verificación dentro del encabezado de la tabla depende de la cantidad de filas seleccionadas, no se puede deseleccionar porque solo selecciona las filas en 1 página , no todas las filas. Puede solucionarlo tomando el control de la Checkbox de verificación y hacer que siempre cambie de estado entre las 2 opciones (seleccionar/deseleccionar):

 const [value, setValue] = React.useState(false);

 <Checkbox color="primary" // indeterminate={numSelected > 0 && numSelected < rowCount} checked={value} onChange={(_, value) => { setValue(value); onSelectAllClick(_, value); }} inputProps={{ "aria-label": "select all desserts" }} />

Editar el handleSelectAllClick a lo siguiente debería funcionar:

 const handleSelectAllClick = (event) => { if (event.target.checked) { const newSelecteds = stableSort(rows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((n)=>n.name) setSelected(newSelecteds); return; } setSelected([]); };