I am trying to render a lightning:datatable in a custom lightning component and for some reason the columns with a type of 'boolean' are not displaying data. The chrome console verifies that the boolean values are successfully being retrieved from the my initTable function.
This worked and displayed the checkbox icon as expected and then stopped working after some updates and I can't figure out why
The image below shows the columns not displaying for two boolean columns: IS KIP and IS CAMPAIGN MEMBER (LEFT RED BOX)
It also shows the console where I log the data values to be sure that my true and false data values are valid. (RIGHT RED BOX)
initTable from my helper class:
initTable: function (component, event, helper) {
console.log("Enter initTable");
var fieldList = component.get("v.rawFields");
console.log(fieldList);
var colList = [];
for(var i = 0; i < fieldList.length; i++){
console.log('fieldType ==> ' + fieldList[i].Field_Type__c);
if(fieldList[i].Field_Type__c == 'detailLink'){
var colMap = {
label: fieldList[i].MasterLabel,
fieldName: fieldList[i].Id,
type: 'button',
cellAttributes: { alignment: 'left' },
typeAttributes: {
iconName: 'description',
name: 'viewDetails',
title: 'Click to view details',
label: {
fieldName: fieldList[i].Id
},
disabled: false,
value: 'test',
variant: 'base'
}
}
}
else if (fieldList[i].Field_Type__c == 'Checkbox') {
var colMap = {
label: fieldList[i].MasterLabel,
fieldName: 'm01m0000000CwMYAA0',// fieldList[i].Id,
type: 'boolean'//this.getType(fieldList[i].Field_Type__c),
};
} else {
var colMap = {
label: fieldList[i].MasterLabel,
fieldName: fieldList[i].Id,
type: this.getType(fieldList[i].Field_Type__c)
}
}
colList.push(colMap);
}
component.set("v.columns", colList);
console.log("colList:");
console.log(colList);
},
Note:
I commented out areas where I'm dynamically pulling the column attributes and hard-coded their values ('m01m0000000CwMYAA0' and 'boolean') for troubleshooting to see if anything will display.
As you can see, I've set up my columns correctly as all of my other data columns of varying types (text, percent) are displaying
Additional Note
I've noticed that there is a functional difference in the html when I inspect the values of a cell that displays data, and one that does not:
html of a cell displaying the data:
<lightning-primitive-cell-types><lightning-formatted-number>96%</lightning-formatted-number></lightning-primitive-cell-types>
html of the boolean cells that do not:
<lightning-primitive-cell-types></lightning-primitive-cell-types>
I think I should be expecting some type of
<lightning-primitive-cell-types><lightning-boolean>true</lightning-boolean> </lightning-primitive-cell-types>
Best Answer
A checked box would appear as:
While an unchecked cell is:
I assure you, Boolean values do work correctly. Double-check the source data to make sure the fieldName matches the values in each row, and that the values are the literal values
true
andfalse
(as opposed to a string of"true"
or"false"
).Note: The code above was copied verbatim from an app. Apparently it really is spelled out as
temaplte
for this element.