How to Build a Custom Object LWC Data Table in Salesforce

Updated by

In Salesforce, we can create a data table in Lightning Web Components using the standard lightning-datatable component. However, to create a custom table for a custom object, we need to define the columns and types according to the custom fields within the custom object.

In this Salesforce tutorial, we will learn how to build a custom LWC data table for a custom object in Salesforce.

Custom Object LWC Datatable in Salesforce

We can follow the approaches to create a custom object LWC data table in Salesforce.

  • Custom object LWC data table with client-side rendering
  • Custom object LWC data table with server-side rendering

In the examples below, we will cover both methods of creating a custom object LWC data table in Salesforce.

Create Custom Object LWC Datatable With Client Side Rendering

To create a custom LWC data table via client-side rendering, we fetch the object data using an Apex class. Therefore, we will also define a controller class to fetch the custom object record.

Follow the steps below to create an LWC data table for a custom object via client-side rendering.

In the example below, I will use the custom object from my org, Survey_Responses__c.

  1. First, we will create a controller class to fetch records from the custom object Survey Responses dynamically.
public with sharing class SurveyController {
    @AuraEnabled(cacheable=true)
    public static List<Survey_Response__c> getSurveyResponses() {
        return [SELECT Id, Name, Comment__c, CurrencyIsoCode, 
                Email__c, Survey_submitted__c
                FROM Survey_Response__c
                WITH SECURITY_ENFORCED
                ORDER BY CreatedDate DESC];
    }
}

In this controller class, I have retrieved the custom and standard fields of the custom object; the values annotated with “__c” are the custom fields. We can refer to the object API name from the Fields and Relationships setup.

2. After this, create the LWC component and enter the code below in the HTML file.

We have defined the table heading in the card title and used the lightning-datatable attribute to render the data in a tabular format.

    <template>
    <lightning-card title="Survey Responses" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={surveyData}
                columns={columns}
                hide-checkbox-column="true">
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

    The data attribute maps and renders the returned data, and the columns attribute renders the column in a data table that we will define in the JS file’s columns array.

    3. Now, enter the code below in the JS file to define the columns and the logic to handle errors caused by invalid data.

    In the column array, define the label, field name, and field type. Ensure that you enter the correct data type; for example, if a field is a checkbox field, its