#878 doc and demo datatable

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

@@ -39,63 +39,83 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
 
 ## Install
 
-```sh
+Follow the 3 steps below:
-npm install --save ng2-alfresco-datatable
-```
 
-### Dependencies
+1. Npm
-
-You must separately install the following libraries for your application:
- 
-- [ng2-translate](https://github.com/ocombe/ng2-translate)
-- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
 
     ```sh
-npm install --save ng2-translate ng2-alfresco-core
+    npm install ng2-alfresco-datatable --save
     ```
 
-#### Material Design Lite
+2. Html
 
-The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
+    Include these dependencies in your index.html page:
-design dependency to your project:
-
-```sh
-npm install --save material-design-icons material-design-lite
-```
-
-Also make sure you include these dependencies in your `index.html` file:
 
     ```html
+
     <!-- Google Material Design Lite -->
     <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
     <script src="node_modules/material-design-lite/material.min.js"></script>
     <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+
+    <!-- Polyfill(s) for Safari (pre-10.x) -->
+    <script src="node_modules/intl/dist/Intl.min.js"></script>
+    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
+    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
+
+    <!-- Polyfill(s) for dialogs -->
+    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+    <style>._dialog_overlay { position: static !important; } </style>
+
+    <!-- Modules  -->
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
     ```
 
+3. SystemJs
+
+    Add the following components to your systemjs.config.js file:
+
+    - ng2-translate
+    - alfresco-js-api
+    - ng2-alfresco-core
+    - ng2-alfresco-datatable
+
+    Please refer to the following example file: [systemjs.config.js](demo/systemjs
+    .config.js) .
+
 ## Basic usage example
 
 
 **my.component.ts**
 
 ```ts
+
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { CoreModule } from 'ng2-alfresco-core';
+import { DataTableModule }  from 'ng2-alfresco-datatable';
+import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 import { Component } from '@angular/core';
-import { 
+import { CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core';
-    CONTEXT_MENU_DIRECTIVES, 
+import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-    CONTEXT_MENU_PROVIDERS 
-} from 'ng2-alfresco-core';
-import {
-    ALFRESCO_DATATABLE_DIRECTIVES,
-    ObjectDataTableAdapter
-} from 'ng2-alfresco-datatable';
 
 @Component({
-    selector: 'my-view',
+    selector: 'alfresco-app-demo',
     template: `<alfresco-datatable [data]="data">
         </alfresco-datatable>`,
     directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
     providers: [CONTEXT_MENU_PROVIDERS]
 })
-export class MyView {
+export class DataTableDemo {
     data: ObjectDataTableAdapter;
 
     constructor() {
@@ -124,6 +144,22 @@ export class MyView {
         );
     }
 }
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        CoreModule.forRoot(),
+        DataTableModule
+    ],
+    declarations: [DataTableDemo],
+    bootstrap: [DataTableDemo]
+})
+export class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
 ```
 
 ![DataTable demo](docs/assets/datatable-demo.png)
@@ -132,10 +168,10 @@ export class MyView {
 
 | Name | Type | Default | Description
 | --- | --- | --- | --- |
-| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
+| `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
-| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
+| `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
-| actions | boolean | false | Toggles data actions column |
+| `actions` | boolean | false | Toggles data actions column |
-| fallbackThubnail | string |  | Fallback image for row ehre thubnail is missing|
+| `fallbackThubnail` | string |  | Fallback image for row ehre thubnail is missing|
 
 ### Events
 
@@ -366,6 +402,7 @@ let data = new ObjectDataTableAdapter(
 ```
 
 ## Generate schema 
+
 Is possible to auto generate your schema if you have only the data row  
 
 ```ts
@@ -397,11 +434,11 @@ let schema = ObjectDataTableAdapter.generateSchema(data);
 
 ```
 
-
 ## Build from sources
 
 Alternatively you can build component from sources with the following commands:
 
+
 ```sh
 npm install
 npm run build
@@ -413,7 +450,7 @@ npm run build
 $ npm run build:w
 ```
 
-### Running unit tests
+## Running unit tests
 
 ```sh
 npm test
@@ -433,3 +470,17 @@ before performing unit testing.
 ```sh
 npm run coverage
 ```
+
+## Demo
+
+If you want have a demo of how the component works, please check the demo folder :
+
+```sh
+cd demo
+npm install
+npm start
+```
+
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-datatable/demo/package.json

@@ -22,30 +22,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.0.0",
+    "ng2-alfresco-datatable": "0.3.2"
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "license-check": "1.1.5",
-
-    "ng2-translate": "2.5.0",
-    "ng2-alfresco-core": "0.3.2",
-    "ng2-alfresco-datatable": "0.3.2",
-
-    "material-design-icons": "2.2.3",
-    "material-design-lite": "1.2.1"
   },
   "devDependencies": {
     "@types/core-js": "^0.9.32",

ng2-components/ng2-alfresco-datatable/package.json

@@ -44,24 +44,6 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-translate": "2.5.0",
     "ng2-alfresco-core": "0.3.2"
   },
   "devDependencies": {