Render and Preview the Contact List

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 10:45 minute mark, in case you want to rewind and watch the beginning of the step again.)

Render the Contact List

1. Add the following code on a new line after the comment <!-- Contact list goes here -->:
   <lightning:datatable data="{! v.Contacts }" columns="{! v.Columns }" keyField="Id" hideCheckboxColumn="true"/>
   A lightning:datatable is another Base Lightning Component that will display the list of contacts.
   
2. Select File | Save.
   
3. Click the MyContactListController.js tab.
   
4. Update the myAction function with the following code on a new line above the var action line:
   

   component.set("v.Columns", [
       {label:"First Name", fieldName:"FirstName", type:"text"},
       {label:"Last Name", fieldName:"LastName", type:"text"},
       {label:"Phone", fieldName:"Phone", type:"phone"}
   ]);

   The datatable component uses the values stored in the Columns attribute to determine the number of columns to display.
   
5. Select File | Save.
   
6. Refresh the Account page in your org.
   

Summary

Congratulations! You have created your first Lightning component. Now any admin can add your component to their org to display contacts for an account. Other developers can also use your component instead of writing their own code.