Проблемы с компоновкой сетки данных MUI с использованием React

Question 1

Уже несколько часов пытаюсь заставить MUI DataGrid работать, но по какой-то причине стиль размещает информацию о разбиении на страницы в верхней части таблицы, поверх заголовков столбцов. Может быть, я делаю что-то глупое. Я попробовал действительно простую версию, чтобы проиллюстрировать свои проблемы. Надеюсь, кто-нибудь сможет мне помочь. Кстати, я использую v5+ MUI и DataGrid. Реагировать-это 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>
  );
};

Результат выглядит следующим образом.

Таким образом, вы можете видеть, что раздел разбиения на страницы, который должен отображаться под данными таблицы, вместо этого расположен в верхней части страницы. На самом деле граница, которая должна быть вокруг данных, также перемещается наверх. Я надеюсь, что кто-нибудь сможет мне здесь помочь.

Question 2

Вы должны указать высоту DataGrid, как:

//// Your code ////

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

Вы можете использовать таблицы стилей вместо встроенных стилей ofc. Это просто пример.

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

Вы должны указать высоту DataGrid, как:

//// Your code ////

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

Вы можете использовать таблицы стилей вместо встроенных стилей ofc. Это просто пример.

Я попробую сделать это сегодня и дам вам знать. Спасибо за ваш комментарий.
Спасибо, что это решило мою проблему. Но его немного разочаровывает то, что высота не является реактивной, в зависимости от количества отображаемых строк.
@RollingInTheDeep Я рад, что помог тебе. Не могли бы вы также принять мой ответ, я борюсь со своим другом за репутацию.

Проблемы с компоновкой сетки данных MUI с использованием React

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории