Salesforce LWC Lightning Data Table Not Displaying Data

In Salesforce, while creating an LWC Lightning data table, you might encounter an issue with not getting the data in the LWC data table. There are many reasons that restrict the data from displaying record values in the data table.

In this Salesforce tutorial, we will learn to resolve the issue of Salesforce LWC Lightning data table not displaying the data.

Table of Contents

Why Is The LWC Data Table Not Showing The Data?

This issue of not getting the data displayed in the LWC data table or any column in the table generally occurs when we fetch the data dynamically through an Apex class or an API callout, when the data table attributes are not correctly mapped.

The lightning-datatable uses two main attributes, ‘data‘ and ‘columns‘. If either or both of these are not mapped properly and not wired using the @wire decorator, then the LWC data table won’t show any data.

Salesforce LWC data table not showing data

The other reasons may relate to invalid column field names, and an issue with case sensitivity is also a reason that the correct value does not return data in the table. Unlike Apex, the LWC JavaScript is case sensitive.

Fix The LWC Data Table Not Showing The Data

In the steps below, we will see the code verification of all the files of the LWC component that are component.js, component.html, and component.js-meta.xml.

Check the HTML file of the LWC component and check whether the lightning-datatable component has ‘key-field‘, ‘data‘, and ‘columns‘ defined and mapped correctly.

The key field is generally ID, and the data should be mapped to the table data that you defined in the JS file.

<template>
  <lightning-card title="LWC Datatable">
    <lightning-datatable
      key-field="Id"
      data={tableData}
      columns={tableColumns}
    ></lightning-datatable>
  </lightning-card>
</template>

In the JS file of the LWC component, check the columns array and ensure that the fieldName is correct. The field name here is the API name of the object field that is also included in the controller class to fetch fields.

The field names are case sensitive, so check the values with case sensitivity.

For example, if the field name from Apex is FirstName and you have entered Name, it won’t fetch data, and entering firstname instead of FirstName won’t display data for that label column due to case sensitivity.

const columns = [
  { label: "Name", fieldName: "Name", type: "text" },
  { label: "Phone", fieldName: "Phone", type: "phone" },
  { label: "Email", fieldName: "Email", type: "email" }
];

If you are fetching the table data dynamically via the Apex class, check the SOQL query field values.

The field names can be checked from Object Manager > Object > Fields and Relationships, and then see the API name of the field. Enter the same API name for the field in the controller class.

public with sharing class ContactController {
  @AuraEnabled(cacheable=true)
  public static List<Contact> getContacts() {
    return [SELECT Id, Name, Phone, Email FROM Contact LIMIT 10];
  }
}

To connect LWC components to Salesforce data sources, such as Apex classes, if you are using the @wire decorator instead of an imperative call, ensure the data is processed correctly.

For this, we can add a debug log to confirm that the @wire property is updating tableData.

import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContacts';

export default class LwcDatatable extends LightningElement {
  @track tableData = [];
  @track tableColumns = [
    { label: "Name", fieldName: "Name", type: "text" },
    { label: "Phone", fieldName: "Phone", type: "phone" },
    { label: "Email", fieldName: "Email", type: "email" }
  ];

  @wire(getContactList)
  wiredContacts({ error, data }) {
    if (data) {
      this.tableData = data;
      console.log('Wired Data:', JSON.stringify(this.tableData));
    } else if (error) {
      console.error('Wired Error:', error);
    }
  }
}

With this debug log, we can confirm that the data is wired correctly and is updating accordingly.

At last, go to the meta.xml file and enter the code below to make the component visible to the lightning pages. Without this setting, the component won’t appear in the Lightning app builder’s custom components.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

After making the above changes and fixes, deploy the LWC component to the Lightning page.

Now, the data table will display all the field column data from the columns array of the lightning-datatable.

LWC data table column is not displaying data

This way, we can fix the bug of the empty data column and display data in the LWC Lightning Data Table in Salesforce by going through the above fixes.

Conclusion

In this Salesforce tutorial, we learned how to fix the issue of the LWC data table not displaying data. In the above steps, we discussed various checks in the LWC component that can ensure that the data will be displayed on the LWC data table.

Following the code checks discussed above, you can resolve this issue efficiently and display the fetched data in the columns of the LWC data table.

Salesforce LWC Lightning Data Table Not Displaying Data

Why Is The LWC Data Table Not Showing The Data?

Fix The LWC Data Table Not Showing The Data

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK