2

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, 
                      }
        }
    ]);
}
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.

1

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.

0

enter image description here

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...

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.