AsteroidsList.cmp

<aura:component controller="AsteroidsController" implements="forceCommunity:availableForAllPageTypes">
   <ltng:require styles="/resource/SLDS201/assets/styles/salesforce-lightning-design-system.css" />
   <aura:attribute name="asteroids" type="List" />
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   <!-- Use the Apex model and controller to fetch server side data -->
   <div class="slds-page-header" role="banner">
     <div class="slds-media slds-media--center">
           <div class="slds-media__figure">              
           </div>
           <div class="slds-media__body">
               <p class="slds-page-header__title slds-truncate slds-align-middle" title="Asteroid Detection System">Asteroid Detection System</p>
               <p class="slds-text-body--small page-header__info">Track which asteroids are up to no good near the Earth's vicinity</p>
           </div>
       </div>
    </div> 
    
    
    
    
   <center><img src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/11/28/blastr_asteroid_354.jpg.CROP.cq5dam_web_1280_1280_jpeg.jpg" 
                align="middle" alt="Asteroid zooming towards Earth"/></center><br/>
    <h4 class="slds-section-title--divider" title="Choose date range">Choose a date range (A limit of a 7 day range is enforced by the API)</h4>
    <div class="container">
        <form class="slds-form">
            
            <div class="slds-form-element">
                
                
                
                <div class="slds-grid">  
                   
                        
                        <ui:inputDate aura:id="fromDate" label="From Date"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.fromDate}"
                                      displayDatePicker="true" />       
                
                        <ui:inputDate aura:id="toDate" label="To Date"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.toDate}"
                                      displayDatePicker="true" />
                        
                    <ui:button label="Go" press="c.doInit"/>
                </div>
            </div>
            
        </form>    
    </div>
    
    
    
    
   <table class="slds-table slds-table--bordered slds-table--striped">
      <thead>
        <tr>          
           <th scope="col"><span class="slds-truncate">Asteroid Name</span></th>
           <th scope="col"><span class="slds-truncate">Magnitude</span></th>
           <th scope="col"><span class="slds-truncate">Diameter(meters)</span></th>
           <th scope="col"><span class="slds-truncate">Is it Dangerous?</span></th>
           <th scope="col"><span class="slds-truncate">Closest Approach Date</span></th>
           <th scope="col"><span class="slds-truncate">Velocity(kms)</span></th>
           <th scope="col"><span class="slds-truncate">Will miss Earth by(kms)</span></th> 
           <th scope="col"><span class="slds-truncate">More Details</span></th> 
        </tr>
      </thead>
       <tbody>
           <aura:iteration items="{!v.asteroids}" var="astro">            
               <tr>
                   <td>{!astro.str_Asteroid_Name}</td>
                   <td>{!astro.str_Magnitude}</td>
                   <td>{!astro.str_Estimated_Diameter_Max_Kms}</td>  
                   <td>{!astro.isAsteroidDangerous}</td>  
                   <td>{!astro.str_closest_Approach_Earth_Date}</td>  
                   <td>{!astro.str_velocity_per_sec_kms}</td>  
                   <td>{!astro.str_misses_Earth_by_kms}</td>  
                   
                   <td>
                    <a href="{!astro.str_NASA_URL}" target="_blank">   <c:button class="slds-button slds-button--neutral"
                                 label="Details"
                                 svgXlinkHref="/resource/SLDS201/assets/icons/standard-sprite/svg/symbols.svg#link"
                                 svgClass="slds-icon slds-icon-text-default"
                                 onclick="{!c.showDetails}"
                                 data="{!astro.str_NASA_URL}"
                                 />
                        
                        </a>
                   </td>
               </tr>
           </aura:iteration>
       </tbody>
   </table>
</aura:component>