Lazy Loading (Angular Material Tabs) - Content Jumping

[miamilabs]

Hello Community,

I am playing around with Angular Material tabs.
I have a few tabs containing DataTables. When I open a tab, the table is already loaded. However, as soon as I do a search or sorting operation in the table the width of the table adjusts, causing the table content to jump.

I have a small workaround to prevent this jump from occurring when I search within the content upon tab load.

Is there a better way to address this problem or any suggestions to avoid the content from jumping?

onTabOpened($event: MatTabChangeEvent) {
  const tabIndex = $event.index;
  const dataTableMap = [
    {index: 1, dtTrigger: this.locaitonDtApi},
    {index: 2, dtTrigger: this.shellyDevicesApi},
  ];

  const dataTable = dataTableMap.find((item) => item.index === tabIndex);

  if (dataTable) {
    this.dtElements.forEach((element: DataTableDirective) => {
      if (element.dtTrigger === dataTable.dtTrigger) {
        element.dtInstance.then((dtApi) => {
          dtApi.draw(true);
        });
      }
    });
  }
}

Thank you all.