Added dot notation (Fixes #6)

README.md

@@ -133,13 +133,13 @@ Exported As: `Column`
 #### Properties
 
 | Name                       | Description                         |
-| -------------------------- | ------------------------------- |
+| -------------------------- | ----------------------------------- |
 | cssClass: string           | Style to add to column header       |
 | hide: boolean              | Hide column                         |
 | hideMobile: boolean        | Hide column on mobile devices       |
 | initialSort: 'asc'/'desc'  | Sort the column initially           |
 | label: string              | Column header label                 |
-| property: string           | Property to display             |
+| property: string           | Property to display in dot notation |
 | sort: boolean              | Enable/Disable sorting              |
 | sortFn: (a, b) => 1/0/-1   | Custom function to sort rows by     |
 | template: TemplateRef<any> | Template to render row with         |

projects/ng-datatable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztimson/ng-datatable",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "homepage": "https://github.com/ztimson/ng-datatable",
   "license": "Apache-2.0",
   "author": {

projects/ng-datatable/src/lib/ng-datatable.component.html

@@ -3,7 +3,7 @@
     <col *ngIf="showCheckbox && selectionMode !== null" width="30px">
     <col *ngIf="expandedTemplate" width="30px">
     <ng-container *ngFor="let c of columns">
-      <col *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" span="1" [width]="c.width">
+      <col *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" span="1" [width]="convertWidth(c.width)">
     </ng-container>
   </colgroup>
   <thead>
@@ -35,7 +35,7 @@
         <td *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)">
           <ng-template #defaultTemplate let-value="value">{{value}}</ng-template>
           <ng-template [ngTemplateOutlet]="c.template || defaultTemplate"
-                       [ngTemplateOutletContext]="{object: row, value: row[c.property]}">
+                       [ngTemplateOutletContext]="{object: row, value: dotNotation(row, c.property)}">
           </ng-template>
         </td>
       </ng-container>

projects/ng-datatable/src/lib/ng-datatable.component.ts

@@ -82,6 +82,15 @@ export class NgDatatableComponent implements OnInit {
     }
   }
 
+  protected convertWidth(width) {
+    if(typeof width == 'number') return `${width}px`;
+    return width;
+  }
+
+  protected dotNotation(obj: object, prop: string) {
+    return prop.split('.').reduce((obj, prop) => obj[prop], obj);
+  }
+
   addFilter(...filters: ((row?: any, index?: number, arr?: any[]) => boolean)[]) {
     this.filters = this.filters.concat(filters);
     this.process();