Lightning Datatable not refreshing/rendering

Question

HTML:

<lightning-datatable
                    key-field="addon"
                    hide-table-header
                    data={addondata}
                    columns={addoncolumns}>
</lightning-datatable>

JS:

const addoncolumns = [
    { label: 'Add-on Service', fieldName: 'addon',type:'String' },
    { label: 'Price', fieldName: 'price', type: 'Decimal' }
];
addondata;

method(message){        
        let tempList;
        if(this.addondata != undefined)
            tempList = this.addondata;
        else
            tempList = [];
        
        if(this.fridge != message.fridge){
            if(message.fridge == true){                
                tempList.push({"addon":"Fridge/Freezer","price":200});
            }            
            this.fridge = message.fridge;
        }
        console.log('1'+JSON.stringify(tempList));
        if(this.cabinets != message.cabinet){
            console.log('second loop'+this.cabinets+message.cabinet);
            if(message.cabinet == true){                
                tempList.push({"addon":"Cabinets","price":200});
            }            
            this.cabinets = message.cabinet;
            

        }
        console.log('2'+JSON.stringify(tempList));
        console.log('3'+JSON.stringify(this.addondata));
        this.addondata = tempList;
        console.log('4'+JSON.stringify(this.addondata));
}

Console Results:

First Click (Shows correctly on screen)-

1[{"addon":"Fridge/Freezer","price":200}]
2[{"addon":"Fridge/Freezer","price":200}]
3undefined
4[{"addon":"Fridge/Freezer","price":200}]

Second Click (doesn't show the second row)

1[{"addon":"Fridge/Freezer","price":200}]
2[{"addon":"Fridge/Freezer","price":200},{"addon":"Cabinets","price":200}]
3[{"addon":"Fridge/Freezer","price":200},{"addon":"Cabinets","price":200}]
4[{"addon":"Fridge/Freezer","price":200},{"addon":"Cabinets","price":200}]

Question:

Why the datatable doesn't show the second row (or any subsequent rows after 1) even when this.addondata carries the correct value?

Answer 1

When you click the first time this.addondata is undefined, so a new array is created then its reference is assigned to this.addondata, therefore the framework notice a changes in a reactive property and triggers a rerender.
The second time the reference doesn't change, so the framework is not aware that a new element has been added to the array, that's why no rerender is triggered.
Creating a new array via spread syntax will fix it:

console.log('3'+JSON.stringify(this.addondata));
this.addondata = [...tempList];
console.log('4'+JSON.stringify(this.addondata));

Another way to fix it is initialize addondata when it's declared and decorate it with @track:

@track addondata = [];

method(message) {
    if(this.fridge != message.fridge){
        if(message.fridge == true){                
            this.addondata.push({"addon":"Fridge/Freezer","price":200});
        }            
        this.fridge = message.fridge;
    }
    console.log('1'+JSON.stringify(this.addondata));
    if(this.cabinets != message.cabinet){
        console.log('second loop'+this.cabinets+message.cabinet);
        if(message.cabinet == true){                
            this.addondata.push({"addon":"Cabinets","price":200});
        }            
        this.cabinets = message.cabinet;
    }
    console.log('2'+JSON.stringify(this.addondata));
}

Docs about reactivity for fields and array

If you don’t use @track, the framework observes changes that assign a new value to the field.
arr = ['a','b'];
The component rerenders when you assign a new value to arr.
this.arr = ['x','y','z']; // Component rerenders.
However, if we update or add an element in the array, the component doesn’t rerender.

// Component doesn’t rerender.
this.arr[0] = 'x';
this.arr.push('c');