5

I have a lightning:datatable, which is rendering a set of objects:

<lightning:datatable data="{!v.propertyMappings}" 
                           columns="{!v.columns}" 
                           keyField="Id" 
                           onrowaction="{!c.handleRowAction}"
                           hideCheckboxColumn="true" 
                           resizeColumnDisabled="true" />

I want to dynamically enable/disable some rows based on an attribute on Custom_Object__c that is loaded into {!v.propertyMappings}.

I tried adding a disabled attribute to the object data when it was loaded in my helper:

    var responseValues = response.getReturnValue();
    for (var i = 0; i < responseValues.length; i++) {
      responseValues[i]["disabled"] = true;
    } 
    component.set("v.propertyMappings", responseValues);

But it didn't seem to have any effect...?

My row-actions are still available (from {!v.columns}):

{ type: "action", typeAttributes: { rowActions: actions } }

Should I just use another component?

9

You need to handle the disabled attribute in your getRowActions handler (you do have one, right?). Here's a self-contained example that demonstrates this.

Application

<aura:application extends="force:slds">
    <aura:attribute name="data" type="List" />
    <aura:attribute name="columns" type="List" />

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

    <div style="height: 300px">
    <lightning:datatable data="{!v.data}"
                         columns="{!v.columns}"
                         keyField="Id"
                         onrowaction="{!c.handleAction}"
                         hideCheckboxColumn="true"
                         resizeColumnDisabled="true" />
    </div>
</aura:application>

Controller

({
    init: function(component, event, helper) {
        // callback binding
        var actions = helper.getRowActions.bind(this, component);
        // sample data
        component.set("v.data", [
            { Id: "1", intValue: 0 },
            { Id: "2", intValue: 0 },
            { Id: "3", intValue: 0 },
            { Id: "4", intValue: 0 },
            { Id: "5", intValue: 0 },
            { Id: "6", intValue: 0 }
        ]);
        // column data
        component.set("v.columns", [
            { label: "value", fieldName: "intValue", type: "number" },
            { type: "action", typeAttributes: { rowActions: actions }}
        ]);
    },
    // handle action
    handleAction: function(component, event, helper) {
        var action = event.getParam("action"),
            row = event.getParam("row"),
            data = component.get("v.data"),
            rowIndex = data.indexOf(row);
        switch(action.name) {
            case 'inc': data[rowIndex].intValue++;
                break;
        }
        component.set("v.data", data);
    }
})

Helper

({
    getRowActions: function(component, row, cb) {
        var actions = [];
        actions.push({
            label: "Increment", 
            name: "inc",
            // allow three increments per row
            disabled: row.intValue > 2 });
        cb(actions);
    }
})

Here, I'm using row-based data to determine if the menu item is disabled or not. This is done dynamically at the moment the menu button is clicked. You can make this as simple or complicated as need be.

| improve this answer | |
  • I wonder @sfdcfox if you can explain what you are doing with the helper.getRowActions.bind and how it works? – Itai Shmida Mar 26 '18 at 6:17
  • @ItaiShmida You'll want to read Function.prototype.bind. It's not Lightning specific, but rather just a general JavaScript function. – sfdcfox Mar 26 '18 at 6:29
  • @sfdcfox can we do the same approach for lightning button that is of type button. – Vidhyasagaran Muralidharan Apr 7 '18 at 23:10
  • @VidhyasagaranMuralidharan you can set the disabled attribute, I believe, but you'll want to check the documentation. Actions should always use an action menu, not a button. – sfdcfox Apr 8 '18 at 0:22
  • 1
    @VidhyasagaranMuralidharan No, you can't use getRowActions, because that's used for row actions. However, you can still evaluate based on some data to determine if you need to disable the button (<lightning:button disabled="{!row.someAttribute}" ... />). If you're stuck, try asking a new question so we can see the code you've tried so far and where you're stuck. – sfdcfox Apr 8 '18 at 3:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.