DataTable docs and backwards compatibility (#1702)

* example: custom datatable row actions

* update docs, provide backwards compatibility

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -1,5 +1,11 @@
 <div class="p-10">
-    <alfresco-datatable [data]="data" [multiselect]="multiselect"></alfresco-datatable>
+    <alfresco-datatable
+        [data]="data"
+        [multiselect]="multiselect"
+        [actions]="true"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)">
+    </alfresco-datatable>
 </div>
 <div class="p-10">
     <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -16,12 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import {
-    ObjectDataTableAdapter,
-    DataSorting,
-    ObjectDataRow,
-    ObjectDataColumn
-} from 'ng2-alfresco-datatable';
+import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
 
 @Component({
     selector: 'datatable-demo',
@@ -142,4 +137,21 @@ export class DataTableDemoComponent {
         let columns = schema.map(col => new ObjectDataColumn(col));
         this.data.setColumns(columns);
     }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        let myAction = {
+            title: 'Hello'
+            // you custom metadata needed for onExecuteRowAction
+        };
+        event.value.actions = [
+            myAction
+        ];
+    }
+
+    onExecuteRowAction(event: DataRowActionEvent) {
+        let args = event.value;
+        console.log(args.row);
+        console.log(args.action);
+        window.alert(`My custom action: ${args.action.title}`);
+    }
 }