1

I'm conditionally toggling sections in a Lightning Component that each contain a lightning:datatable, and I'm stuck in a bind of choosing either the table resizing when the section is first expanded (using style="display:none") or having a slight delay when the section is expanded and collapsed (using aura:if). I've tried some other ways using css to conditionally display (specifically ones that still allow machine reading), but I can't get anything to render the table fully in the section before expanding. I'd like to not use aura:if with the slight delay since one of the huge improvements of Lightning/Javascript over Visualforce is the immediacy of client-side actions.

Any thoughts on how to maintain the immediacy of css with correct table sizing?

display:none code (table resizes on initial expand):

<div style="{!v.expanded ? '' : 'display:none;'}">
    <lightning:datatable/>
</div>

aura:if code (slight delay when expand/collapse):

<aura:if isTrue="{!v.expanded}">
    <lightning:datatable/>
</aura:if>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.