<aura:component controller="CSVExportController">          
    
    <aura:handler name="init" value="{!this}" action="{!c.loadOpps}"/>  
    <aura:attribute name="oppList" type="opportunity[]" description="list variable to hold the opportunities returned"/> 
    <!-- sample table component structure from https://www.lightningdesignsystem.com/components/data-tables/-->
    <div class="slds-m-around--xx-large">   
        <button class="slds-button slds-button--brand" onclick="{!c.downloadCSVFile}">Download As CSV</button> <br/><br/>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset">
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Close Date">Close Date</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Stage">Stage</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Amount">Amount</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Industry">Industry</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Owner">Owner</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.oppList}" var="opp">  <!-- iterate over rows returned -->
                    <tr class="slds-hint-parent">
                        <th data-label="Opportunity Name" scope="row">
                            <div class="slds-truncate">
                                <a href="javascript:void(0);" tabindex="-1">{!opp.Name}</a>
                            </div>
                        </th>
                        <td data-label="Account Name">
                            <div class="slds-truncate">{!opp.Account.Name}</div>
                        </td>
                        <td data-label="Close Date">
                            <div class="slds-truncate">{!opp.CloseDate}</div>
                        </td>
                        <td data-label="Stage">
                            <div class="slds-truncate">{!opp.StageName}</div>
                        </td>
                        <td data-label="Amount">
                            <div class="slds-truncate">${!opp.Amount}</div>
                        </td>
                        <td data-label="Industry">
                            <div class="slds-truncate">{!opp.Account.Industry}</div>
                        </td>
                        <td data-label="Owner">
                            <div class="slds-truncate">{!opp.Owner.Name}</div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>