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>
