0

lightning-datatable has a simple data display task, but it is not working as expected. here is my html file

 <template>
    <lightning-card title="Contact List"> 
        <lightning-datatable key-field="Id" data={data} columns={columns}>
        </lightning-datatable> 
    </lightning-card> 
</template>

and the javascript

import { LightningElement, wire, track, api } from 'lwc';
import ACCOUNTRECORDID from '@salesforce/messageChannel/accountRecordId__c';
import { subscribe, unsubscribe, MessageContext } from 'lightning/messageService'; 
import getContacts from '@salesforce/apex/UserService.getContacts';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

const columns = [
    { label: 'First Name', fieldName: FIRSTNAME_FIELD },
    { label: 'Last Name', fieldName: LASTNAME_FIELD },
    { label: 'Phone', fieldName: PHONE_FIELD, type: 'phone' },
    { label: 'Email', fieldName: EMAIL_FIELD, type: 'email' },

];

export default class ContactAccountListSubscriber extends LightningElement {

    subscription = null;
    columns = columns;
    @track data = [];

    @wire(MessageContext)
    messageContext;


    connectedCallback() {
        this.subscribeToMessageChannel();
    }
    handleMessage(message) {

        let accountNameValue = message.accountName;
        getContacts({ accountName: accountNameValue })
            .then(result => {
                this.data = result;
            })
            .catch(error => {
                this.error = true;
            });
    }

    subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(this.messageContext, ACCOUNTRECORDID, (message) => this.handleMessage(message))
        } else {
            console.log("using known subscription")
        }
    } 
}

when I print the same with in template content from data will be rendered but not in lightning:datatable. Any help is apprecaited.

<template for:each={data} for:item="contact">
                <p key={contact.Id}>{contact.FirstName}</p>
                <p key={contact.Id}>{contact.LastName}</p>
                <p key={contact.Id}>{contact.Email}</p>
                <p key={contact.Id}>{contact.Phone}</p>
            </template>
3
  • 1
    Try FIRSTNAME_FIELD.fieldApiName instead of just FIRSTNAME_FIELD in the column definition. Oct 4 '20 at 12:38
  • @rahulgawale You are a rock star! it worked mate, Thank you very much.
    – jks
    Oct 4 '20 at 13:54
  • Lol, I was not pretty sure about that, I am going to turn this into an answer. Oct 4 '20 at 14:27
0

The imported field schemas are objects and not strings, but the Lightning-datatable expects the field names to be strings. Unlike the record form, it does not accept both string and schema objects.

Example The import import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName'; will result in an object like below.

{
    fieldApiName: 'FirstName',
    ...
}

So you are passing the object FIRSTNAME_FIELD in the column definition.

{ label: 'First Name', fieldName: FIRSTNAME_FIELD },

Instead, you need to pass the fieldApiName property of the FIRSTNAME_FIELD.

So the final correct code is:

{ label: 'First Name', fieldName: FIRSTNAME_FIELD.fieldApiName },

*Use the same for all other fields.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.