1

I'm trying to add button-icon column to my lightning:datatable, but it does not display any icon and simply a blank cell is rendered.

I fail to see what I might be doing wrong here. Can someone guide me a bit on this?

My sample code is as follows:

TableGrid.cmp

<aura:component controller="TableGridController" implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="dataList" type="Object" />
    <aura:attribute name="columnsList" type="List" />

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

    <div class="slds-is-relative">
        <lightning:datatable    keyField="Id"
                                data="{! v.dataList }"
                                columns="{! v.columnsList }"
                                hideCheckboxColumn="true" />
    </div>
</aura:component>

TableGridController.js

({
    init: function (component, event, helper) {
        helper.getContacts(component);
    }
})

TableGridHelper.js

({
    getContacts : function(component) {
        var action  = component.get("c.getContactsList");
        action.setCallback(this,function(response){
            var result = response.getReturnValue();

            var columns = [
                {
                    type: 'button-icon',
                    fixedWidth: 40,
                    typeAttributes: {
                        iconName: 'utility:edit',
                        name: 'edit_record', 
                        title: 'Edit',
                        variant: 'border-filled',
                        alternativeText: 'edit',
                        disabled: false
                    }
                },
                {
                    label: 'Name', 
                    fieldName: 'Name', 
                    type: 'text'
                }
            ];
            component.set('v.columnsList', columns);
            component.set("v.dataList", result);
        });
        $A.enqueueAction(action);
    }
})

TableGridController APEX Class:

public with sharing class TableGridController {
    @AuraEnabled
    public static List<Contact> getContactsList() {
        return [select Id,Name from Contact limit 10];
    }
}

The Output I've in Datagrid is like this: enter image description here

1

Silly me! https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example

Is already updated to Winter '19 release, and this dataType for Columns is newly added in Winter '19 release, while my coding org is still on 'Summer '18` release.

The above code works fine in Winter '19 release org

| improve this answer | |

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.