CODEWITHSUNDEEP
javascriptreactjsmaterial-uifrontend
Athos Franco
Athos Franco

Reputation: 85

I dont know why my DataGrid MUI component is not working as intended

Im trying to use MUI (MaterialUI's React Component library) for the first time. I followed the installation process shown in documentation and im trying to use the DataGrid component in my React project.

Im trying to use the first example shown in the documentation page as a template.

My code:

import React from "react";
import { DataGrid } from "@mui/x-data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "firstName",
    headerName: "First name",
    width: 150,
    editable: true,
  },
  {
    field: "lastName",
    headerName: "Last name",
    width: 150,
    editable: true,
  },
  {
    field: "age",
    headerName: "Age",
    type: "number",
    width: 110,
    editable: true,
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (params) => `${params.row.firstName || ""} ${params.row.lastName || ""}`,
  },
];

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];

const Paciente = () => {
  return (
    <div>
      {" "}
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  );
};

export default Paciente;

Its the exactly same code at the documentation. Now, what is happening:

enter image description here

Can someone help me with that?

Here's my package.json:

{
  "name": "junta-dashboard-2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.5.2",
    "@mui/x-data-grid": "^5.6.1",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@trendyol-js/react-carousel": "^2.0.1",
    "axios": "^0.26.0",
    "chart.js": "^3.7.1",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-icons": "^4.3.1",
    "react-loading": "^2.0.3",
    "react-markdown-editor-lite": "^1.3.2",
    "react-markdownit": "^2.5.0",
    "react-quill": "^1.3.5",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Upvotes: 1

Views: 5099

Answers (1)

Alexandre Fauquette
Alexandre Fauquette

Reputation: 250

Because the parent element does not have height. Then, the grid does not know how much space is available.

The two solutions are:

  • set parent element height
  • use prop autoHeight

More details on the following answer: https://stackoverflow.com/a/69707313/17578611

Upvotes: 4

Related Questions