[SalesForce] lightning:datatable won’t populate with data inside aura:iteration

I have an iteration to set up datatables in slds accordions in my lightning component:

<ul class="slds-accordion">
    <aura:iteration items="{!v.definitionObjects}" var="objStats">
        <li class="slds-accordion__list-item">
            <section id="{!objStats.objName+'-stats-section'}" class="slds-accordion__section">
                <div id="{!objStats.objName+'-stats'}" class="slds-accordion__summary" onclick="{!c.toggleAccordion}">
                    <h3 class="slds-text-heading_small slds-accordion__summary-heading">
                        <lightning:button label="{!objStats.objLabel + ' Definition Stats'}" iconName="utility:switch" iconPosition="left" ariaExpanded="true" class="slds-button slds-button_reset slds-accordion__summary-action" />
                    </h3>
                </div>
                <div aria-hidden="true" class="slds-accordion__content" id="{!objStats.objName+'-definition-stats-content'}">
                    <lightning:datatable keyField="objName" data="{!objStats.data}" columns="{!objStats.columns}" hideCheckboxColumn="true" />
                </div>
            </section>
        </li>
    </aura:iteration>
</ul>

And my definitionObjects data looks like this when it is set to definitionObjects:

[{
    objName: SomeObject,
    objLabel: Some Object,
    columns: [
        {label: 'Total Definitions', fieldName: 'totalDefinitions', type: 'text'},
        {label: 'Total Steps', fieldName: 'totalSteps', type: 'text'}
    ],
    data: [
        {totalDefinitions: 1, totalSteps: 2}
    ]
},
{
    objName: SomeObject2,
    objLabel: Some Object2,
    columns: [
        {label: 'Total Definitions', fieldName: 'totalDefinitions', type: 'text'},
        {label: 'Total Steps', fieldName: 'totalSteps', type: 'text'}
    ],
    data: [
        {totalDefinitions: 3, totalSteps: 5}
    ]
}]

Then I do a component.set('v.definitionObjects', objArray) (where objArray is that array of objects).

But all I get is an empty table…
enter image description here

If I add a <span>{!objStats.data[0].totalDefinitions}<span> in the accordion content, it will correctly display the right number, but nothing gets added to my datatable.

I cannot for the life of me figure out what is wrong and why my datatables stay empty. What am I missing here? Is this something to do with the iteration?

Best Answer

Your issue is on these lines, where you are populating the data:

{totalDefinitions: 1, totalSteps: 2}
{totalDefinitions: 3, totalSteps: 5}

And the reason is, because you have declared these values to be a text, and that you are populating these as numbers. 

columns: [
        {label: 'Total Definitions', fieldName: 'totalDefinitions', type: 'text'},
        {label: 'Total Steps', fieldName: 'totalSteps', type: 'text'}
    ],

So considering these still need to be declared as text, updating the data population as below will work (or you can change the data type if you want to keep the data populated as-is):

{totalDefinitions: "1", totalSteps: "2"}
{totalDefinitions: "3", totalSteps: "5"}

I tried this out with a very limited version of your code, and it works perfectly fine.

Related Topic