I have a datagrid using MUI and I have came across a use case where I need to hide one of the columns if I do not have a certain role. Here is the code.
const hideColumn = () => {
const globalAdmin = auth.verifyRole(Roles.Admin);
if(!globalAdmin){
return true;
}
return false;
};
const columns = [
{ field: 'id', headerName: 'ID', width: 100 },
{ field: 'name',
headerName: 'Client code',
flex: 1,
hide: hideColumn,
renderCell: (params) => {
return params.getValue("name");
},
},
];
I'm confused on why this is not working. If I just use hide:true or hide:false it works but I need have an if statement to check the credentials first and this can't be done in the renderCell (or at least I can't get it to work). Does anyone know how to do this correctly?
You should call it as function hide: hideColumn()
Or you can create a function to retrieve your columns and pass props to this function. Then you just have to push your columns according to criteria:
export default function getColumns (product, isHide, t) {
let columns = [
{
field: 'organizationName',
headerName: headerNameOrganization,
flex: 0.3,
},
]
if (!product) {
columns.push(
{
field: 'status',
headerName: headerNameStatus,
flex: 0.2,
filterable: false,
})
}
return columns
}