MUI DataGrid problemas de diseño el uso de Reaccionar

Question 1

Estado tratando de llegar MUI DataGrid a trabajar por un par de horas, ahora, pero por alguna razón que el estilo es la colocación de la información de paginación en la parte superior de la tabla, en la parte superior de los encabezados de columna. Tal vez sea algo estúpido que estoy haciendo. He intentado realmente una versión simple para ilustrar mis problemas. Espero que alguien pueda ayudarme por favor. Por CIERTO, yo uso la v5+ de MUI y DataGrid. Reaccionar es 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 salida se parece a esto.

Así que usted puede ver que la paginación de la sección que debe ser se muestra a continuación la tabla de datos se coloca en la parte superior de la página. De hecho, la frontera que debe estar alrededor de los datos también se mueve a la parte superior. Espero que alguien pueda ayudarme a salir de aquí.

Question 2

Usted tiene que especificar la altura de DataGrid, como:

//// Your code ////

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

Puede utilizar hojas de estilo en lugar de estilos en línea de la ofc. Es sólo un ejemplo.

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

Usted tiene que especificar la altura de DataGrid, como:

//// Your code ////

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

Puede utilizar hojas de estilo en lugar de estilos en línea de la ofc. Es sólo un ejemplo.

Voy a tratar de que a día de hoy y darte a conocer. Gracias por tu comentario.
Gracias lo hizo arreglar mi problema. Pero es un poco decepcionante que la altura no es reactivo, basado en el número de filas que se muestran.
@RollingInTheDeep me alegro de haber ayudado a usted. Puede usted aceptar mi respuesta así, estoy luchando con mi amigo para su reputación.

MUI DataGrid problemas de diseño el uso de Reaccionar

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría