diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md index 5136de120e..190189faac 100644 --- a/ng2-components/ng2-alfresco-datatable/README.md +++ b/ng2-components/ng2-alfresco-datatable/README.md @@ -13,9 +13,52 @@ ```sh npm set registry http://devproducts.alfresco.me:4873 -npm install --save ng2-alfresco-core ng2-alfresco-datatable +npm install --save ng2-alfresco-datatable material-design-lite material-design-icons ``` +## Basic usage + +```html + + +``` + +```ts +import { Component } from 'angular2/core'; +import { + ALFRESCO_DATATABLE_DIRECTIVES, + ObjectDataTableAdapter +} from 'ng2-alfresco-datatable/ng2-alfresco-datatable'; + +@Component({ + selector: 'my-view', + template: '', + directives: [ALFRESCO_DATATABLE_DIRECTIVES] +}) +export class MyView { + data: ObjectDataTableAdapter; + + constructor() { + this.data = new ObjectDataTableAdapter( + // data + [ + { id: 1, name: 'Name 1' }, + { id: 2, name: 'Name 2' } + ], + // schema + [ + {type: 'text', key: 'id', title: 'Id', sortable: true}, + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true} + ] + ); + } +} + +``` + +![DataTable demo](docs/assets/datatable-demo.png) + ## Build from sources Alternatively you can build component from sources with the following commands: diff --git a/ng2-components/ng2-alfresco-datatable/docs/assets/datatable-demo.png b/ng2-components/ng2-alfresco-datatable/docs/assets/datatable-demo.png new file mode 100644 index 0000000000..3e227b6021 Binary files /dev/null and b/ng2-components/ng2-alfresco-datatable/docs/assets/datatable-demo.png differ diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json index 1816542517..63758b2f5a 100644 --- a/ng2-components/ng2-alfresco-datatable/package.json +++ b/ng2-components/ng2-alfresco-datatable/package.json @@ -53,6 +53,10 @@ "zone.js": "^0.6.12", "es6-module-loader": "^0.17.8" }, + "peerDependencies": { + "material-design-icons": "^2.2.3", + "material-design-lite": "^1.1.3" + }, "devDependencies": { "copyfiles": "^0.2.1", "coveralls": "^2.11.9", diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html index 0de1ec6409..f31fe0a055 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html @@ -23,7 +23,7 @@ {{col.title}} - + Actions @@ -56,7 +56,7 @@ - + diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts index 71e69009e5..7f985d45a8 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts @@ -50,6 +50,9 @@ export class DataTableComponent implements OnInit, AfterViewChecked { @Input() multiselect: boolean = false; + @Input() + actions: boolean = false; + @Output() rowClick: EventEmitter = new EventEmitter(); diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts index 011c399758..f8cde061f2 100644 --- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts @@ -39,9 +39,14 @@ export class ObjectDataTableAdapter implements DataTableAdapter { return new ObjectDataRow(item); }); - this._columns = schema.map(item => { - return new ObjectDataColumn(item); - }); + if (schema && schema.length > 0) { + this._columns = schema.map(item => { + return new ObjectDataColumn(item); + }); + + this.sort(this._columns[0].key, 'asc'); + } + } }