Start tracking your progress
Trailhead Home
Trailhead Home

Render and Preview the Contact List

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.


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.