[ADF-4213] drop events for DataTable component (#4589)

* stub for demo shell

* drop events for datatable

* fix docs

* cleanup template

* remove unused attribute

* disable spellcheck for the demo file

lib/core/datatable/components/datatable/datatable.component.html

@@ -25,7 +25,9 @@
                  (keyup.enter)="onColumnHeaderClick(col)"
                  role="columnheader"
                  tabindex="0"
-                 title="{{ col.title | translate }}">
+                 title="{{ col.title | translate }}"
+                 (dragover)="onDragOver($event)"
+                 (drop)="onHeaderDrop($event, col)">
                 <span *ngIf="col.srTitle" class="adf-sr-only">{{ col.srTitle | translate }}</span>
                 <span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span>
             </div>
@@ -95,7 +97,9 @@
                      (click)="onRowClick(row, $event)"
                      (keydown.enter)="onEnterKeyPressed(row, $event)"
                      [adf-context-menu]="getContextMenuActions(row, col)"
-                     [adf-context-menu-enabled]="contextMenu">
+                     [adf-context-menu-enabled]="contextMenu"
+                     (dragover)="onDragOver($event)"
+                     (drop)="onCellDrop($event, col, row)">
                     <div *ngIf="!col.template" class="adf-datatable-cell-container">
                         <ng-container [ngSwitch]="col.type">
                             <div *ngSwitchCase="'image'" class="adf-cell-value">

lib/core/datatable/components/datatable/datatable.component.ts

@@ -701,4 +701,51 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         const name = this.getNameColumnValue();
         return name ? row.getValue(name.key) : '';
     }
+
+    onDragOver(event: Event) {
+        event.preventDefault();
+    }
+
+    onHeaderDrop(event: Event, column: DataColumn) {
+        event.preventDefault();
+
+        this.elementRef.nativeElement.dispatchEvent(
+            new CustomEvent('header-drop', {
+                detail: {
+                    target: 'header',
+                    event,
+                    column
+                },
+                bubbles: true
+            })
+        );
+    }
+
+    onCellDrop(event: Event, column: DataColumn, row: DataRow) {
+        event.preventDefault();
+
+        this.elementRef.nativeElement.dispatchEvent(
+            new CustomEvent('cell-drop', {
+                detail: {
+                    target: 'cell',
+                    event,
+                    column,
+                    row
+                },
+                bubbles: true
+            })
+        );
+    }
+
+}
+
+export interface DataTableDropEvent {
+    detail: {
+        target: 'cell' | 'header';
+        event: Event;
+        column: DataColumn;
+        row?: DataRow
+    };
+
+    preventDefault(): void;
 }