Уже несколько часов пытаюсь заставить MUI DataGrid работать, но по какой-то причине стиль размещает информацию о разбиении на страницы в верхней части таблицы, поверх заголовков столбцов. Может быть, я делаю что-то глупое. Я попробовал действительно простую версию, чтобы проиллюстрировать свои проблемы. Надеюсь, кто-нибудь сможет мне помочь. Кстати, я использую v5+ MUI и DataGrid. Реагировать-это 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: "[email protected]",
phone: "0754512222",
},
{
id: 2,
username: "Joe",
first_name: "Joeseph",
last_name: "Willson",
email: "[email protected]",
phone: "0754512333",
},
];
return (
<div>
<DataGrid rows={rows} columns={columns} pageSize={paginationSize} />
</div>
);
};
Результат выглядит следующим образом.
Таким образом, вы можете видеть, что раздел разбиения на страницы, который должен отображаться под данными таблицы, вместо этого расположен в верхней части страницы. На самом деле граница, которая должна быть вокруг данных, также перемещается наверх. Я надеюсь, что кто-нибудь сможет мне здесь помочь.