如何仅在经过身份验证时显示列

Question

我正在使用 React 和 MaterialUI 构建应用程序。在 DataGrid 中是否有显示或“隐藏”特定列的方法？我的最后一列称为操作，我在那里删除并想将其显示给已登录的人。

这是我的测试组件。

我已经放置了我认为可以做到的部分代码，但不幸的是，情况并非如此

import { useContext } from 'react';
import { Box} from '@mui/material';
import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
import { BacsRoulantsContext } from '../contexts/BacsRoulantsContext';
import { Delete as DeleteIcon } from '@mui/icons-material';

const trashRows = [
  {
    id: 1,
    serialNumber: '123456',
    rfidChip: '123455',
    bacType: 'DECHETS-360',
    deliveryDate: '2002-03-03',
  },
  {
    id: 2,
    serialNumber: '7890112',
    rfidChip: '123455',
    bacType: 'DECHETS-360',
    deliveryDate: '2002-10-03',
  },
];

export default function Configuration() {
  const { isAuthenticated } = useContext(BacsRoulantsContext); 

  const BINSCOLUMNS = [
    {
      field: 'id',
      headerName: 'ID',
      width: 50,
    },
    {
      field: 'serialNumber',
      headerName: 'Numéro de série',
      width: 150,
      editable: true,
    },
    {
      field: 'rfidCode',
      headerName: 'Puce RFID',
      width: 150,
    },
    {
      field: 'description',
      headerName: 'Type de bacs',
      width: 150,
    },
    {
      field: 'deliveryDate',
      type: 'date',
      headerName: 'Date de livraison',
      width: 160,
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      width: 100,
      cellClassName: 'actions',
      getActions: ({ id }) => {
        **return [
          { isAuthenticated } && (
            <GridActionsCellItem
              icon={<DeleteIcon />}
              label="Cancel"
              onClick={() => console.log('MyID', id)}
            />
          ),
        ];**
      },
    },
  ];


  return (
    <Box sx={{ width: '100%' }}>
        <DataGrid
          autoHeight
          columns={BINSCOLUMNS}
          disableColumnMenu
          hideFooter
          disableSelectionOnClick
          getRowId={(row) => row.id}
          rows={trashRows}
        />
    </Box>
  );
}

Answer 1

对于任何想知道如何做的人，我找到了一个简单的解决方案。我在列定义上添加了 hide: !isAuthenticated 并解决了我的问题。这里的新列定义带有 hide

const BINSCOLUMNS = [
    {
      field: 'id',
      flex: 1,
      headerName: 'ID',
      sortable: false,
    },
    {
      field: 'serialNumber',
      flex: 1,
      headerName: 'Numéro de série',
      sortable: false,
    },
    {
      field: 'rfidCode',
      flex: 1,
      headerName: 'Puce RFID',
      sortable: false,
    },
    {
      field: 'description',
      flex: 1,
      headerName: 'Type de bacs',
      sortable: false,
    },
    {
      field: 'deliveryDate',
      flex: 1,
      headerName: 'Date de livraison',
      sortable: false,
      type: 'date',
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      hide: !isAuthenticated,
      width: 100,
      cellClassName: 'actions',
      getActions: ({ id }) => {
        return [
          <GridActionsCellItem
            icon={<DeleteIcon />}
            label="Cancel"
            onClick={() => console.log('MyID', id)}
          />,
        ];
      },
    },
  ];

不知道我是否应该这样做，但对我有用！

如何仅在经过身份验证时显示列

How to show a column only when authenticated

material-ui