Lightning Datatable not rendering

Question

I am facing a intermittent issue where my datatable is not rendering. It does render first time. Basically, its takes data from a parent component (opps). In below snippet the paginator components which is child component takes all records and calculate Page size and sends records as an event for the first page which is shown on datatable.

  <c-paginator records={opps} recordid={urlId} total-records={opps.length} is-action-diabled={isActionDiabled}
    show-search-box="true" onpaginatorchange={handlePaginatorChange} onmycustomevent={handleCustomEvent}>
  </c-paginator>
  <template if:true={recordsToDisplay}>
    <lightning-datatable key-field="Id" data={recordsToDisplay} columns={columns} onsave={handleSave}
      draft-values={saveDraftValues} hide-checkbox-column show-row-number-column onsort={updateColumnSorting}
      sorted-by={sortedBy} sorted-direction={sortedDirection}
      class="slds-table slds-table_bordered  slds-table_resizable-cols slds-table_striped"
      onrowaction={handleRowActions} row-number-offset={rowNumberOffset}>
    </lightning-datatable>
  </template>

The event is handled and data is set for datatable.

    handlePaginatorChange(event){
    //alert(event.detail.length);
    let datatableRec = event.detail;
    const lstData = [];
    datatableRec.forEach(record => {
        lstData.push(record);
    });
    this.recordsToDisplay = lstData;
    console.log('TO DISPLAY ',JSON.parse(JSON.stringify(this.recordsToDisplay)));
}

I can also see that renderedCallBack is also called so recordsToDisplay is getting changed.

However, my datatable sometimes is not rendering

Answer 1

I handled it by putting a delay in handling the event so that the datatable renders at last. But i want to understand if its a best practice.

    handlePaginatorChange(event) {
    this.isLoading = true;
    //put time delay so as to set the datatable records and render it at last
    setTimeout(() => {
        //alert(event.detail.length);
        let datatableRec = event.detail;
        const lstData = [];
        datatableRec.forEach(record => {
            lstData.push(record);
        });
        this.recordsToDisplay = [...datatableRec];
        this.isLoading = false;
        console.log('TO DISPLAY in handlePaginatorChange ', JSON.parse(JSON.stringify(this.recordsToDisplay)));
        if (this.recordsToDisplay.length > 0) {
            this.rowNumberOffset = this.recordsToDisplay[0].rowNumber - 1;
        }
    }, 2000);
}