I have three tables

<table class="table1">
   ...
   <tbody>
      <tr *ngFor="let data of datasource1">
      ...
      </tr>
   </tbody>
</table>
<table class="table2">
   ...
   <tbody>
      <tr *ngFor="let data of datasource2">
      ...
      </tr>
   </tbody>
</table>
<table class="table3">
   ...
   <tbody>
      <tr *ngFor="let data of datasource3">
      ...
      </tr>
   </tbody>
</table>

and I want to somehow be in control of which table should be displayed in which order, i.e., first table3 then table1 then table2 (or some other order). How would I do that?

CodePudding user response：

Templates can be created for each table and rendered in the required order based on a condition.

Create table templates:

<ng-template name="table1">
  <table class="table1">
   ...
   <tbody>
      <tr *ngFor="let data of datasource1">
      ...
      </tr>
   </tbody>
  </table>
</ng-template>

... similarly for table2, 3

I am assuming there is a variable order in your component.ts file which defines the order to use. And

1. If it's value is 1: order of tables is 1, 2, 3
2. If it's value is 2: order is 2, 3, 1
3. If it's value is 3: order is 3, 1, 2

So the html to render in required order could be one of the following as per your case

1.

<ng-container *ngIf="order === 1">
   <ng-container *ngTemplateOutlet="table1">
   <ng-container *ngTemplateOutlet="table2">
   <ng-container *ngTemplateOutlet="table3">
</ng-container>

<ng-container *ngIf="order === 2">
   <ng-container *ngTemplateOutlet="table2">
   <ng-container *ngTemplateOutlet="table3">
   <ng-container *ngTemplateOutlet="table1">
</ng-container>

Note: *ngIf needs to be updated with required condition
.... other conditions

   <ng-container *ngTemplateOutlet="order === 1 ? table1 : order === 2 ? table2 : table3">
   <ng-container *ngTemplateOutlet="order === 1 ? table2 : order === 2 ? table3 : table1">
   <ng-container *ngTemplateOutlet="order === 1 ? table3 : order === 2 ? table1 : table2">

CodePudding user response：

You can use CSS, wrap the tables in a div and apply flex box - display: flex; Assign tot each table an order - order: 0; order:1; and so on.