CODEWITHSUNDEEP
javascriptreactjstypescriptdatagrid
RollingInTheDeep
RollingInTheDeep

Reputation: 731

MUI DataGrid layout issues using React

Been trying to get MUI DataGrid to work for a few hours now, but for some reason the styling is placing the pagination information at the top of the table, on top of the column headers. Maybe its something stupid I'm doing. I have tried a really simple version to illustrate my issues. Hope someone can please help me. BTW I use v5+ of MUI and DataGrid. React is 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>
  );
};

The output looks like this.

enter image description here

So you can see that the pagination section that should be shown below the table data is instead positioned at the top of the page. In fact the border that should be around the data is also moved to the top. I hope someone can help me out here.

Upvotes: 1

Views: 1530

Answers (1)

Hleb Shypula
Hleb Shypula

Reputation: 204

You have to specify the height of DataGrid, like:

//// Your code ////

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

You can use stylesheets instead of inline styles ofc. It's just an example.

Upvotes: 2

Related Questions