Allow nested property names

Author: RoXuS

demo/paper-datatable/playground.html

@@ -55,7 +55,17 @@
 							</template>
 						</paper-datatable-column>
 					</paper-datatable>
-				</paper-card>
+			</paper-card>
+
+			<paper-card>
+				<paper-datatable data="{{data}}" selectable>
+					<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" tooltip="Some title" sortable>	</paper-datatable-column>
+					<paper-datatable-column header="Object a" property="complexObj.a" tooltip="The total amount of..." sortable>
+					</paper-datatable-column>
+					<paper-datatable-column header="Object b" property="complexObj.b" tooltip="The total amount of..." sortable>
+					</paper-datatable-column>
+				</paper-datatable>
+			</paper-card>
 
 				<paper-card>
 					<paper-datatable data="{{data}}" selectable multi-selection>
@@ -81,6 +91,18 @@
 								</template>
 							</template>
 						</paper-datatable-column>
+						<paper-datatable-column header="Object Single element" property="complexObj.b" tooltip="The total amount of..." sortable>
+							<template>
+								<paper-input value="{{value}}"></paper-input>
+							</template>
+						</paper-datatable-column>
+						<paper-datatable-column header="Very Complexe Object" property="veryComplexObj.a.x" tooltip="The total amount of..." sortable>
+							<template>
+								<template is="dom-repeat" items="{{value}}" as="valueItem">
+									<paper-input value="{{valueItem}}"></paper-input>
+								</template>
+							</template>
+						</paper-datatable-column>
 					</paper-datatable>
 				</paper-card>
 
@@ -93,6 +115,7 @@
 						<paper-datatable-column header="Complex Array" property="complexArr" type="Array" array-display-prop="title"></paper-datatable-column>
 						<paper-datatable-column id="dateTest" header="Created" property="created" type="Date" sortable format-value="{{formatDate}}"></paper-datatable-column>
 						<paper-datatable-column id="dateTest" header="Created" property="created" type="Date" sortable></paper-datatable-column>
+						</paper-datatable-column>
 					</paper-datatable>
 				</paper-card>
 
@@ -109,9 +132,9 @@
 				return this.get(path);
 			};
 			app.data = [
-				{title: 'Ice cream', yummy: true, calories: 2000, complexObj: {a: 'b', b: 'd'}, arr: [2,3,4], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447315235838)},
-				{title: 'Dessert', yummy: true, calories: 3000, complexObj: {a: 'bb', b: 'dd'}, arr: [5,6], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447155235838)},
-				{title: 'Cake', yummy: false, calories: 4000, complexObj: {a: 'cc', b: 'gg'}, arr: [7,8], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447355135838)}
+				{title: 'Ice cream', yummy: true, calories: 2000, veryComplexObj: {a: {x: ['b', 'c']}}, complexObj: {a: 'b', b: 'd'}, arr: [2,3,4], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447315235838)},
+				{title: 'Dessert', yummy: true, calories: 3000, veryComplexObj: {a: {x: ['b', 'c']}}, complexObj: {a: 'bb', b: 'dd'}, arr: [5,6], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447155235838)},
+				{title: 'Cake', yummy: false, calories: 4000, veryComplexObj: {a: {x: ['b', 'c']}}, complexObj: {a: 'cc', b: 'gg'}, arr: [7,8], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447355135838)}
 			];
 			app.log = function(ev){
 				console.info('event', ev.type, 'on', ev.target, 'with detail', ev.detail);

paper-datatable-column.html

@@ -286,10 +286,14 @@
 				},
 
 				_createCellInstance: function(model, notificationKey){
-					if(typeof model[this.property] == 'undefined' && typeof this.default !== 'undefined'){
+					var modelDefined = model[this.property];
+					if (!modelDefined && this.property) {
+						this.property.split('.').forEach(key => modelDefined = modelDefined ? modelDefined[key] : model[key]);
+					}
+					if(modelDefined == 'undefined' && typeof this.default !== 'undefined'){
 						var instance = this.stamp({item: model, column:this, value: this.default, _dataKey: notificationKey});
 					}else{
-						var instance = this.stamp({item: model, column:this, value: model[this.property], _dataKey: notificationKey});
+						var instance = this.stamp({item: model, column:this, value: modelDefined, _dataKey: notificationKey});
 					}
 					return instance;
 				},

paper-datatable.html

@@ -601,6 +601,9 @@
 									cell.removeAttribute('data-empty');
 									var prop = cell.dataColumn.property;
 									var data = rowData[prop];
+									if (!data && prop) {
+										prop.split('.').forEach(key => data = data ? data[key] : rowData[key]);
+									}
 
 									cell.setAttribute('data-row-key', row.dataset.key);
 									cell.dataBoundColumn = cell.dataColumn;