梅网格局的问题，使用反应

Question 1

一直试图让梅数据表格的工作几小时，但由于某种原因造型是把本页码信息的顶部表上所列标题。也许它的一些愚蠢的事我做的。我已经尝试了一个非常简单的版本，以说明我的问题。希望有人可以请帮助我。顺便说一句我用5+MUI和数据表格. 反应是第17+

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>
  );
};

输出这样的。

所以你可以看到，分页的部分，应该显示如下表数据，而不是位于顶部的网页。事实上的边界，应该围绕数据也是移动的顶端。我希望有人可以帮我在这里。

Question 2

你有指定的高度 DataGrid，如：

//// Your code ////

  return (
    <div>
      <DataGrid
          style={{ height: "700px" }}
          rows={rows}
          columns={columns}
          pageSize={paginationSize} />
    </div>
  );
};

你可以使用样式表，而不是联的离岸金融中心的风格. 这只是一个例子。

Hleb Shypula · Answer 1 · 2021-11-27T13:22:42

你有指定的高度 DataGrid，如：

//// Your code ////

  return (
    <div>
      <DataGrid
          style={{ height: "700px" }}
          rows={rows}
          columns={columns}
          pageSize={paginationSize} />
    </div>
  );
};

你可以使用样式表，而不是联的离岸金融中心的风格. 这只是一个例子。

感谢它没有解决我的问题。但是它一点。该高度并不是反应性的，基于显示的行数。
@RollingInTheDeep我很高兴我帮助你。你能接受我的回答，因为我战斗我的朋友声誉。

梅网格局的问题，使用反应

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别