He estado tratando de hacer que MUI DataGrid funcione durante algunas horas, pero por alguna razón el estilo coloca la información de paginación en la parte superior de la tabla, encima de los encabezados de las columnas. Tal vez es algo estúpido lo que estoy haciendo. He probado una versión realmente simple para ilustrar mis problemas. Espero que alguien pueda ayudarme. Por cierto, uso v5+ de MUI y DataGrid. Reaccionar es v17+

 import React, { FC } from "react"; import { DataGrid, GridRowModel } from "@mui/x-data-grid"; import { GridColDef } from "@mui/x-data-grid"; export const DataGridTest: FC = () => { const paginationSize = 20; const columns: GridColDef[] = [ { field: "username", headerName: "Username", flex: 1, sortable: false, filterable: false }, { field: "first_name", headerName: "First Name", flex: 1, sortable: false, filterable: false }, { field: "last_name", headerName: "Last Name", flex: 1, sortable: false, filterable: false }, { field: "email", headerName: "Email", flex: 1, sortable: false, filterable: false }, { field: "phone", headerName: "Phone", flex: 1, sortable: false, filterable: false }, ]; const rows: GridRowModel[] = [ { id: 1, username: "Tony", first_name: "Tony", last_name: "Ballony", email: "Tony@test.com", phone: "0754512222", }, { id: 2, username: "Joe", first_name: "Joeseph", last_name: "Willson", email: "joe@test.com", phone: "0754512333", }, ]; return ( <div> <DataGrid rows={rows} columns={columns} pageSize={paginationSize} /> </div> ); };

La salida se ve así.

Entonces puede ver que la sección de paginación que debería mostrarse debajo de los datos de la tabla está ubicada en la parte superior de la página. De hecho, el borde que debería estar alrededor de los datos también se mueve hacia la parte superior. Espero que alguien pueda ayudarme aquí.