How to show a column only when authenticated - material-ui

Question

I'm building an app using React and MaterialUI. In the DataGrid is there a way to show or "hide" a specific column ? My last column is called action and I have the delete in there and would like to show it to ppl who are loggged in.
Here's my test component.
I've put the part of the code that I thought would do it but unfortunately it's not the case
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

For anyone who is wondering how to do it, I found a simple solution. I added the hide: !isAuthenticated on the column definition and that fixed my problem. Here the new column definition with the 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)}
/>,
];
},
},
];
Don't know if that's how I'm suppose to do it but works for me!