我试图显示一个列的数据内芯片我绑到实现芯片
代码:https://stackblitz.com/edit/react-hymlnb?file=demo.tsx
网站链接:https://react-hymlnb.stackblitz.io
我尝试使用
import Chip from '@mui/material/Chip';
但不能将芯片实现到该特定行。
期望:
验证码:
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', width: 90 },
{
field: 'Name',
headerName: 'Name',
width: 150,
editable: true,
},
{
field: 'Status',
headerName: 'status',
width: 150,
editable: true,
},
];
const rows = [
{ id: 1, Status: 'Filled', Name: 'Jon' },
{ id: 2, Status: 'Filled', Name: 'Cersei' },
{ id: 3, Status: 'Rejected', Name: 'Jaime' },
{ id: 4, Status: 'Rejected', Name: 'Arya' },
{ id: 5, Status: 'Rejected', Name: 'Daenerys' },
{ id: 6, Status: 'Rejected', Name: 'Anurag' },
{ id: 7, Status: 'Filled', Name: 'Ferrara' },
{ id: 8, Status: 'Filled', Name: 'Rossini' },
{ id: 9, Status: 'Filled', Name: 'Harvey' },
];
export default function DataGridDemo() {
return (
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={5} />
</Box>
);
}
1条答案
按热度按时间yrdbyhpb1#
你需要添加一个函数 prop
列定义。
因此列定义如下所示:
我正在使用材质UI
<Chip/>
component另外,请检查字段名和标题名中的大小写,因为这可能会导致在MUI DataGrid中表示数据的问题。