[SalesForce] How do we use ‘button-icon’ column in lightning:datatable

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

Best Answer

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

Related Topic