0

I have a lightning:dataTable control in a lightning component I'm developing. I have a column in that dataTable of type 'button'. ​

I want to be able to hide the button in that column, based upon the value of another column in that row.

Is there a way I can do this, while still using lighting:dataTable? By way of example:

Component <lightning:dataTable columns="{! v.gridColumns }" data="{! v.gridData }" keyField="Document" hideCheckboxColumn = "true" aura:id="myTree"/>

Controller

onInit: function (component, event, helper) {        
    var columns = [];
    columns.push({type: 'button', label: 'Button Column', fieldName: 'detailPage', typeAttributes: {name: 'show_details', label: 'My Page'}});
    columns.push({type: 'text', fieldName: 'DocumentCategory', label: 'Document Category'});

    component.set('v.gridColumns', columns);
}
  • Can you post the code that you have? Can't we add a class to lightning: button to hide it? – amidstCloud Mar 15 '18 at 20:09
  • lightning:dataTable doesn't give me the flexibility to specify anything on the button beyond: "disabled, iconName, iconPosition, label, name, title, variant" Out of the box it handles creating the markup for buttons. – Michael Kaplan Mar 15 '18 at 20:15
  • Typically, you would need to capture some kind of event, and then find the button from the target or target source in the event to add a class like slds-hide. – JRiffe Mar 19 '18 at 15:21
  • But that seems overly complex for something that you should be able to handle declaratively. – Michael Kaplan Mar 28 '18 at 14:29
1

So I found a reasonable solution. It still renders a small "Line" in the place of the button, but what I wound up doing was binding the button's disabled attribute to field on my result set, and then setting the button label to be an empty string.

e.g.


Where "detailPage" is the record, and "buttonLabel" and "disableMe" are fields on the record.
"buttonLabel" and "disableMe" are set in the helper based upon the content of the record.

onInit: function (component, event, helper) {        
var columns = [];
columns.push({type: 'button', label: 
"Button Column", fieldName: 'detailPage', 
        typeAttributes: {
            name: 'navigate', 
            label: { fieldName: 'buttonLabel'},
            disabled: { fieldName: 'disableMe'}
        }
    });
columns.push({type: 'text', fieldName: 'DocumentCategory', label: 'Document Category'});

component.set('v.gridColumns', columns);
}

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.