I am using a util lwc data table and passing list of records from the parent component, I am using a refresh button to re-fetch the records from Apex (imperatively) and update the LWC data table but the LWC data table is not updating records in data table.
Util LWC Data table Template :
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread slds-scrollable_x">
<div class="slds-col slds-scrollable_x" style={tablewidth} >
<lightning-datatable
key-field="Id"
columns={columns}
data={recordsToDisplay}
hide-checkbox-column
default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={onHandleSort}
onrowaction={handleRowAction}
class="slds-table_header-fixed_container slds-table_bordered slds-table_col-bordered slds-border_top "
>
</lightning-datatable>
</div>
</div>
Button on Child Util LWC data table :
<lightning-button title="refresh records" icon-name="utility:refresh" icon-position="center" onclick={handleRefresh} class="slds-m-left_x-small"></lightning-button>
Child Data table JS :
handleRefresh(event){
this.dispatchEvent( new CustomEvent('refreshrecords', {detail:event.detail}));
}
Parent HTML :
<c-util-lwc-datatable
columns={ordercolumns}
records={allorders}
onactionclicked={handleselectedorder}
show-search-box={showsearchbox}
total-records={totalRecords}
onrefreshrecords={handlerefreshrecords}
>
</c-util-lwc-datatable>
JS :
handlerefreshrecords(event){
this.handleGetOrders();
}
handleGetOrders(){
getAllOrders({accountId: this.recordId})
.then((result) =>{
this.allorders = result.map(row=>{
return{...row, opportunityName: '/' + row.Id, Orders: row.Order_Id__c}
});
})
.catch((error) => {
this.error = error;
this.allorders = undefined;
})
}
Even though this.allorders is coming back with new data, Child LWC data table is not being update with new data. I do not have a @wire
method to use refreshApex.
How can I make sure the child LWC gets new data and data table renders with new data?
for:each
, how would I add key and how can I use it?