MUI DataGrid ผังแป้นพิมพ์ปัญหาเรื่องการใช้ตอบโต้

พยายามที่จะเอา MUI DataGrid ต้องทำงานสำหรับสองสามชั่วโมงตอนนี้แต่ด้วยเหตุผลบางอย่างที่ styling เป็นต้องกา pagination ข้อมูลที่อยู่บนสุดของโต๊ะไว้บนคอลัมน์ส่วนหัว. บางทีมันบางอย่างโง่ฉันกำลังทำอะไรอยู่ ฉันพยายามเป็นจริงง่ายรุ่นต้อง illustrate ธุระของผม หวังว่าจะมีใครสักคนสามารถได้โปรดช่วยผมหน่อยนะ BTW ฉันใช้ 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>
  );
};

การส่งออกดูเหมือนว่าเรื่องนี้

ดังนั้นคุณสามารถเห็นว่า pagination ส่วนที่ควรจะแสดงใต้โต๊ะข้อมูลคือแทนที่จะเป็นตำแหน่งรักที่สุดยอดของหน้า. ที่จริงชายแดนที่ควรจะไปรอบๆข้อมูลคือยักย้ายไปด้านบน ฉันหวังว่าจะมีใครสักคนสามารถช่วยฉันออกมาอยู่ที่นี่