Problemy z układem siatki danych MUI z wykorzystaniem React

Question 1

Od kilku godzin próbuję zmusić MUI DataGrid pracować, ale z jakiegoś powodu, styl umieszcza informacje o podział na strony w górnej części tabeli, na nagłówki kolumn. Być może robię coś głupiego. Próbowałem naprawdę prostą wersję, aby zilustrować swoje problemy. Mam nadzieję, że ktoś będzie w stanie mi pomóc. Nawiasem mówiąc, używam v5+ MUI i DataGrid. Elastyczny-to 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>
  );
};

Wynik wygląda następująco.

W ten sposób można zobaczyć, że sekcja podział na strony, który ma być wyświetlany pod danymi w tabeli, zamiast tego znajduje się w górnej części strony. W rzeczywistości granica, która powinna być wokół danych, również przesuwa się w górę. Mam nadzieję, że ktoś będzie w stanie mi pomóc.

Question 2

Należy określić wysokość DataGridjak:

//// Your code ////

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

Można użyć arkusza stylów zamiast wbudowanych stylów ofc. To jest tylko przykład.

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

Należy określić wysokość DataGridjak:

//// Your code ////

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

Można użyć arkusza stylów zamiast wbudowanych stylów ofc. To jest tylko przykład.

Spróbuję zrobić to dzisiaj i dam ci znać. Dziękuję za twój komentarz.
Dziękuję, że to rozwiązało mój problem. Ale to trochę frustrujące jest to, że wysokość nie jest biernej, w zależności od ilości wyświetlanych wierszy.
@RollingInTheDeep cieszę się, że ci pomógł. Nie można również przyjąć moją odpowiedź, walczę ze swoim przyjacielem za reputację.

Problemy z układem siatki danych MUI z wykorzystaniem React

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii