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];
}
}