feat(table): Drag & drop order functionality added.

apps/components-e2e/src/app/app.routing.module.ts

@@ -194,6 +194,13 @@ export const routes: Routes = [
         (module) => module.DtE2ESliderModule,
       ),
   },
+  {
+    path: 'table-order',
+    loadChildren: () =>
+      import('../components/table-order/table.module').then(
+        (module) => module.DtE2ETableModule,
+      ),
+  },
   {
     path: 'tabs',
     loadChildren: () =>

apps/components-e2e/src/components/table-order/table-order-expandable/table-expandable.html

@@ -0,0 +1,32 @@
+<dt-table
+  [dataSource]="dataSource"
+  dtOrder
+  cdkDropList
+  [cdkDropListData]="dataSource"
+>
+  <dt-simple-order-column name="order" label="Order"></dt-simple-order-column>
+  <ng-container dtColumnDef="name" dtColumnAlign="text">
+    <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell>
+    <dt-cell *dtCellDef="let row">{{ row.name }}</dt-cell>
+  </ng-container>
+  <ng-container dtColumnDef="details" dtColumnAlign="number">
+    <dt-header-cell *dtHeaderCellDef>Details</dt-header-cell>
+    <dt-expandable-cell
+      *dtCellDef
+      ariaLabel="Expand the row"
+    ></dt-expandable-cell>
+  </ng-container>
+  <dt-header-row *dtHeaderRowDef="['order', 'details', 'name']"></dt-header-row>
+  <dt-expandable-row
+    *dtRowDef="let row; columns: ['order', 'details', 'name']"
+    [expanded]="row.expanded"
+  >
+    <ng-template dtExpandableRowContent>
+      no chart
+    </ng-template>
+  </dt-expandable-row>
+</dt-table>
+
+<button dt-button (click)="disabled = !disabled" id="disable-toggle">
+  Disable table reorder
+</button>

apps/components-e2e/src/components/table-order/table-order-expandable/table-expandable.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import {
+  DtOrder,
+  DtTableOrderDataSource,
+} from '@dynatrace/barista-components/table';
+
+interface RuleSet {
+  name: string;
+}
+
+@Component({
+  selector: 'dt-e2e-table',
+  templateUrl: 'table-expandable.html',
+})
+export class DtE2ETableExpandable implements AfterViewInit {
+  disabled = false;
+  @ViewChild(DtOrder) _dtOrder: DtOrder<any>;
+
+  dataSource: DtTableOrderDataSource<RuleSet> = new DtTableOrderDataSource([
+    { name: 'I' },
+    { name: 'II' },
+    { name: 'III' },
+    { name: 'IV' },
+    { name: 'V' },
+  ]);
+
+  ngAfterViewInit(): void {
+    this.dataSource.order = this._dtOrder;
+  }
+}

apps/components-e2e/src/components/table-order/table-order/table.html

@@ -0,0 +1,27 @@
+<dt-table
+  [dataSource]="dataSource"
+  dtOrder
+  [dtOrderDisabled]="disabled"
+  cdkDropList
+  [cdkDropListData]="dataSource"
+>
+  <dt-simple-order-column
+    name="order"
+    label="Order"
+    dtColumnProportion="0.1"
+  ></dt-simple-order-column>
+  <dt-simple-text-column
+    name="name"
+    label="Rule name"
+    sortable="false"
+  ></dt-simple-text-column>
+  <dt-header-row *dtHeaderRowDef="['order', 'name']"></dt-header-row>
+  <dt-row *dtRowDef="let row; columns: ['order', 'name']"></dt-row>
+</dt-table>
+
+<button dt-button (click)="disabled = !disabled" id="disable-toggle">
+  Disable table reorder
+</button>
+<button dt-button (click)="changeOrder()" id="change-order">
+  Change order
+</button>

apps/components-e2e/src/components/table-order/table-order/table.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import {
+  DtOrder,
+  DtTableOrderDataSource,
+} from '@dynatrace/barista-components/table';
+
+interface RuleSet {
+  name: string;
+}
+
+@Component({
+  selector: 'dt-e2e-table',
+  templateUrl: 'table.html',
+})
+export class DtE2ETable implements AfterViewInit {
+  disabled = false;
+  @ViewChild(DtOrder) _dtOrder: DtOrder<any>;
+
+  dataSource: DtTableOrderDataSource<RuleSet> = new DtTableOrderDataSource([
+    { name: 'I' },
+    { name: 'II' },
+    { name: 'III' },
+    { name: 'IV' },
+    { name: 'V' },
+  ]);
+
+  ngAfterViewInit(): void {
+    this.dataSource.order = this._dtOrder;
+  }
+
+  changeOrder(): void {
+    this._dtOrder.order(0, 1);
+  }
+}