0

I tried to display my array using lightning-datatable with the below code. However, I can see the table and overview of datatable but no data is displayed in the table. Please help me to identify my where the mistake was.

JS:

import { LightningElement,track,api } from 'lwc';
const columns = [
  {label:'Name',fieldname:'name'},
  {label:'Email',fieldname:'email'},
  {label:'Phone',fieldname:'phone'}
];
export default class Form extends LightningElement {
  
    @track name;
    @track displayAll = false;
    @track stu = {};
    @track columns = columns;  
    @track nameList = [
        {
            Id : 1,
            name : 'Sumo',
            email : '[email protected]',
            phone : 9778787
        },
        {
            Id : 2,
            name : 'Sumi',
            email : '[email protected]',
            phone : 9778788
        },
        {
            Id : 3,
            name : 'Asif',
            email : '[email protected]',
            phone : 9778787
        }
    ];

    displayNames(event)
    {
        this.displayAll = this.displayAll? false :true;
        showToast(this,'info','List of Records');
    }
}

HTML:

<template>
    <lightning-card title="Search,Delete, and Display">
        <div class="slds-medium">                 
        <lightning-input label="Name" data-inputname="name" type="text" value={stu.name} onchange={getName}></lightning-input><br/>
        <lightning-input label="Email" data-inputname="email" type="text" value={stu.email} onchange={getName}></lightning-input><br/>
        <lightning-input label="Phone" data-inputname="phone" type="number" value={stu.phone} onchange={getName}></lightning-input>
    </div>
        <div>
            <lightning-button-group>
                <lightning-button label="Display" onclick={displayNames}></lightning-button>
            </lightning-button-group>
        </div>
        <template if:true={displayAll}>
               <lightning-datatable columns={columns} data={nameList} key-field="Id"></lightning-datatable>
        </template>
    </lightning-card>
</template>
Improve this question

1 Answer 1

Reset to default
1

Unlike APEX, JavaScript is case sentive. It means that in your code you may have var sOMetHINg; and var something; and they will be different variable.

In order to use a datatable, the columns object must have some required properties.
One of them is fieldName, but in the controller you wrote fieldname, so the datatable doesn't know which attribute of the provided data it has to show.

To fix this issue just change

const columns = [
  {label:'Name',fieldname:'name'},
  {label:'Email',fieldname:'email'},
  {label:'Phone',fieldname:'phone'}
];

to

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

By the way, in the displayNames method you call showToast, but it isn't defined in your class (at least in the snippet you posted), so that line will rise an exception.
Moreover this.displayAll = this.displayAll? false :true; can be rewritten as this.displayAll = !this.displayAll;

Keep in mind that field used in the HTML template are already reactive, so you don't need @track decorator in such cases, but only to

observe changes to the properties of an object or to the elements of an array

Improve this answer
1
  • Thanks! It works!. actually, showToast is another js file imported in the main js and I haven't included the entire code in the snippet, added only the errored code. Thanks! Commented Jan 23, 2022 at 17:42

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.