How to disable inline edit for specific profiles

Question

How to disable inline Edit for certain profiles.

      <lightning:datatable 
                         keyField="Id" 
                         aura:id="subscriberTable" 
                         data="{! v.data }" 
                         columns="{! v.columns }" 
                         hideCheckboxColumn="true" 
                         showRowNumberColumn="false" 
                         initialRows="{! v.recordsToDisplay}" sortedBy="{! v.sortedBy }" 
                         sortedDirection="{! v.sortedDirection }" 
                         onsort="{! c.updateColumnSorting}" 
                         draftValues="{! v.draftValues }" 
                         onsave="{! c.handleSaveEdition }" />
</div>

Js side:

     component.set('v.columns', [{
            label: 'Name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Alias',
            fieldName: 'Alias__c',
            type: 'text',
            sortable: true
        },
        {
            label: 'Point of Contact(Email)',
            fieldName: 'Email__c',
            type: 'text',
            sortable: true,
            editable: true
        },
        {
            label: 'Active',
            fieldName: 'Active__c',
            type: 'boolean',
            sortable: true,
            editable: true
        },
        {
            label: 'Portal Access',
            fieldName: 'Portal_Access__c',
            type: 'boolean',
            sortable: true,
            editable: true,

        },


    ]);

How to set "Active" field editable to false for these 2 profiles (Test1,Test2).In normal Table we can use aura:if but Iam not sure how to do this here.

//I have tried this approach but it works but a lot of code

JS side:

  helper.userEditAccess(component,event,helper);

Helper:

   userEditAccess: function(component, event, helper) {
    var action = component.get("c.canUserEdit");
    action.setCallback(this, function(a) {
        var state = a.getState();
        if (state === 'SUCCESS') {
            if (a.getReturnValue() == true) {
                component.set('v.columns', [{
                        label: 'Name',
                        fieldName: 'Name',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Alias',
                        fieldName: 'Alias__c',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Point of Contact(Email)',
                        fieldName: 'Email__c',
                        type: 'text',
                        sortable: true,
                        editable: true
                    },
                    {
                        label: 'Active',
                        fieldName: 'Active__c',
                        type: 'boolean',
                        sortable: true,
                        editable: false
                    },
                    {
                        label: 'Portal Access',
                        fieldName: 'Portal_Access__c',
                        type: 'boolean',
                        sortable: true,
                        editable: false,

                    },


                ]);
            } else if (a.getReturnValue() == false) {
                component.set('v.columns', [{
                        label: 'Name',
                        fieldName: 'Name',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Alias',
                        fieldName: 'Alias__c',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Point of Contact(Email)',
                        fieldName: 'Email__c',
                        type: 'text',
                        sortable: true,
                        editable: true
                    },
                    {
                        label: 'Active',
                        fieldName: 'Active__c',
                        type: 'boolean',
                        sortable: true,
                        editable: true
                    },
                    {
                        label: 'Portal Access',
                        fieldName: 'Portal_Access__c',
                        type: 'boolean',
                        sortable: true,
                        editable: true,

                    },


                ]);
            }
        } 
    });
    // enqueue the action 
    $A.enqueueAction(action);
}

Apex class:

@AuraEnabled(cacheable=true)
public static Boolean canUserEdit() {
    List<string>profileNameList=new List<string>();
    List<user>userList=[SELECT ID,PROFILE.NAME,PROFILE.Id FROM USER where profile.name='Test-Admin'];
    for(User us:userList){
        profileNameList.add(us.PROFILE.Id);
    }
    Id profileId = UserInfo.getProfileId();
    if(profileNameList.contains(profileId)){
        return true;
    }else{
        return false;
    }
}

Answer 1

With the usage of Apex

Assuming this is your Controller:

public class TestController {

    public  static final Set<Id> EDIT_ALLOWED_PROFILE_IDS = new Set<Id> {
        '00e2o000001XMNaAAO',
        '00e2o000001XMNaBCS'
    };

    @AuraEnabled(cacheable=true)
    public static Boolean canUserEdit() {
        Id profileId = UserInfo.getProfileId();
        return EDIT_ALLOWED_PROFILE_IDS.contains(profileId);
    }
}

EDIT_ALLOWED_PROFILE_IDS can be of course initialized via Custom Settings, Custom Metadata and so on.

Then use this method in your JS code and assign its result to the editable property.

LWC version

HTML:

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                show-row-number-column
                row-number-offset={rowOffset}
                suppress-bottom-bar
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

JS:

import { LightningElement, wire, track } from 'lwc';
import canUserEdit from '@salesforce/apex/TestController.canUserEdit';

const columns = [
    { label: 'Label', fieldName: 'name'},
    { label: 'Website', fieldName: 'website', type: 'url'},
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date'},
    { label: 'Balance', fieldName: 'amount', type: 'currency'}
];

export default class TestLwcComponent extends LightningElement {

    connectedCallback() {
        canUserEdit()
            .then(result => {
                this.columns.forEach(function (item, index) {
                    item.editable = result
                });
                this.columns = [...this.columns];
            })
            .catch(error => {
                console.log(error);
            })
        this.data = [
            {
                "name":"Maddison Emard",
                "email":"[email protected]",
                "website":"https://jennings.org",
                "amount":"134.01",
                "phone":"803.854.4656 x4777",
                "closeAt":"2020-04-22T22:31:35.941Z",
                "id":"1baf5e28-f839-4ddd-84ee-e71f0bcca59d"
            },
            {
                "name":"Lilla Stamm",
                "email":"[email protected]",
                "website":"http://princess.net",
                "amount":"306.11",
                "phone":"1-753-685-9600 x9132",
                "closeAt":"2020-05-29T10:20:59.730Z",
                "id":"4d38f892-0c6e-42c1-beb3-a41faae1c501"
            },
            {
                "name":"Pauline Labadie",
                "email":"[email protected]",
                "website":"https://mafalda.name",
                "amount":"57.54",
                "phone":"860.982.3835 x2136",
                "closeAt":"2021-01-08T23:48:57.409Z",
                "id":"ad225ea1-8a64-4a05-99e9-bba42c865d45"
            }
        ];
    }

    @track columns = columns;
    @track data = [];
    @track rowOffset = 0;
}

Aura version

Component:

<aura:component controller="TestController" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="errors" type="Object" default="[]"/>
    <aura:attribute name="draftValues" type="Object" default="[]"/>

    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <div class="slds-p-around_medium">
        <h1 class="slds-text-heading_large">Inline edit playground</h1>
    </div>

    <div style="height: 300px">
        <lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            errors="{! v.errors }"
            draftValues="{! v.draftValues }"
        />
    </div>
</aura:component>

Controller:

({
    init: function (cmp, event, helper) {
        var action = cmp.get("c.canUserEdit");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var canEdit = response.getReturnValue();
                cmp.set('v.columns', [
                    { label: 'Label', fieldName: 'name', editable: canEdit},
                    { label: 'Website', fieldName: 'website', type: 'url', editable: canEdit},
                    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: canEdit},
                    { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: canEdit},
                    { label: 'Balance', fieldName: 'amount', type: 'currency', editable: canEdit}
                ]);
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);

        cmp.set('v.data', [
            {
                "name":"Maddison Emard",
                "email":"[email protected]",
                "website":"https://jennings.org",
                "amount":"134.01",
                "phone":"803.854.4656 x4777",
                "closeAt":"2020-04-22T22:31:35.941Z",
                "id":"1baf5e28-f839-4ddd-84ee-e71f0bcca59d"
            },
            {
                "name":"Lilla Stamm",
                "email":"[email protected]",
                "website":"http://princess.net",
                "amount":"306.11",
                "phone":"1-753-685-9600 x9132",
                "closeAt":"2020-05-29T10:20:59.730Z",
                "id":"4d38f892-0c6e-42c1-beb3-a41faae1c501"
            },
            {
                "name":"Pauline Labadie",
                "email":"[email protected]",
                "website":"https://mafalda.name",
                "amount":"57.54",
                "phone":"860.982.3835 x2136",
                "closeAt":"2021-01-08T23:48:57.409Z",
                "id":"ad225ea1-8a64-4a05-99e9-bba42c865d45"
            }
        ]);
    }
});

Without the usage of Apex

Aura version

Instead of the Apex controller, you can use a Lightning Data Service.

Component:

<aura:component controller="TestController" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="errors" type="Object" default="[]"/>
    <aura:attribute name="draftValues" type="Object" default="[]"/>

    <aura:attribute type="String" name="permittedProfiles" default="{!join('','00e2o0000022wBLAAY,', '00e2o000001XMNaBCS')}"/>

    <aura:attribute name="currentUser" type="User" />
    <force:recordData
        fields="Name, Email, UserType, ProfileId"
        recordId="{!$SObjectType.CurrentUser.Id}"
        targetFields="{!v.currentUser}"
        mode="VIEW"
        recordUpdated="{!c.handleRecordUpdated}"
    />

    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <div class="slds-p-around_medium">
        <h1 class="slds-text-heading_large">Inline edit playground</h1>
    </div>

    <div style="height: 300px">
        <lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            errors="{! v.errors }"
            draftValues="{! v.draftValues }"
        />
    </div>
</aura:component>

Controller:

({
    init: function (cmp, event, helper) {
        cmp.set('v.data', [
            {
                "name":"Maddison Emard",
                "email":"[email protected]",
                "website":"https://jennings.org",
                "amount":"134.01",
                "phone":"803.854.4656 x4777",
                "closeAt":"2020-04-22T22:31:35.941Z",
                "id":"1baf5e28-f839-4ddd-84ee-e71f0bcca59d"
            },
            {
                "name":"Lilla Stamm",
                "email":"[email protected]",
                "website":"http://princess.net",
                "amount":"306.11",
                "phone":"1-753-685-9600 x9132",
                "closeAt":"2020-05-29T10:20:59.730Z",
                "id":"4d38f892-0c6e-42c1-beb3-a41faae1c501"
            },
            {
                "name":"Pauline Labadie",
                "email":"[email protected]",
                "website":"https://mafalda.name",
                "amount":"57.54",
                "phone":"860.982.3835 x2136",
                "closeAt":"2021-01-08T23:48:57.409Z",
                "id":"ad225ea1-8a64-4a05-99e9-bba42c865d45"
            }
        ]);
    },
    handleRecordUpdated: function(cmp, event, helper) {
        var permittedProfilesAttribute = cmp.get('v.permittedProfiles');
        var permittedProfilesArray = permittedProfilesAttribute.split(',');
        var eventParams = event.getParams();

        if(eventParams.changeType === "LOADED") {
            var currentUser = cmp.get('v.currentUser');
            var canEdit = permittedProfilesArray.includes(currentUser.ProfileId);

            cmp.set('v.columns', [
                { label: 'Label', fieldName: 'name', editable: canEdit},
                { label: 'Website', fieldName: 'website', type: 'url', editable: canEdit},
                { label: 'Phone', fieldName: 'phone', type: 'phone', editable: canEdit},
                { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: canEdit},
                { label: 'Balance', fieldName: 'amount', type: 'currency', editable: canEdit}
            ]);
        }
    }
});

The examples above are based on Datatable Example: Data Table With Inline Edit from LWC Docs and Aura Docs.