MUI DataGrid les problèmes d'implantation à l'aide de Réagir

Question 1

Essayé d'obtenir MUI grille de données pour des travaux pour quelques heures maintenant, mais pour une raison quelconque, le style est de placer les informations de pagination en haut de la table, au-dessus des en-têtes de colonne. C'est peut-être quelque chose de stupide, je suis en train de faire. J'ai essayé une, très simple, pour illustrer mes questions. J'espère que quelqu'un peut s'il vous plaît aider moi. BTW j'utilise v5+ de MUI et de grille de données. Réagir est 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>
  );
};

La sortie ressemble à ceci.

Donc vous pouvez voir que la pagination de l'article qui devrait être montré ci-dessous les données de la table sont plutôt positionnés sur le haut de la page. En fait, la frontière de ce qui devrait être autour de la data est également déplacé vers le haut. J'espère que quelqu'un pourra m'aider ici.

Question 2

Vous devez spécifier la hauteur de DataGridcomme par exemple:

//// Your code ////

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

Vous pouvez utiliser des feuilles de style au lieu de styles en ligne de l'ofc. C'est juste un exemple.

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

Vous devez spécifier la hauteur de DataGridcomme par exemple:

//// Your code ////

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

Vous pouvez utiliser des feuilles de style au lieu de styles en ligne de l'ofc. C'est juste un exemple.

Je vais essayer d'aujourd'hui et de vous laisser savoir. Merci pour votre commentaire.
Merci il n'a régler mon problème. Mais c'est un peu décevant que la hauteur n'est pas réactif, basé sur le nombre de lignes affichées.
@RollingInTheDeep je suis content que je vous ai aidé. Pourriez-vous accepter ma réponse, je me bats avec mon ami pour la réputation.

MUI DataGrid les problèmes d'implantation à l'aide de Réagir

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie