DataGrid blank/not 显示数据? Material UI
DataGrid blank/not displaying data? Material UI
出于某种原因,我的 DataGrid table 没有显示任何内容。
Example of my data and DataGrid not displaying anything in new project with source code from below
我在之前的项目中遇到过这个问题,我认为这是我在尝试学习所有内容时所做的事情,所以我做了另一个项目,设置 reactjs 和 material ui 并再次尝试有同样的问题。
我在 GitHub 上提交了错误报告,但我真的在寻找 quick 解决方案。有人有什么想法吗?我项目中的所有内容都已更新到最新版本(包括 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
您缺少 DataGrid 中的 autoHeight
道具。如果你想对高度进行更多的颗粒控制。然后在 https://mui.com/api/data-grid/data-grid/
上检查 headerHeight
和 rowHeight
<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>
出于某种原因,我的 DataGrid table 没有显示任何内容。
Example of my data and DataGrid not displaying anything in new project with source code from below
我在之前的项目中遇到过这个问题,我认为这是我在尝试学习所有内容时所做的事情,所以我做了另一个项目,设置 reactjs 和 material ui 并再次尝试有同样的问题。
我在 GitHub 上提交了错误报告,但我真的在寻找 quick 解决方案。有人有什么想法吗?我项目中的所有内容都已更新到最新版本(包括 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
您缺少 DataGrid 中的 autoHeight
道具。如果你想对高度进行更多的颗粒控制。然后在 https://mui.com/api/data-grid/data-grid/
headerHeight
和 rowHeight
<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>