MUI DataGrid लेआउट मुद्दों का उपयोग कर प्रतिक्रिया

की कोशिश कर रहा प्राप्त करने के लिए MUI DataGrid काम करने के लिए कुछ घंटों के लिए अब, लेकिन किसी कारण के लिए है स्टाइल रखकर पृष्ठ पर अंक लगाना जानकारी के शीर्ष पर तालिका के शीर्ष पर, स्तंभ शीर्ष लेख है । शायद इसकी कुछ मूर्ख मैं कर रहा हूँ. मैं करने की कोशिश की है वास्तव में एक सरल संस्करण को वर्णन करने के लिए अपने मुद्दों. आशा है कि किसी को कर सकते हैं कृपया मेरी मदद करो. 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>
  );
};

आउटपुट इस तरह दिखता है ।

तो आप देख सकते हैं कि पृष्ठ पर अंक लगाना अनुभाग होना चाहिए कि नीचे दिखाया गया तालिका डेटा है बजाय पर तैनात पृष्ठ के शीर्ष पर. में तथ्य यह है कि सीमा के आसपास होना चाहिए डेटा भी ले जाया गया । मुझे आशा है कि किसी को मेरी मदद कर सकते हैं यहाँ.