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


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


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

    setRowData(event) {
        this.tableData = this.localTable;




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 = [];
    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!

  • 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 :) 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


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

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