#82 DataTable code and readme improvements

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
+<alfresco-datatable 
+    [data]="data">
+</alfresco-datatable>
+```
+
+```ts
+import { Component } from 'angular2/core';
+import { 
+    ALFRESCO_DATATABLE_DIRECTIVES,
+    ObjectDataTableAdapter
+} from 'ng2-alfresco-datatable/ng2-alfresco-datatable';
+
+@Component({
+    selector: 'my-view',
+    template: '<YOUR 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:

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",

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html

@@ -23,7 +23,7 @@
             <span *ngIf="col.title">{{col.title}}</span>
         </th>
         <!-- Actions -->
-        <th>
+        <th *ngIf="actions">
             <span class="sr-only">Actions</span>
         </th>
     </tr>
@@ -56,7 +56,7 @@
 
         </td>
 
-        <td><!-- todo: actions --></td>
+        <td *ngIf="actions"><!-- todo: actions --></td>
 
     </tr>
     </tbody>

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<any> = new EventEmitter();
 

ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts

@@ -39,9 +39,14 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
                 return new ObjectDataRow(item);
             });
 
+            if (schema && schema.length > 0) {
                 this._columns = schema.map(item => {
                     return new ObjectDataColumn(item);
                 });
+
+                this.sort(this._columns[0].key, 'asc');
+            }
+
         }
     }