1

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?

0

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.

  • Oh wow, I'll have to try that in the morning. Hopefully that is the reason and everything works. I'm fine changing the type to number instead of text. Thank you! – Tyler Dahle Jul 25 '18 at 0:10
  • This fixed it. I actually do want to keep it as 'text' instead of 'number'. The table right aligns numbers while keeping table headers left aligned.... So want to keep it all left aligned, which it does with 'text' type. – Tyler Dahle Jul 25 '18 at 14:17
  • Sure, whichever works for you. – Jayant Das Jul 25 '18 at 14:18

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.