From a102d480734995777762f73737d8ff1f94b3c80d Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Fri, 14 Oct 2016 09:43:45 +0200
Subject: [PATCH 1/7] added accessor to data-columns as a way to access nested
 data values

---
 paper-datatable-column.html | 10 +++++++++-
 paper-datatable.html        | 29 +++++++++++++++--------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/paper-datatable-column.html b/paper-datatable-column.html
index 656c694..38df103 100644
--- a/paper-datatable-column.html
+++ b/paper-datatable-column.html
@@ -248,7 +248,15 @@
 					 *
 					 * @type Number in px or String
 					 */
-					width: Object
+					width: Object,
+
+					/**
+					 * `accessor` a function for accessing the row value 
+					 * example: function(rowData) {return rowdata.value.count;}
+					 */
+					 accessor: {
+					 	type: Function
+					 }
 				},
 				behaviors: [
 					Polymer.Templatizer
diff --git a/paper-datatable.html b/paper-datatable.html
index d1c8907..60dbfb6 100644
--- a/paper-datatable.html
+++ b/paper-datatable.html
@@ -586,39 +586,40 @@
 							var rowData = this.get(['data',row.dataset.key]);
 
 							var cells = Polymer.dom(row).querySelectorAll('.bound-cell');
+							var dataColumn;
 
 							cells.forEach((cell) => {
 
-								if(!cell.dataColumn){
+								if(!(dataColumn = cell.dataColumn)){
 									console.log(cell);
 								}
 
 								var isEmpty = cell.hasAttribute('data-empty');
 								var isWrongRow = cell.getAttribute('data-row-key') !== row.dataset.key;
-								var isWrongColumn = cell.dataColumn !== cell.dataBoundColumn;
+								var isWrongColumn = dataColumn !== cell.dataBoundColumn;
 
 								if(isEmpty || isWrongRow || isWrongColumn){
 									cell.removeAttribute('data-empty');
-									var prop = cell.dataColumn.property;
-									var data = rowData[prop];
+									var prop = dataColumn.property;
+									var data = dataColumn.accessor ? dataColumn.accessor(rowData, prop) : rowData[prop];
 
 									cell.setAttribute('data-row-key', row.dataset.key);
-									cell.dataBoundColumn = cell.dataColumn;
+									cell.dataBoundColumn = dataColumn;
 
-									if(cell.dataColumn.cellStyle.length > 0){
-										cell.setAttribute('style', cell.dataColumn.cellStyle);
+									if(dataColumn.cellStyle.length > 0){
+										cell.setAttribute('style', dataColumn.cellStyle);
 									}else{
 										cell.setAttribute('style', '');
 									}
-									if(cell.style['text-align'] == '' && cell.dataColumn.align){
-										cell.style['text-align'] = cell.dataColumn.align;
+									if(cell.style['text-align'] == '' && dataColumn.align){
+										cell.style['text-align'] = dataColumn.align;
 									}
-									//if(cell.style['min-width'] == '' && cell.dataColumn.width){
-									//	cell.style['min-width'] = cell.dataColumn.width;
+									//if(cell.style['min-width'] == '' && dataColumn.width){
+									//	cell.style['min-width'] = dataColumn.width;
 									//}
 
-									if(cell.dataColumn.template && !cell.dataColumn.dialog){
-										var instance = cell.dataColumn._createCellInstance(
+									if(dataColumn.template && !dataColumn.dialog){
+										var instance = dataColumn._createCellInstance(
 												rowData,
 												row.dataset.key
 										);
@@ -629,7 +630,7 @@
 									}else{
 										if(cell.instance)
 											delete cell.instance;
-										cell.querySelector('span').innerHTML = cell.dataColumn._formatValue(data)
+										cell.querySelector('span').innerHTML = dataColumn._formatValue(data)
 										//cell.textContent = data;
 									}
 								}

From f0a28ad77752a8be84636a570528669568540b88 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Sat, 15 Oct 2016 13:00:16 +0200
Subject: [PATCH 2/7] added prop attribute to the cell so that it is easier to
 css

---
 paper-datatable.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/paper-datatable.html b/paper-datatable.html
index 60dbfb6..70b70b4 100644
--- a/paper-datatable.html
+++ b/paper-datatable.html
@@ -606,6 +606,9 @@
 									cell.setAttribute('data-row-key', row.dataset.key);
 									cell.dataBoundColumn = dataColumn;
 
+									// we add the column key as an attribute for easier css rules (e.g. ::content [my-prop] {background : red;})
+									cell.setAttribute(prop, '');
+
 									if(dataColumn.cellStyle.length > 0){
 										cell.setAttribute('style', dataColumn.cellStyle);
 									}else{

From ae6301765bab59d653e0349ecc61819dec42c476 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Fri, 11 Nov 2016 13:30:23 +0100
Subject: [PATCH 3/7] added cls

---
 paper-datatable-column.html |  8 ++++++++
 paper-datatable.html        | 23 ++++++++++++++---------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/paper-datatable-column.html b/paper-datatable-column.html
index 38df103..eeed53a 100644
--- a/paper-datatable-column.html
+++ b/paper-datatable-column.html
@@ -140,6 +140,14 @@
 						type: String,
 						value: ''
 					},
+
+					/**
+					 * `cls` the class to add to th
+					 */
+					 cls: {
+					 	type: String,
+					 	value: ''
+					 },
 					/**
 					 * Convenience attribute to align the header and cell content (e.g. 'center')
 					 *
diff --git a/paper-datatable.html b/paper-datatable.html
index 70b70b4..b8bbf7e 100644
--- a/paper-datatable.html
+++ b/paper-datatable.html
@@ -18,7 +18,7 @@
 				position: relative;
 			}
 			:host([resize-behavior='overflow']) #container{
-				overflow: auto;
+				/*overflow: auto;*/
 			}
 			:host([resize-behavior='dynamic-columns']) #container{
 				overflow: auto;
@@ -249,12 +249,14 @@
 							</th>
 						</template>
 						<template id="columnRepeat" is="dom-repeat" items="{{_columns}}" as="column" on-dom-change="_columnsRendered">
-							<th class="column" data-sortable$="[[column.sortable]]" data-column="[[column]]" on-tap="_handleSort" style$="{{column._styleString}}">
-								<iron-icon icon="datatable:sort-desc-md" class="sort"></iron-icon>
-								<span id="title">{{column.header}}</span>
-								<template is="dom-if" if="[[column.tooltip]]">
-									<paper-tooltip offset="-10" fit-to-visible-bounds>{{column.tooltip}}</paper-tooltip>
-								</template>
+							<th class$="column [[column.cls]]" data-sortable$="[[column.sortable]]" data-column="[[column]]" on-tap="_handleSort" style$="{{column._styleString}}">
+								<div>
+									<iron-icon icon="datatable:sort-desc-md" class="sort"></iron-icon>
+									<span id="title">{{column.header}}</span>
+									<template is="dom-if" if="[[column.tooltip]]">
+										<paper-tooltip offset="-10" fit-to-visible-bounds>{{column.tooltip}}</paper-tooltip>
+									</template>
+								</div>
 							</th>
 						</template>
 					</tr>
@@ -285,7 +287,7 @@
 									</td>
 								</template>
 								<template id="cellRepeat" is="dom-repeat" items="{{_columns}}" as="column" on-dom-change="_restructureData">
-									<td data-empty class="bound-cell" data-column="{{column}}" data-editable$="{{column.editable}}" data-edit-icon$="{{column.editIcon}}" on-tap="_cellTapped">
+									<td data-empty class$="bound-cell [[column.cls]]"" data-column="{{column}}" data-editable$="{{column.editable}}" data-edit-icon$="{{column.editIcon}}" on-tap="_cellTapped">
 										<div>
 											<span></span>
 											<iron-icon icon="datatable:editable" class="editable"></iron-icon>
@@ -302,7 +304,7 @@
 									</td>
 								</template>
 								<template id="cellRepeat" is="dom-repeat" items="{{_columns}}" as="column" on-dom-change="_restructureData">
-									<td data-empty class="bound-cell" data-column="{{column}}" data-editable$="{{column.editable}}" data-edit-icon$="{{column.editIcon}}" on-tap="_cellTapped">
+									<td data-empty class$="bound-cell [[column.cls]]" data-column="{{column}}" data-editable$="{{column.editable}}" data-edit-icon$="{{column.editIcon}}" on-tap="_cellTapped">
 										<div>
 											<span></span>
 											<iron-icon icon="datatable:editable" class="editable"></iron-icon>
@@ -1092,6 +1094,9 @@
 							ths.forEach((th) => {
 								if(th.dataColumn){
 									var column = th.dataColumn;
+
+									th.setAttribute(column.property, '');
+									
 									if(th.scrollWidth > th.offsetWidth){
 										column.set('tooltip', column.header);
 									}else{

From 43d4c7b69e7aff9f2039b2a172c0debf3ed148d1 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Fri, 11 Nov 2016 13:35:37 +0100
Subject: [PATCH 4/7] allow sort for column with accessor

---
 paper-datatable.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/paper-datatable.html b/paper-datatable.html
index 70b70b4..a7d494c 100644
--- a/paper-datatable.html
+++ b/paper-datatable.html
@@ -891,14 +891,15 @@
 
 				_internalSort: function(column){
 					if(this._internalSortEnabled) {
+						var accessor = column.accessor;
 						this._rowKeys.sort(function(a, b){
 							if(column.sortDirection == 'desc'){
 								var c = a;
 								a = b;
 								b = c;
 							}
-							var valA = this._getByKey(a)[column.property];
-							var valB = this._getByKey(b)[column.property];
+							var valA = accessor ? accessor(this._getByKey(a),column.property): this._getByKey(a)[column.property];
+							var valB = accessor ? accessor(this._getByKey(b),column.property): this._getByKey(b)[column.property];
 							return column._sort(valA, valB);
 						}.bind(this));
 						this.set("_rowKeys", JSON.parse(JSON.stringify(this._rowKeys)));

From 7669e4a95fe72af4abd2faab3c231b406b088529 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Tue, 15 Nov 2016 09:40:18 +0100
Subject: [PATCH 5/7] handle change in sub properties with accessors

---
 paper-datatable.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/paper-datatable.html b/paper-datatable.html
index e7ffb28..2715886 100644
--- a/paper-datatable.html
+++ b/paper-datatable.html
@@ -673,8 +673,9 @@
 						for(var i=0; i<cells.length;i++){
 							var cell = cells[i];
 							var prop = cell.dataColumn.property;
+							var accessor = cell.dataColumn.accessor;
 
-							if(prop == path[0]){
+							if(prop == path[0] || (accessor && accessor.path && accessor.path[0] === path[0])){
 								if(cell.instance){
 									var localPath = path.slice();
 									localPath.shift();
@@ -683,7 +684,7 @@
 									cell.instance.notifyPath(instanceValuePath, change.value);
 								}
 								if(!cell.instance || cell.instanceType == 'dialog'){
-									cell.querySelector('span').innerHTML = this._columns[i]._formatValue(this.get([object, rowKey, prop]));
+									cell.querySelector('span').innerHTML = this._columns[i]._formatValue(accessor ? accessor(this.get([object, rowKey]), prop): this.get([object, rowKey, prop]));
 								}
 							}
 							if(cell.instance){

From 2ec8aab0c5d1b0ad82934ddbc5f486ff4ee19ecc Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Wed, 16 Nov 2016 18:54:08 +0100
Subject: [PATCH 6/7] handle null value the same way as undefined

---
 paper-datatable-column.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/paper-datatable-column.html b/paper-datatable-column.html
index eeed53a..9b3427a 100644
--- a/paper-datatable-column.html
+++ b/paper-datatable-column.html
@@ -350,7 +350,7 @@
 				},
 
 				_cast: function(value){
-					if(typeof value === 'undefined'){
+					if(typeof value === 'undefined' || value === null){
 						if(typeof this.default !== 'undefined'){
 							value = JSON.parse(JSON.stringify(this.default));
 						}else{

From 9a11a63d5b67048eab9f63af4f8e294f2e192d19 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@e-smile.org>
Date: Wed, 16 Nov 2016 19:22:09 +0100
Subject: [PATCH 7/7] set back to "" when number is NaN

---
 paper-datatable-column.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/paper-datatable-column.html b/paper-datatable-column.html
index 9b3427a..b0c57c7 100644
--- a/paper-datatable-column.html
+++ b/paper-datatable-column.html
@@ -361,7 +361,7 @@
 					if(this.type.toLowerCase() == 'string'){
 						return value.toString();
 					}else if(this.type.toLowerCase() == 'number'){
-						return parseFloat(value);
+						return parseFloat(value) || '';
 					}else if(this.type.toLowerCase() == 'boolean'){
 						return value ? true : false;
 					}else if(this.type.toLowerCase() == 'date'){