Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment