From cc1b9b1b3fa1fde6b8d81b0e17181abb6bfc2051 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 26 Jun 2018 17:18:44 -0400
Subject: [PATCH] Added dot notation (Fixes #6)

---
 README.md                                     | 24 +++++++++----------
 projects/ng-datatable/package.json            |  2 +-
 .../src/lib/ng-datatable.component.html       |  4 ++--
 .../src/lib/ng-datatable.component.ts         |  9 +++++++
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index b9d3349..297048a 100644
--- a/README.md
+++ b/README.md
@@ -132,15 +132,15 @@ 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             |
-| 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     |
-| width: string              | CSS width property              |
+| 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 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         |
+| width: string              | CSS width property                  |
diff --git a/projects/ng-datatable/package.json b/projects/ng-datatable/package.json
index cd6b5b7..f64248a 100644
--- a/projects/ng-datatable/package.json
+++ b/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": {
diff --git a/projects/ng-datatable/src/lib/ng-datatable.component.html b/projects/ng-datatable/src/lib/ng-datatable.component.html
index 62e52e2..2604946 100644
--- a/projects/ng-datatable/src/lib/ng-datatable.component.html
+++ b/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>
diff --git a/projects/ng-datatable/src/lib/ng-datatable.component.ts b/projects/ng-datatable/src/lib/ng-datatable.component.ts
index 90c2b69..142daea 100644
--- a/projects/ng-datatable/src/lib/ng-datatable.component.ts
+++ b/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();