MUI DataGrid problémy rozvržení pomocí Reagovat

Question 1

Snažil se dostat MUI DataGrid do práce na pár hodin, ale z nějakého důvodu styling je umístění stránkování informace v horní části tabulky, v horní části záhlaví sloupce. Možná je to hloupost dělám. Snažil jsem se opravdu jednoduchá verze pro ilustraci mé otázky. Doufám, že někdo může, prosím, pomozte mi. BTW používám v5+ MUI a DataGrid. Reagovat je 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>
  );
};

Výstup vypadá takto.

Takže můžete vidět, že stránkování části, které by měly být uvedeny pod tabulkou údajů, je místo toho umístěna v horní části stránky. Ve skutečnosti hranice, která by měla být kolem data je také přesunuta na vrchol. Doufám, že někdo mi může pomoci ven.

Question 2

Musíte zadat výšku DataGrid, jako je:

//// Your code ////

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

Můžete používat styly místo inline stylů ofc. To je jen příklad.

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

Musíte zadat výšku DataGrid, jako je:

//// Your code ////

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

Můžete používat styly místo inline stylů ofc. To je jen příklad.

Zkusím to dneska a dám vám vědět. Díky za váš komentář.
Díky to vyřešit můj problém. Ale jeho trochu dissapointing, že výška není reaktivní, na základě počtu zobrazených řádků.
@RollingInTheDeep jsem rád, že jsem ti pomohl. Mohl byste přijmout svou odpověď, stejně, bojuji s mým přítelem pověst.

MUI DataGrid problémy rozvržení pomocí Reagovat

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii