Tengo una cuadrícula de datos que usa MUI y me encontré con un caso de uso en el que necesito ocultar una de las columnas si no tengo un rol determinado. Aquí está el código.
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"); }, }, ]; Estoy confundido sobre por qué esto no funciona. Si solo uso hide:true u hide:false , funciona, pero primero necesito tener una declaración if para verificar las credenciales y esto no se puede hacer en renderCell (o al menos no puedo hacer que funcione). ¿Alguien sabe cómo hacer esto correctamente?
Deberías llamarlo como función hide: hideColumn()
O puede crear una función para recuperar sus columnas y pasar accesorios a esta función. Entonces solo tiene que empujar sus columnas de acuerdo con los criterios:
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 }