@switch (config?.mode) {
  @case ('TABLE') {
    <div *ngTemplateOutlet="table"></div>
  }
  @default {
    <div *ngTemplateOutlet="tree"></div>
  }
}

<ng-template #table>
  <tablex 
    [fields]="fields"
    [data]="dataSource?.data"
    [options]="{sort:config?.sort}"
    [searchable]="true"
    (onChange)="onTableEvent($event)"
    [(activatedObject)]="activatedObject"
  />
</ng-template>
<ng-template #tree>
  <mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
      <mat-icon matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
      </mat-icon>
      <span *ngFor="let field of fields" class="tree-node-content" [class.active]="activatedNode?.nodeId === node?.nodeId" (click)="nodeSelected(node)" [style.paddingLeft.px]="40">
        {{ node?.payload[field.key] }}
      </span>
    </mat-tree-node>
  </mat-tree>
  <mat-paginator [length]="totalItems" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [showFirstLastButtons]="true" (page)="onPageChange($event)"></mat-paginator>
</ng-template>