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 {
+import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
-    ObjectDataTableAdapter,
-    DataSorting,
-    ObjectDataRow,
-    ObjectDataColumn
-} 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}`);
+    }
 }

ng2-components/ng2-alfresco-datatable/README.md

@@ -286,27 +286,6 @@ Requires `actions` property to be set to `true`._
 Note that DataTable itself does not populate action menu items,
 you can provide all necessary content via handler.
 
-Event properties:
-
-```ts
-args: {
-    row: DataRow,
-    col: DataColumn,
-    actions: []
-}
-```
-
-Handler example:
-
-```ts
-onShowRowActionsMenu(event) {
-    event.args.actions = [
-        { ... },
-        { ... }
-    ]
-}
-```
-
 #### executeRowAction event
 
 _Emitted when row action is executed by user._
@@ -317,28 +296,47 @@ integration. If there were actions provided with `showRowActionsMenu` event
 then `executeRowAction` will be automatically executed when user clicks 
 corresponding menu item.
 
-Event properties:
+```html
+<alfresco-datatable
+    [data]="data"
+    [multiselect]="multiselect"
+    [actions]="true"
+    (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    (executeRowAction)="onExecuteRowAction($event)">
+</alfresco-datatable>
+```
 
 ```ts
-args: {
+import { DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
-    row: DataRow
+
-    action: any
+onShowRowActionsMenu(event: DataCellEvent) {
+    let myAction = {
+        title: 'Hello'
+        // your 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}`);
 }
 ```
 
-Handler example:
+![](docs/assets/datatable-actions-ui.png)
 
-```ts
+![](docs/assets/datatable-actions-console.png)
-onExecuteRowAction(event) {
+
-    
+Developers are allowed putting any payloads as row actions.
-    // get event arguments
+The only requirement for the objects is having `title` property.
-    let row = event.args.row;
+
-    let action = event.args.action;
+Once corresponding action is clicked in the dropdown menu DataTable invokes `executeRowAction` event
-    
+where you can handle the process, inspect the action payload and all custom properties defined earlier,
-    // your code to execute action
+and do corresponding actions.
-    this.executeContentAction(row, action);
-}
-```
 
 ## Data sources
 

ng2-components/ng2-alfresco-datatable/src/components/datatable/data-row-action.event.ts

@@ -20,6 +20,11 @@ import { DataRow } from '../../data/datatable-adapter';
 
 export class DataRowActionEvent extends BaseEvent<DataRowActionModel> {
 
+    // backwards compatibility with 1.2.0 and earlier
+    get args(): DataRowActionModel {
+        return this.value;
+    }
+
     constructor(row: DataRow, action: any) {
         super();
         this.value = new DataRowActionModel(row, action);