fix(table): Fixes a CD issue when using the simple order column with …

…an Angular version higher than 9.1.6.

Co-authored-by: Peter Affenzeller <peter.affenzeller@dynatrace.com>

apps/dev/src/table-order/table-order-demo.component.html

@@ -8,11 +8,11 @@ <h2>Simple table with reorder</h2>
   cdkDropList
   [cdkDropListData]="dataSource"
 >
-  <dt-simple-order-column
-    name="order"
-    label="Order"
-    dtColumnProportion="0.2"
-  ></dt-simple-order-column>
+  <ng-container [dtColumnDef]="'order'" dtColumnAlign="text">
+    <dt-header-cell *dtHeaderCellDef>Order</dt-header-cell>
+    <dt-order-cell *dtCellDef="let data; let index = index" [index]="index">
+    </dt-order-cell>
+  </ng-container>
   <dt-simple-text-column
     name="name"
     label="Rule name"
@@ -42,7 +42,11 @@ <h2>Table with expandable rows and reorder</h2>
   cdkDropList
   [cdkDropListData]="dataSource1"
 >
-  <dt-simple-order-column name="order" label="Order"></dt-simple-order-column>
+  <ng-container [dtColumnDef]="'order'" dtColumnAlign="text">
+    <dt-header-cell *dtHeaderCellDef>Order</dt-header-cell>
+    <dt-order-cell *dtCellDef="let data; let index = index" [index]="index">
+    </dt-order-cell>
+  </ng-container>
   <ng-container dtColumnDef="host" dtColumnAlign="text">
     <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell>
     <dt-cell *dtCellDef="let row">{{ row.host }}</dt-cell>

libs/barista-components/table/README.md

@@ -268,21 +268,20 @@ direction. The event contains the following properties.
 
 ## Ordering
 
-The `DtOrder` and `dt-simple-order-column` in combination with Angular's
-`DragDropModule` are used to add ordering functionality to the table. To add
-ordering capabilities to a table, import the `DragDropModule` and add the
-`dtOrder` and `cdkDropList` directive and `cdkDropListData` input to the
-`dt-table` component.
+The `DtOrder` and `dt-order-cell` in combination with Angular's `DragDropModule`
+are used to add ordering functionality to the table. To add ordering
+capabilities to a table, import the `DragDropModule` and add the `dtOrder` and
+`cdkDropList` directive and `cdkDropListData` input to the `dt-table` component.
 
 ```html
 <dt-table ... dtOrder cdkDropList [cdkDropListData]="dataSource" ...></dt-table>
 ```
 
 The `cdkDropListData` gets the same data as the table's `dataSource` input. When
-combining the `dt-simple-order-column` with other `dt-simple-column`s, their
-`sortable` input should be set to false. The `DtTableOrderDataSource` does not
-mutate the original data when ordering, if you want to persist the ordered state
-you have to take care of that yourself.
+combining the `dt-order-cell` with `dt-simple-column`s, their `sortable` input
+should be set to false. The `DtTableOrderDataSource` does not mutate the
+original data when ordering, if you want to persist the ordered state you have
+to take care of that yourself.
 
 <ba-live-example name="DtExampleTableOrderColumn" fullWidth></ba-live-example>
 

libs/barista-components/table/src/simple-columns/simple-order-column.ts

@@ -22,6 +22,13 @@ import {
 
 import { DtSimpleColumnBase } from './simple-column-base';
 
+/**
+ * @deprecated Using a simple order column does not work after angular version 9.1.6 anymore -
+ * please use the dt-order-cell directly inside the table definition
+ * We will abandon the simple column approach due to changedetection issues
+ * when a row affects another one in the future
+ * To be removed with 8.0.0
+ */
 @Component({
   selector: 'dt-simple-order-column',
   templateUrl: 'simple-order-column.html',

libs/examples/src/table/table-order-column-example/table-order-column-example.html

@@ -5,11 +5,11 @@
   cdkDropList
   [cdkDropListData]="dataSource"
 >
-  <dt-simple-order-column
-    name="order"
-    label="Order"
-    dtColumnProportion="0.2"
-  ></dt-simple-order-column>
+  <ng-container [dtColumnDef]="'order'" dtColumnAlign="text">
+    <dt-header-cell *dtHeaderCellDef>Order</dt-header-cell>
+    <dt-order-cell *dtCellDef="let data; let index = index" [index]="index">
+    </dt-order-cell>
+  </ng-container>
   <dt-simple-text-column
     name="name"
     label="Rule name"

libs/examples/src/table/table-order-expandable-example/table-order-expandable-example.html

@@ -5,7 +5,11 @@
   cdkDropList
   [cdkDropListData]="dataSource"
 >
-  <dt-simple-order-column name="order" label="Order"></dt-simple-order-column>
+  <ng-container [dtColumnDef]="'order'" dtColumnAlign="text">
+    <dt-header-cell *dtHeaderCellDef>Order</dt-header-cell>
+    <dt-order-cell *dtCellDef="let data; let index = index" [index]="index">
+    </dt-order-cell>
+  </ng-container>
   <ng-container dtColumnDef="host" dtColumnAlign="text">
     <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell>
     <dt-cell *dtCellDef="let row">{{ row.host }}</dt-cell>

libs/examples/src/table/table-order-observable-example/table-order-observable-example.html

@@ -20,7 +20,11 @@
   cdkDropList
   [cdkDropListData]="dataSource"
 >
-  <dt-simple-order-column name="order" label="Order"></dt-simple-order-column>
+  <ng-container [dtColumnDef]="'order'" dtColumnAlign="text">
+    <dt-header-cell *dtHeaderCellDef>Order</dt-header-cell>
+    <dt-order-cell *dtCellDef="let data; let index = index" [index]="index">
+    </dt-order-cell>
+  </ng-container>
   <ng-container dtColumnDef="host" dtColumnAlign="text">
     <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell>
     <dt-cell *dtCellDef="let row">{{ row.host }}</dt-cell>