You need to sign in to do that
Don't have an account?
Gregory Ernest
Lightning Datatable not showing data
In my project, I have a Datatable which is successfully being displayed on the page, just with no data. The console log appears to show all of the records and correct data being pulled in, just not displayed.
If anyone can help, should I post my .js, .html, and .cls files here?
If anyone can help, should I post my .js, .html, and .cls files here?
Can you post the code you are using and also can you try checking with a console.log statement the list of records you are receiving and try checking in the class as well with a system.debug statement the records that are sent.
Looking forward for your response.
Regards,
Anutej
public with sharing class courseSelection {
@AuraEnabled(cacheable=true)
public static Contact getStudentInfo(id studentId){
Contact filResReq =
[SELECT Id,
Name,
Primary_Academic_Program_Name__c
FROM Contact
WHERE id =: studentId
LIMIT 1
];
return filResReq;
}
@AuraEnabled(cacheable=true)
public static Contact getInfoList (Id requestId) {
return [SELECT
Name,
Primary_Academic_Program_Name__c
FROM Contact where Id = :requestId
order by createddate limit 1];
}
@AuraEnabled(cacheable=true)
List<hed__Course_Offering__c> getMatchingOfferings = [
SELECT
//Id,
hed__Course__c,
hed__Course__r.Name,
hed__Term__r.Name,
hed__Faculty__r.Name,
hed__Start_Date__c,
Students_Enrolled__c,
hed__Capacity__c
FROM hed__Course_Offering__c
WHERE hed__Term__c =:termId
];
return getMatchingOfferings;
}
}
.js file
import { LightningElement, api, wire, track } from 'lwc';
import CONTACT from '@salesforce/schema/Contact';
import NAME from '@salesforce/schema/Contact.NAME';
import PRI_ACA_PROG from '@salesforce/schema/Contact.Primary_Academic_Program__c';
import getStudentInfo from '@salesforce/apex/courseSelection.getStudentInfo';
import getMatchingOfferings from '@salesforce/apex/courseSelection.getMatchingOfferings';
const columns = [
//{ label: 'Id', fieldName: 'Id',
// sortable: 'true', hideDefaultActions: 'true' },
{ label: 'Course', fieldName: 'CourseNameField',
type: 'text', sortable: 'true', hideDefaultActions: 'true' },
{ label: 'Term', fieldName: 'TermNameField',
type: 'text', sortable: 'true', hideDefaultActions: 'true' },
{ label: 'Primary Faculty', fieldName: 'FacultyNameField',
type: 'name', sortable: 'true', hideDefaultActions: 'true' },
{ label: 'Start Date', fieldName: 'StartDateField',
type: 'date', sortable: 'true', hideDefaultActions: 'true' },
{ label: 'Students Enrolled', fieldName: 'StudentsEnrolledField',
type: 'number', sortable: 'true', hideDefaultActions: 'true' },
{ label: 'Capacity', fieldName: 'CapacityField',
type: 'number', sortable: 'true', hideDefaultActions: 'true' }
];
export default class BasicDatatable extends LightningElement {
@api objectApiName = CONTACT;
@api studentField = NAME;
@api requestName = [NAME];
@api fields = [PRI_ACA_PROG];
@api showModal;
@wire (getStudentInfo, {
studentId: '0031H00002BpjF6QAJ'
}) studentInfo;
get displayerror (){
return JSON.stringify(this.studentInfo.error);
}
@api recordId;
@track columns = columns;
@track sortedBy = 'Name';
@track sortDirection = 'asc';
@track currentData=[];
@wire (getMatchingOfferings, {termId: 'a0C1H00001M57z4UAB'}) offeringsListController(result) { //, {termId: 'a0C1H00001M57z4UAB'}
//this.matchingOfferingsResults = result;
if(result.data != null){
result.data.forEach((row)=>{
let rowData={};
rowData.Id = row.Id;
rowData.hed__Course__c = row.hed__Course__c;
if (row.hed__Course__r != null) { rowData.CourseNameField=row.hed__Course__r.Name; }
else { rowData.CourseNameField= 'TBD'; }
if (row.hed__Term__r != null) { rowData.TermNameField=row.hed__Term__r.Name; }
else { rowData.TermNameField= 'TBD'; }
if (row.hed__Primary_Faculty__r != null) { rowData.FacultyNameField=row.hed__Primary_Faculty__r.Name; }
else { rowData.FacultyNameField= 'TBD'; }
rowData.StartDateField=rowData.hed__Start_Date__c;
rowData.StudentsEnrolledField=rowData.Students_Enrolled__c;
rowData.CapacityField=rowData.hed__Capacity__c;
this.currentData.push(rowData);
});
//this.result.data=currentData;
console.log(JSON.stringify(this.currentData));
if(result.error)
console.log(result.error);
}
}
get tabledata(){
return JSON.stringify(this.result);
}
}
.html
<template>
<div class="slds-grid slds-gutters">
<!--___________Request in upper left_______________________________________-->
<div class="slds-col slds-size_1-of-2">
<lightning-card icon-name="standard:user">
<h1 class="contacttitle" slot="title">
Student Information:</h1>
<div class="contactdata slds-m-left_xx-large">
<template if:true={studentInfo.data}>
<p><b>Student Name: </b>
{studentInfo.data.Name}</p>
<p><b>Primary Academic Program: </b>
{studentInfo.data.Primary_Academic_Program_Name__c}</p>
<p><b>Desired Term: </b>
Fall 2017</p>
</template>
</div>
<c-display-course-connections-for-contact
get-student=true
get-faculty=false
contact-id=0031H00002BpjF6QAJ>
</c-display-course-connections-for-contact>
<p slot="footer">
<b>Please select from the Courses below.</b>
</p>
</lightning-card>
</div>
<!--________List in upper right__________________________________-->
<div class="slds-col slds-size_1-of-2">
<lightning-card icon-name="standard:timesheet_entry">
<h2 class="contacttitle" slot="title">
Selected Courses:</h2>
</lightning-card>
</div>
</div>
<!--_________list in lower section___________________________-->
<div class="slds-grid slds-m-top_medium slds-m-bottom_small">
<div class="slds-col slds-size_1-of-1">
<lightning-card icon-name="standard:record_update">
<h3 class="contacttitle" slot="title">Available Courses:</h3>
<!-- <template if:false={result.data}>
<div class="alertfont slds-text-align--center slds-m-top_small">
<b><i>
There are no matching Course Offerings for this student.
<br>
Please review your details.
</i></b>
</div>
</template> -->
<template if:true={currentData}>
<div style="height: 300px;">
<lightning-datatable
key-field="Id"
data={currentData}
columns={columns}
onheaderaction={handleHeaderAction}
onsort={updateColumnSorting}
sorted-by={sortedBy}
sorted-direction={sortDirection}
onrowselection={tableUpdated}
>
</lightning-datatable>
</div>
</template>
</lightning-card>
</div>
</div>
</template>
Have you able to solve the issue, cause I am also facing the same.
Data is stored in the list but lightning datatable is not showing data.