SimpleDatatable_cmp.html

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <!-- table records are stored on the data attribute -->
    <aura:attribute name="data" type="List" access="global" />
    <!-- init method loads the data attribute values -->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <div class="slds-m-around_xx-large">
        <h1 class="slds-text-heading--medium">Simple Contacts</h1>
        <table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal slds-p-horizontal_small" role="grid">
            <thead>
                <tr class="slds-text-title_caps">
                    <th class="slds-cell-shrink" scope="col">  
                        <!-- No title only action , for selection checkbox header -->
                    </th>
                    <th class="slds-cell-shrink" scope="col">
                        <div class="slds-truncate" title="Name">Name</div>
                    </th>
                    <th class="slds-cell-shrink" scope="col">
                        <div class="slds-truncate" title="City">City</div>
                    </th>
                    <th class="slds-cell-shrink" scope="col">
                        <div class="slds-truncate" title="Country">Country</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- Iterates the collection of records stored in the data attribute-->
                <aura:iteration items="{!v.data}" var="row">
                    <tr class="slds-hint-parent">
                        <td data-label="" scope="row">  
                            <!-- checkbox selection invokes the onCheckboxChange controller method-->
                            <ui:inputCheckbox aura:id="rowSelectionCheckboxId" value="false" text="{!row.id}" change="{!c.onCheckboxChange}"/>                  
                        </td>
                        <td data-label="Name">  
                            <div class="slds-truncate" title="{!row.name}">{!row.name}</div>
                        </td>
                        <td data-label="City">  
                            <div class="slds-truncate" title="{!row.city}">{!row.city}</div>
                        </td>
                        <td data-label="Country">  
                            <div class="slds-truncate" title="{!row.country}">{!row.country}</div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>