MUI DataGrid layout folosind Reacționa

Question 1

Fost încercarea de a obține MUI DataGrid să lucreze pentru câteva ore, dar pentru unii motiv, stilul este plasarea paginare informații în partea de sus a mesei, pe partea de sus a anteturile de coloană. Poate e o prostie fac. Am încercat o versiune simpla pentru a ilustra problemele mele. Sper că cineva poate să mă ajute. BTW eu folosesc v5+ de MUI și DataGrid. React este 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>
  );
};

Rezultatul arata ca acest lucru.

Deci, puteți vedea că paginația secțiunea că ar trebui să fie afișate mai jos tabelul de date, în schimb, este poziționat în partea de sus a paginii. În fapt, granița care ar trebui să fie în jurul valorii de date este, de asemenea, sa mutat la partea de sus. Sper ca cineva mă poate ajuta aici.

Question 2

Trebuie să specificați înălțimea de DataGrid, cum ar fi:

//// Your code ////

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

Puteți folosi foi de stil în loc de stiluri de linie ofc. E doar un exemplu.

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

Trebuie să specificați înălțimea de DataGrid, cum ar fi:

//// Your code ////

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

Puteți folosi foi de stil în loc de stiluri de linie ofc. E doar un exemplu.

Voi încerca azi și să știi. Vă mulțumim pentru comentariul tau.
Vă mulțumim că v-fix problema mea. Dar ei un pic dezamăgitor că înălțimea nu este reactivă, în funcție de numărul de rânduri afișate.
@RollingInTheDeep mă bucur că te-am ajutat. Ai putea accepta răspunsul meu la fel de bine, eu sunt certat cu prietenul meu pentru reputație.

MUI DataGrid layout folosind Reacționa

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie