diff --git a/paper-datatable-column.html b/paper-datatable-column.html
index 656c694..b0c57c7 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')
 					 *
@@ -248,7 +256,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
@@ -334,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{
@@ -345,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'){
diff --git a/paper-datatable.html b/paper-datatable.html
index d1c8907..2715886 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>
@@ -586,39 +588,43 @@
 							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);
+									// 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{
 										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 +635,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;
 									}
 								}
@@ -667,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();
@@ -677,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){
@@ -887,14 +894,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)));
@@ -1088,6 +1096,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{