Skip to content

added accessor to data-columns as a way to access nested data values #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
christophe-g wants to merge 8 commits into
base: master
Choose a base branch
from
Open

added accessor to data-columns as a way to access nested data values #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a102d48
added accessor to data-columns as a way to access nested data values
christophe-g Oct 14, 2016
f0a28ad
added prop attribute to the cell so that it is easier to css
christophe-g Oct 15, 2016
ae63017
added cls
christophe-g Nov 11, 2016
43d4c7b
allow sort for column with accessor
christophe-g Nov 11, 2016
96c25c5
Merge branch 'rotateColumn' into accessorFn
christophe-g Nov 11, 2016
7669e4a
handle change in sub properties with accessors
christophe-g Nov 15, 2016
2ec8aab
handle null value the same way as undefined
christophe-g Nov 16, 2016
9a11a63
set back to "" when number is NaN
christophe-g Nov 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions paper-datatable-column.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
*
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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{
Expand All @@ -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'){
Expand Down
65 changes: 38 additions & 27 deletions paper-datatable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
position: relative;
}
:host([resize-behavior='overflow']) #container{
overflow: auto;
/*overflow: auto;*/
}
:host([resize-behavior='dynamic-columns']) #container{
overflow: auto;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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
);
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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();
Expand All @@ -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){
Expand Down Expand Up @@ -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)));
Expand Down Expand Up @@ -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{
Expand Down