Conditionally Render Button in lightning:datatable

Question

We are using the (simplified) component/controller below but we want the view button to conditionally render. E.g. When record.boolean__c = true. Is there a way to do this using the lightning:datatable component?

I understand that these would render as lightning:button but I cannot see a method to dynamically render on either component.

/////////////
//Component//
/////////////

<lightning:datatable
    columns="{! v.theColumns }"
    data="{! v.theData }"
    keyField="id"
    onrowaction="{!c.handleRowAction}"
    />

//////////////  
//Controller//
//////////////

doInit : function(component, event, helper){
    component.set("v.productColumns",[
        {label: 'Record Name', fieldName:
            'Name',type: 'text', iconName: 'standard:product_item'
        },
        {type: 'button',
            sortable: false,
            typeAttributes: {
                            iconName: 'action:preview',
                            label: 'View', 
                            name: 'viewRecord', 
                            disabled: false, 
                          }
        },
        {type: 'button',
        sortable: false,
        typeAttributes: {
                        iconName: 'action:new',
                        label: 'Add', 
                        name: 'addRecord', 
                        disabled: false, 
                      }
        }
    ]);
}

Answer 1

According to the documentation, you can only enable/disable the button with a disabled property that points to another data cell.

You can see that in the "Action" column of the "Data Table in Action" example.

If you want to hide the action, you are better off using dynamic row actions. They don't show up as a button but they are generated on a per-row basis.

Answer 2

One solution is to use the built-in lightning classes:

{ 
    type: "button", 
    typeAttributes: {
             label: 'View',
             name: 'viewRecord',
             title: 'View',
             variant: 'brand',
             class: {fieldName: 'showButton'}, 
    }
 }

recommend to put 'slds-hide', or 'slds-show', in the field 'showButton' coming back from the data in the table, works perfect with no weird lines.

Answer 3

You may get a "conditional" display of buttons with 2 columns: actionLabel (the label on button, null everywhere you don't want to see the button) and actionDisabled (true only where you need button to show up).

Because button label is null, it displays like a above (a line). When defining the columns for datatable add:

{label: 'Details', type: 'button', initialWidth: 150, typeAttributes:
   { label: { fieldName: 'actionLabel'}, title: 'Show Details', name: 'view_details', disabled: {fieldName: 'actionDisabled'}, class: 'btn_next'}}

Just an idea...