javascript 将芯片添加到材质ui DataGrid列

mnemlml8  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(125)

我试图显示一个列的数据内芯片我绑到实现芯片
代码: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>
  );
}
yrdbyhpb

yrdbyhpb1#

你需要添加一个函数 prop

renderCell: (params) => {}

列定义。
因此列定义如下所示:

const GridColDef = [
  {
    field: 'id',
    headerName: 'Id',
    width: 90
  },
  {
    field: 'name',
    headerName: 'Name',
    width: 150,
    editable: true,
  },
  {
    field: 'status',
    headerName: 'Status',
    width: 150,
    editable: true,
    renderCell: (params) => {
      const isRejected = params.value === "Rejected";
      return <Chip icon={isRejected ? <WarningIcon/> : <CheckIcon/>}  label={params.value} variant={"outlined"} color={isRejected ? "error" : "success"} />;
    }
  },
];

我正在使用材质UI <Chip/>component
另外,请检查字段名和标题名中的大小写,因为这可能会导致在MUI DataGrid中表示数据的问题。

相关问题