LWC Child Datatable passed down from Parent not showing rows

Question

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": "[email protected]"
    },
    {
        "Name": "User User",
        "Email": "[email protected]"
    },
    {
        "Name": "Service",
        "Email": "[email protected]"
    }
]

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?

Answer 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;
    }
}