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);
}
Improve this question
4
  • Can you post the code that you have? Can't we add a class to lightning: button to hide it?
    – amidstCloud
    Commented Mar 15, 2018 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
    Commented Mar 15, 2018 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
    Commented Mar 19, 2018 at 15:21
  • But that seems overly complex for something that you should be able to handle declaratively.
    – Michael Kaplan
    Commented Mar 28, 2018 at 14:29

1 Answer 1

Reset to default
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);
}
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .