function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Athira VenugopalAthira Venugopal 

Lightning:datatable doesn't displays data for custom object

I have used lightning data table for my custom object, no data got displayed in the table
html
<template>
    <h2> Project Datatable</h2>
    <template if:true={accList}>
        <lightning-datatable data={accList} columns={columns} key-field="Id">
        </lightning-datatable>
    </template>
    <template if:true={error}>
        {error}
    </template>
</template>

JS
import { LightningElement ,api, wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/PriceFetch.getAccountList';
export default class PriceScreen extends LightningElement {
    @track columns = [{
           api: 'BuildingNo__c',
            label: 'BuildingNo',
            fieldName: 'BuildingNo',
            type: 'text',
            sortable: true
        },
        {   api:'Location__c',
            label: 'Location',
            fieldName: 'Location',
            type: 'text',
            sortable: true
        }
    
    ];
 
    @track error;
    @track accList ;
    @wire(getAccountList)
    wiredAccounts({
        error,
        data
    }) {
        if (data) {
            this.accList = data;
        } else if (error) {
            this.error = error;
        }
    }
}
PriceFetch.cls (Apex class)
public with sharing class PriceFetch {
    @AuraEnabled(cacheable=true)
    public static List<Project__c> getAccountList() {
        return [SELECT Id,BuildingNo__c, Location__c
            FROM Project__c];
    }
}
 An empty table is the output, Please helpme
ANUTEJANUTEJ (Salesforce Developers) 
Hi Athira,

I have tried the below implementation for a custom object in my org named student with name class and roll no as the fields and I was able to get the records can you try with the below code once and in case if this helps can you please choose this as best answer so that it can be used by others in the future.
  
Apex Class

public with sharing class dataTableLWC {
    @AuraEnabled(cacheable = true)
public static List<Student__c> fetchAccounts(){
       return [SELECT Id,Class__c,Roll_No__c,Name FROM Student__c LIMIT 100];
    }
}
LWC html code

<template>
 
    <!--lightning datatable-->
     <lightning-datatable 
           key-field="id"
           data={parameters.data}
           onrowaction={handleRowAction}
           row-number-offset={rowOffset}
           hide-checkbox-column="true"
           columns={columns}></lightning-datatable>
              
       <!-- Detail view modal start -->
     <template if:true={bShowModal}>
      <section role="dialog" tabindex="-1"
               aria-labelledby="modal-heading-01"
               aria-modal="true"
               aria-describedby="modal-content-id-1"
              class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
            <!-- modal header start -->
            <header class="slds-modal__header">
               <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                  <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
               </button>
               <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
            </header>
            <!-- modal body start -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
              <dl class="slds-list_horizontal slds-wrap">
                  <dt class="slds-item_label slds-truncate" title="Id">id:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.id}</dd>
                  <dt class="slds-item_label slds-truncate" title="Name">Name :</dt>
                  <dd class="slds-item_detail slds-truncate">{record.Name}</dd>
                  <dt class="slds-item_label slds-truncate" title="Class">Class:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.class__c}</dd>
                  <dt class="slds-item_label slds-truncate" title="Roll No">Roll No :</dt>
                  <dd class="slds-item_detail slds-truncate">{record.Roll_no__c}</dd>
                  <dt class="slds-item_label slds-truncate" title="Website">Website :</dt>
                  
              </dl>
            </div>
            <!-- modal footer start-->
            <footer class="slds-modal__footer">
                 <lightning-button variant="brand"
                 label="Close"
                 title="Close"
                 onclick={closeModal}
                 ></lightning-button>
            </footer>
         </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
   </template>
   <!-- Detail view modal end -->
   
  </template>
  
LWC JS code

// import module elements
import {
    LightningElement,
    wire,
    track
} from 'lwc';
 
//import method from the Apex Class
import fetchAccounts from '@salesforce/apex/dataTableLWC.fetchAccounts';
 
// Declaring the columns in the datatable
const columns = [{
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        //SELECT Id,Class__c,Roll_No__c,Name FROM Student__c LIMIT 100
        label: 'Id',
        fieldName: 'id'
    },
    {
        //SELECT Id,Class__c,Roll_No__c,Name FROM Student__c LIMIT 100
        label: 'Name',
        fieldName: 'Name'
    },
    {
        label: 'Roll No',
        fieldName: 'Roll_No__c'
    },
    {
        label: 'Class__c',
        fieldName: 'Class__c'
    }
];
 
// declare class to expose the component
export default class DataTableComponent extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track bShowModal = false;
    @wire(fetchAccounts) parameters;
 
    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }
 
    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }
}
  
LWC XML File

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Regards,
Anutej
Navdeep Singh 95Navdeep Singh 95
Thanks, ANUTEJ  your code is working fine.