Lightning Datatable not displaying data or headers

Question

I have a simple aura component that is supposed to display a contact's affiliations, and a simple form to add more. The data is fetched on init, based on the contact id that is set by the parent component.

The data is being retrieved and formatted, but the datatable is being rendered empty.

Component:

<aura:component controller="AccController" extends='c:baseModel'>
<aura:attribute name='contactId' type='String'/>
<aura:attribute name='data' type='List'/>
<aura:attribute name='columns' type='Object' default="[
    { label: 'Id', fieldName: 'Id', type: 'text'},
    { label: 'Organisation Name', fieldName: 'npe5__Organization___Name', type: 'text'},
    { label: 'Primary', fieldName: 'isPrimary', type: 'boolean'}]"/>
<aura:attribute name='showAffForm' type='Boolean' default='false'/>

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

<h1>Affiliations</h1>
<lightning:datatable data="{! v.data }"  columns="{! v.columns }"  keyField="id"/>

<aura:if isTrue="{! v.showAffForm}">
        <lightning:recordEditForm recordId="{! v.accountId}" objectApiName="Account" onsuccess="{! c.processSuccess }">
            <lightning:inputField fieldName='npe01__One2OneContact__c' class='hide_label slds-p-top_small'/>
            <lightning:button type="submit" name="save" label="Save"/>
        </lightning:recordEditForm>
    </aura:if>

JS Controller:

({
doInit : function(component, event, helper) {
    helper.setAffiliations(component);
}
})

JS Helper:

({
setAffiliations : function(component) {
    const conId = component.get('v.contactId');
    return Promise.resolve(this.enqueue(component, this, 'c.getContactAffiliations', {contactId: conId}) //{ vendorId: component.get("v.vendorId") }
        .then($A.getCallback(affilliations => {
            console.log('the ret value: ', affilliations);
            this.formatRecords(component, affilliations);
            console.log('after format records, the dcata:', JSON.stringify(component.get('v.data')));
        })).catch(errors => console.log("accDatatable::getContactAffiliations: ", errors)));
},

formatRecords: function(component, affiliations){
    let rows = [];
    for(const aff of affiliations){
        let this_row = {
            'Id': aff.Id,
            'npe5__Organization___Name' : aff.npe5__Organization__r.Name,
            'isPrimary': aff.npe5__Primary__c
        };
        rows.push(this_row);
        console.log('the aff: ', JSON.stringify(aff), ' and the row: ', JSON.stringify(this_row));
    }
    component.set('v.data', rows);
    console.log('the rows for the datatable: ', JSON.stringify(rows));
}
})

The Apex controller simply queries the affiliations and returns the values. The debug for the end is:

after format records, the dcata: [{"Id":"a0H0C000000m4zJUAQ","npe5__Organization___Name":"Addis Ababa","isPrimary":true},{"Id":"a0H0C000000m4zOUAQ","npe5__Organization___Name":"Santo Domingo","isPrimary":false}]

At one point if put in an just to be sure that the data was available to the component, and that displayed as expected.

Does anyone have any idea why nothing would show?

Answer 1

Two small discrepancies that I see when compared to the lightning:datatable examples:

1. In the lightning:datatable attribute keyField, you have a lowercase id whereas the data you're producing had and uppercase Id first letter.

2. In the aura:attribute name="data", the linked example has the type="Object" rather than your code which shows it as a List type.

3. columns is supposed to be a List type. You have it set right now as Object