MUI DataGrid problemi di layout utilizzando Reagire

Question 1

State cercando di ottenere MUI DataGrid per lavoro per un paio di ore ormai, ma per qualche ragione, lo stile è di posizionare l'impaginazione informazioni nella parte superiore della tabella, sopra le intestazioni di colonna. Forse è qualcosa di stupido che sto facendo. Io ho provato davvero semplice versione per illustrare i miei problemi. Spero che qualcuno può aiutarmi, per favore. BTW io uso v5+ di MUI e DataGrid. Reagire è 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>
  );
};

L'output simile a questo.

Così si può vedere che la sezione impaginazione che dovrebbe essere mostrato qui di seguito i dati della tabella, invece, è posizionato nella parte superiore della pagina. Infatti il confine che dovrebbe essere di circa la data è spostata anche verso l'alto. Spero che qualcuno mi può aiutare qui.

Question 2

È necessario specificare l'altezza di DataGrid, come:

//// Your code ////

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

È possibile utilizzare i fogli di stile, invece, gli stili inline ofc. È solo un esempio.

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

È necessario specificare l'altezza di DataGrid, come:

//// Your code ////

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

È possibile utilizzare i fogli di stile, invece, gli stili inline ofc. È solo un esempio.

Cercherò che oggi e ti faccio sapere. Grazie per il tuo commento.
Grazie non ha risolto il mio problema. Ma è un po ' deludente che l'altezza non è reattiva, in base al numero di righe visualizzate.
@RollingInTheDeep sono contento di aver aiutato. Potresti accettare la mia risposta, io sto lottando con il mio amico per la reputazione.

MUI DataGrid problemi di layout utilizzando Reagire

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria