DataGrid 空白/不显示数据？材质界面答案

【问题标题】：DataGrid blank/not displaying data? Material UIDataGrid 空白/不显示数据？材质界面
【发布时间】：2022-01-02 20:16:08
【问题描述】：

由于某种原因，我的 DataGrid 表没有显示任何内容。

Example of my data and DataGrid not displaying anything in new project with source code from below

我在以前的项目中遇到过这个问题，我认为这是我在尝试学习所有内容时所做的事情，所以我创建了另一个项目，设置 reactjs 和材料 ui 并再次尝试并遇到了同样的问题。

我在 GitHub 上做了一个错误报告，但我真的在寻找一个快速的解决方案。有没有人有任何想法？我项目中的所有内容都已更新到最新版本（包括 django 和 mui 库）

import React, { useEffect, useState } from "react"
import jQuery from 'jquery'
import { Container } from '@mui/material';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid'


function WatcherOverview() {
    
      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 },
      ];

      return (
        <Container>
          <h1>Single items:</h1>
          <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
        </Container>
      );
    }

export default WatcherOverview

【问题讨论】：

标签： javascript material-ui datagrid

【解决方案1】：

您在 DataGrid 中缺少 autoHeight 属性。如果你想对高度进行更多的颗粒控制。然后检查headerHeight 和rowHeight https://mui.com/api/data-grid/data-grid/

<DataGrid
  ...
  autoHeight
/>

如果您不想在 DataGrid 中使用 autoHeight，那么您需要在容器中指定高度。 https://mui.com/components/data-grid/layout/

<Container sx={{height: 350}}>
  ...
   <DataGrid
      ...
   />
</Container>

您也可以使用headerHeight 和rowHeight 进行更多的颗粒控制。

<Container sx={{height: 350}}>
  ...
  <DataGrid
    ...
    headerHeight={75}
    rowHeight={65}
  />
</Container>

【讨论】：