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.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities