1

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)

![enter image description here

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

A checked box would appear as:

<lightning-primitive-cell-types>
  <temaplte>
    <lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
      <svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="check" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_x-small">
        <use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.24.0#check">
        </use>
      </svg>
    </lightning-primitive-icon>
  </temaplte>
</lightning-primitive-cell-types>

While an unchecked cell is:

<lightning-primitive-cell-types>
</lightning-primitive-cell-types>

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 and false (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.

  • I did make sure that the literal boolean value is being passed and not the string – Ayoola Olapo Apr 23 at 12:59
0

I was hiding the lightning-primitive-icon element in another place that I had forgotten about and needed to narrow the hiding of that element down to the specific data cells and not the entire lightning:datatable.

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.