[英]React MUI Datagrid align column data and header with type "number"
[英]MUI DataGrid layout issues using React
一直試圖讓 MUI DataGrid 工作幾個小時,但由於某種原因,樣式將分頁信息放在表的頂部,列標題的頂部。 也許這是我正在做的愚蠢的事情。 我嘗試了一個非常簡單的版本來說明我的問題。 希望有人可以幫助我。 順便說一句,我使用 MUI 和 DataGrid 的 v5+。 React 是 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>
);
};
output 看起來像這樣。
因此,您可以看到應該顯示在表格數據下方的分頁部分反而位於頁面頂部。 事實上,應該在數據周圍的邊框也被移到了頂部。 我希望有人可以在這里幫助我。
您必須指定DataGrid
的高度,例如:
//// Your code ////
return (
<div>
<DataGrid
style={{ height: "700px" }}
rows={rows}
columns={columns}
pageSize={paginationSize} />
</div>
);
};
您可以使用樣式表代替內聯 styles ofc。 這只是一個例子。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.