Create LWC Table From Records – With Example!

We worked with tables in my last post and I wanted to expand on that concept in the future. In my previous post, I explained how to sort a table. The table in that example was hard-coded, which doesn’t have much practical use in the world of IT. In this post, I will show you how to create an LWC table from records. This will require an Apex class that makes a call to the database, a Javascript method to call that class and process the response, and a little HTML to wrap it all up!

Create A Record Of The Type You Want In Your Table

First, let’s pick the object we want to make a table of. In the previous post, I made a table of people and displayed their ages, names, occupations, and favorite foods. I will do the same in this example, except I will create a custom object People and create records for each person. A handy tip for creating objects is to insert a single record using the Developer Console Execute Anonymous Apex window. Run the below code after you have created an object:

[Your Object] new1 = new [Your Object]();
insert new1;

This will create one record of your object. Depending on if it has any required fields, you may need to initially populate a few of the fields by passing them in as a parameters:

[Your Object] new1 = new [Your Object](Required_Field__c = RequiredData);
insert new1;

Something like that would do the trick. Once you have a single record, query for it and get the object Id:

Select Id FROM [Your Object]

This will return some 15/18 digit number. Take only the first 3 characters and paste them after the .com/ in your org’s URL to go to the List View for that page. From there, it is much easier to visualize and manage the data:

List View For Records

There’s my first Person! The URL changed because I created a List View to see the record, but putting ‘a00’ after the .com/ in my org brought me to this page.

Create Apex Methods To Get Data

Once my records are created, I am going to create an Apex Class that will call them and return them as a List. You could use any iterable object to do this, but List is going to make the most sense in this example. Just like with LWC components, you can use Visual Studio’s Command Palette to create an Apex class. Follow the instructions in the linked post, but use the command ‘SFDX: Create Apex Class’ instead of creating an LWC. Here is my class to get the records I just created:

public with sharing class GetPeople {

    @AuraEnabled
    public static List<People__c> GetPeople() {
        List<People__c> peopleRecords = [Select Id, Name__c, Age__c, Occupation__c, Favorite_Food__c FROM People__c];
        return peopleRecords;
    }

}

This is pretty simple! Notice the @AuraEnabled tag above the method. This allows our LWC component to call this method.

Create LWC Component

In the Javascript file for our sortedTable component, let’s call this method instead of hard-coding the data. First, import the Apex method by putting this at the top of your JS file:

import getPeopleApex from "@salesforce/apex/GetPeople.GetPeople";
(in your specific example)
import [your function name] from "@salesforce/apex/[Apex Class].[Apex Method]";

Then, create a constructor in your JS and call the method you imported. Assign the result of the call to the variable People:

   @track People;

    constructor(){
        super();
        getPeopleApex().then(result => {this.People = result})
    }

Notice the .then syntax for this method. This is a concept known as a Promise in Javascript. What it means is the result is only available after the call to the Apex method resolves. So you do not have to manage when that is, wrapping up your assignment in the paranthesis after .then tells the Javascript to wait until that call is finished, then do something with the result. result => is defining something to do with the result returned, which is why the actual assignment, this.People = result is in curly brackets. And that’s it!

Let’s change the HTML file to look at these new fields:

                <template for:each={People} for:item="person">
                    <tr key={person.Id}>                
                        <td key={person.Id}>                                
                            {person.Name__c}
                        </td>
                        <td key={person.Id}>
                            {person.Age__c}
                        </td>
                        <td key={person.Id}>
                            {person.Occupation__c}
                        </td>
                        <td key={person.Id}>
                            {person.Favorite_Food__c}
                        </td> 
                    </tr>                                                                     
                </template>

And our table is now based on records:

Lightning Web Component Table Made From Salesforce Records

Now that we covered how to create an LWC table from records, why not try refining our table?

Leave a Reply

%d bloggers like this: