0

I am not sure exactly what is missing but when I pass an array of items to my list from parent to child component, the child component has the values but won't show them in the datatable for some reason.

PARENT COMPONENT: parentComponent.html

<template>        
    ...
            <div style="margin-bottom: 15px;">
                <c-child-component
                title="Users"
                list={usersArray}>
                </c-child-component>
            </div>        
...  
</template>

parentComponent.js

import { LightningElement, wire, track, api } from 'lwc';
import getRelatedUsers from '@salesforce/apex/ParentComponentController.getRelatedUsers';

export default class ParentComponent extends LightningElement {
    @track usersArray= [];
...
    @wire(getRelatedUsers)
    wiredUsers({data,error}){     
        if (data) {       
            data.forEach(user => {               
                let preparedUser = {};
                preparedUser.Name = user.name;              
                preparedUser.Email = user.email;              
                this.usersArray.push(preparedUser);
            });       
            this.loadedData = data;
        } else if (error) {
            this.error = error;
        }
    }
...
}

The Apex class is just returning a list of ReturnData class, I plan to add more fields but wanted to get it working first

public class ReturnData {
        @AuraEnabled
        public string name;
        @AuraEnabled
        public string email;

        public ReturnData(string name, string email) {
            this.name = name;
            this.email = email;
        }
    }

CHILD COMPONENT

childComponent.js

...
const columns = [
    { label: 'User Name', fieldName: 'Name', type: 'text',  sortable: true },
    { label: 'User Email', fieldName: 'Email', type: 'email',  sortable: true },
    {
        type: 'action',
        typeAttributes: { rowActions: actions },
    }
];

export default class ChildComponent extends LightningElement {
    @api list = [];
    columns = columns;
...

childComponent.html

<template>
...
            
                <lightning-datatable
                        key-field="id"
                        data={list}
                        columns={columns}
                        onrowaction={handleRowAction}                        
                        >
                </lightning-datatable>
          
...
<template>

I have added a button in my child component and when I press it I can print the list variable which seems to contains the proper format and values yet the datatable shows no rows:

list => [
    {
        "Name": "User1",
        "Email": "User1@example.com"
    },
    {
        "Name": "User User",
        "Email": "useruser@example.com"
    },
    {
        "Name": "Service",
        "Email": "service@example.com"
    }
]

If i copy this aray exactly as is and put in the list variable the rows do populate.. but I want to pass the list via the parent. What am I missing?

2
  • Can you post the code from parent component in which you're setting list?
    – Jay Rathod
    Feb 6, 2021 at 6:08
  • @JayRathod I have added the code for the parent that is handling the list of that side
    – Sadistik
    Feb 6, 2021 at 6:20

1 Answer 1

1

You need to recreate the array using ES6 spread operator. LWC Data Table does not refresh view when push is used to add element to data property. I've updated wiredUsers method with the fix.

@wire(getRelatedUsers)
wiredUsers({data,error}){     
    if (data) {
        let usersArray = [];  
        data.forEach(user => {               
            let preparedUser = {};
            preparedUser.Name = user.name;              
            preparedUser.Email = user.email;              
            usersArray.push(preparedUser);
        });
        this.usersArray = [...usersArray];       
        this.loadedData = data;
    } else if (error) {
        this.error = error;
    }
}
1
  • Amazing thank you so much I could not find documentation explaining that aspect. You are a true hero :)
    – Sadistik
    Feb 6, 2021 at 6:45

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.