Need help in table formatting LEX

Question

I am using a lightning component which displays data as received from associated object record.

Below code:

<aura:component controller="ProductDetailController" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <aura:attribute name="product" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}" />
    <aura:handler event="aura:waiting" action="{!c.showSpinner}" />
    <aura:attribute name="displayBlock" type="Boolean"/>
    <div class = "slds-clearfix slds-card">
        <div class="slds-page-header">
            <h2 class="slds-page-header__title slds-truncate slds-align-middle">Product Details</h2>
        </div>
            <table class="slds slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-scrollable_y">
                    <thead>
                        <tr class="slds-text-heading--label">
                            <th scope="col" style="width:200px;font-weight: bold;"><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="Name">Name</div></th>
                            <th scope="col" style="width:200px;font-weight: bold;"><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="Type">Quantity Type</div></th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Use the Apex model and controller to fetch server side data -->
                        <aura:iteration items="{!v.product}" var="product">
                            <tr>
                                <td><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="{!product.Name}">{!product.Name}</div></td>
                                <td><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="{!product.Sales_purpose__c}">{!product.Quantity}</div></td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
    </div>
</aura:component>

If i specify height then even if there were two records in the table it shows the empty space and if i dont specify height then the scroolbar doesnt work here.

what i want to do is if it reaches the max height of 300px the scroll bar should show and else based on the row it should show the data , there shouldn be empty blank space.

If anyone can help me here....thanks

Answer 1

I figure out a solution to this , I am dynamically setting the height from the controller based on the row count style="{!'height:' + v.dynamicheight+'px'}"