MUI DataGrid 레이아웃을 사용하여 문제 반응

Question 1

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

출력은 다음과 같습니다.

그래서 당신이 볼 수 있는 매김 섹션이 표시되어야 하는 아래 테이블 데이터에 대한 최고의 페이지입니다. 사실의 국경되어야 하는 주변의 데이터가 움직였다. 나는 누군가가 나를 도울 수 있습니다.

Question 2

을 지정하려면의 높이 DataGrid처럼:

//// Your code ////

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

당신이 사용할 수 있는 스타일 시트 인라인 스타일 대신하는 qr 코드를 검색하. 그것은 단지 예입니다.

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

당신이 사용할 수 있는 스타일 시트 인라인 스타일 대신하는 qr 코드를 검색하. 그것은 단지 예입니다.

내가 노력하는 오늘을 알려드립니다. 귀하의 의견에 감사드립니다.
감사합니다 그것은 나의 문제를 해결 않았다. 그러나 그것의 작은 dissapointing 높이 밤은 반응에 따라 행 수를 표시합니다.
@RollingInTheDeep 나는 당신이 도움이 되었습니다.. 수은 받아들이 대답을 뿐만 아니라,나와 싸우고 나의 친구에 대한 평판이다.

MUI DataGrid 레이아웃을 사용하여 문제 반응

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리