3

so I'm relatively new to lightning web components and still not understanding all of the eventhandling. I'm creating a component for a customer and I'm having some problems with my lightning-datatable.

i have a parent-child structure like this

parent.html

<c-custom-data-table table-data={tableData}></c-custom-data-table>

parent.js

export default class fastOrder extends LightningElement {
    @track tableData = [];
    localTable = [];

    setRowData(event) {
        this.localTable.push(event.detail);
        this.tableData = this.localTable;
        this.template.querySelector('c-custom-data-table').setTableData(this.tableData);
    }
}

child.html

<lightning-datatable              
                key-field="Produktcode__c"
                data={tableData}
                columns={columns}
                onrowselection={getSelectedRecords}>
        </lightning-datatable>

child.js

export default class BasicDatatable extends LightningElement {
    @track columns = columns;
    @track tableData = [];

    @api setTableData(detail) {
        this.tableData = detail; 
    }
}

Im calling setRowData(event) from another child-component in the context of an event. The first time I'm doing this the view of the datatable is refreshed after the tableData property gets updated. But every other time than the first one theres no refresh of the view. according to the console the tableData property gets properly updated but i dont see any new rows in my datatable.

I also tried changing the binding to @api with getter and setter 

@track _tableData = [];
    @api 
    get tableData() {
        return this._tableData;
    }
    set tableData(value) {
        this._tableData = value;
    }

with exactly the same effect.

Am I missing something here? I saw examples with @track binding which got constantly refreshed with the update of the tracked property. I searched and tried for hours but maybe someone already encountered this kind of situation and can help me with a workaround (or atleast an explanation).

Thanks in advance!

Improve this question
4
  • You do not need to set the dataTable-property explicitly in your child. If parent.dataTable gets updated, then child.dataTable will be automatically updated, and then the lightning-datatable will be refreshed. You don't have to use the query-selector, nor child.setTable(). @track does it for you. Simply set parent.tableData, remove the query-selector-call and it should work.
    – Johannes
    Nov 14, 2019 at 18:43
  • Addition: The tableData-property in your child must be annotated with @api, so that you can set it in your parent via <c-custom-data-table table-data={tableData}>
    – Johannes
    Nov 14, 2019 at 19:00
  • I updated my code as suggested and used the solution that @BritishBoyinDC linked and it worked! thank your very much :)
    – Max Kretzschmar
    Nov 15, 2019 at 9:51
  • The combination of both suggestions was the solution, right?
    – Johannes
    Nov 18, 2019 at 11:17

1 Answer 1

Reset to default
2

So I think this is the same issue outlined here

Basically, using push does not have the affect of triggering a re-render. The best option is to use the accepted solution outlined in the link - re-create the array using the ES6 spread operator, which will cause the component to view it as a new array

Improve this answer

Not the answer you're looking for? Browse other questions tagged .