MUI DataGrid problemas de layout usando Reagir

Question 1

Foi tentando chegar MUI DataGrid para o trabalho por algumas horas, agora, mas, por algum motivo, o styling é colocar a paginação de informações no topo da tabela, na parte superior dos cabeçalhos de coluna. Talvez seja algo estúpido que eu estou fazendo. Eu tentei realmente uma versão simples para ilustrar os meus problemas. Espero que alguém possa me ajudar, por favor. BTW eu uso v5+ de MUI e DataGrid. Reagir é 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>
  );
};

A saída se parece com isso.

Assim você pode ver que a paginação seção que deve ser mostrado abaixo os dados da tabela em vez disso, é posicionada na parte superior da página. Na verdade, a fronteira que deve ser em torno dos dados também é movido para o topo. Espero que alguém possa me ajudar aqui.

Question 2

Você tem que especificar a altura de DataGrid, como:

//// Your code ////

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

Você pode usar folhas de estilo, em vez dos estilos inline ofc. É apenas um exemplo.

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

Você tem que especificar a altura de DataGrid, como:

//// Your code ////

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

Você pode usar folhas de estilo, em vez dos estilos inline ofc. É apenas um exemplo.

Vou tentar isso hoje e que você saiba. Obrigado por seu comentário.
Graças a ele o fez corrigir o meu problema. Mas é um pouco dissapointing que a altura não é reativo, com base no número de linhas a serem exibidas.
@RollingInTheDeep estou contente por ter ajudado. Poderá aceitar a minha resposta bem, eu estou lutando com o meu amigo para a reputação.

MUI DataGrid problemas de layout usando Reagir

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria