Added dot notation (Fixes #6)

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                  |

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();