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);
        });
      }
    });
  }
}