diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index d533f275cc..07b851cb97 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -34,43 +34,62 @@
## Prerequisites
-Before you start using this development framework, make sure you have installed all required software and done all the
+Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
-```sh
-npm install --save ng2-alfresco-datatable
-```
+Follow the 3 steps below:
-### 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 ng2-alfresco-datatable --save
+ ```
-```sh
-npm install --save ng2-translate ng2-alfresco-core
-```
+2. Html
-#### Material Design Lite
+ Include these dependencies in your index.html page:
-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
-design dependency to your project:
+ ```html
-```sh
-npm install --save material-design-icons material-design-lite
-```
+
+
+
+
-Also make sure you include these dependencies in your `index.html` file:
+
+
+
-```html
-
-
-
-
-```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+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
@@ -78,52 +97,69 @@ Also make sure you include these dependencies in your `index.html` file:
**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 {
- CONTEXT_MENU_DIRECTIVES,
- CONTEXT_MENU_PROVIDERS
-} from 'ng2-alfresco-core';
-import {
- ALFRESCO_DATATABLE_DIRECTIVES,
- ObjectDataTableAdapter
-} from 'ng2-alfresco-datatable';
+import { CONTEXT_MENU_DIRECTIVES, 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: `
`,
directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
providers: [CONTEXT_MENU_PROVIDERS]
})
-export class MyView {
+export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
- { id: 1, name: 'Name 1' },
- { id: 2, name: 'Name 2' }
+ {id: 1, name: 'Name 1'},
+ {id: 2, name: 'Name 2'}
],
// schema
[
- {
- type: 'text',
- key: 'id',
- title: 'Id',
- sortable: true
+ {
+ type: 'text',
+ key: 'id',
+ title: 'Id',
+ sortable: true
},
- {
- type: 'text',
- key: 'name',
- title: 'Name',
- cssClass: 'full-width',
- sortable: true
+ {
+ type: 'text',
+ key: 'name',
+ title: 'Name',
+ cssClass: 'full-width',
+ sortable: true
}
]
);
}
}
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ CoreModule.forRoot(),
+ DataTableModule
+ ],
+ declarations: [DataTableDemo],
+ bootstrap: [DataTableDemo]
+})
+export class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
```
@@ -132,10 +168,10 @@ export class MyView {
| Name | Type | Default | Description
| --- | --- | --- | --- |
-| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
-| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
-| actions | boolean | false | Toggles data actions column |
-| fallbackThubnail | string | | Fallback image for row ehre thubnail is missing|
+| `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
+| `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
+| `actions` | boolean | false | Toggles data actions column |
+| `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
@@ -412,8 +449,8 @@ npm run build
```sh
$ npm run build:w
```
-
-### Running unit tests
+
+## Running unit tests
```sh
npm test
@@ -425,11 +462,25 @@ npm test
npm test-browser
```
-This task rebuilds all the code, runs tslint, license checks and other quality check tools
-before performing unit testing.
+This task rebuilds all the code, runs tslint, license checks and other quality check tools
+before performing unit testing.
### Code coverage
```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)
\ No newline at end of file
diff --git a/ng2-components/ng2-alfresco-datatable/demo/package.json b/ng2-components/ng2-alfresco-datatable/demo/package.json
index 8f52bb1a96..1a603b8b5b 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -22,30 +22,7 @@
},
"license": "Apache-2.0",
"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",
-
- "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"
+ "ng2-alfresco-datatable": "0.3.2"
},
"devDependencies": {
"@types/core-js": "^0.9.32",
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 178f79c6d9..813381304f 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/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": {