├── .gitignore
├── .npmignore
├── index.html
├── demo
    ├── index.html
    ├── miscellaneous
    │   ├── bwt-datatable-edit-dialog.html
    │   ├── icons.html
    │   ├── light.html
    │   ├── events.html
    │   └── theming.html
    ├── libs
    │   └── relativeDate.js
    ├── paper-datatable
    │   ├── race.html
    │   ├── sorting.html
    │   ├── mobile.html
    │   ├── index.html
    │   ├── bindings.html
    │   ├── switching-datas.html
    │   ├── filter.html
    │   ├── playground.html
    │   ├── editable.html
    │   ├── dynamic-columns.html
    │   └── resize-behavior.html
    ├── data
    │   ├── fakeDB.js
    │   └── users.json
    └── paper-datatable-card
    │   ├── playground.html
    │   ├── index.html
    │   └── full-implementation.html
├── images
    ├── icon.png
    ├── screenshot.png
    ├── header-fixed.gif
    └── bwt-datatable-mobile.png
├── src
    ├── whatever.js
    ├── collectionHelpers.js
    └── weakCache.js
├── docs
    ├── api.html
    ├── events.md
    ├── browser-support.md
    ├── installation.md
    ├── getting-started-with-data-table-cards.md
    ├── docs.html
    ├── styling.md
    ├── getting-started.md
    └── documentation-menu.html
├── test
    ├── index.html
    └── bwt-datatable.html
├── bwt-datatable-styles.js
├── bower.json
├── datatable-icons.js
├── package.json
├── bwt-datatable-edit-dialog.js
├── README.md
├── examples
    └── your-datatable-implementation.js
├── bwt-datatable-column.js
└── bwt-datatable-card.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <script>
2 |   location.replace('./demo/');
3 | </script>


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 | <script>
2 | 	location.replace('../docs/docs.html?getting-started');
3 | </script>


--------------------------------------------------------------------------------
/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bluewatertracks/bwt-datatable/HEAD/images/icon.png


--------------------------------------------------------------------------------
/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bluewatertracks/bwt-datatable/HEAD/images/screenshot.png


--------------------------------------------------------------------------------
/images/header-fixed.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bluewatertracks/bwt-datatable/HEAD/images/header-fixed.gif


--------------------------------------------------------------------------------
/images/bwt-datatable-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bluewatertracks/bwt-datatable/HEAD/images/bwt-datatable-mobile.png


--------------------------------------------------------------------------------
/src/whatever.js:
--------------------------------------------------------------------------------
 1 | export const Whenever = () => {
 2 | 	var callbacks = [];
 3 | 	var ready = false;
 4 | 	var args;
 5 | 	return {
 6 | 		get state(){
 7 | 			return {
 8 | 				ready: ready,
 9 | 				args: args,
10 | 				pendingCallbacks: callbacks.length
11 | 			};
12 | 		},
13 | 		ready() {
14 | 			args = arguments;
15 | 			callbacks.forEach(function(callback){
16 | 				callback.apply(this, args);
17 | 			});
18 | 			callbacks = [];
19 | 			ready = true;
20 | 		},
21 | 		whenReady(callback) {
22 | 			if(ready){
23 | 				callback.apply(this, args);
24 | 			}else{
25 | 				callbacks.push(callback);
26 | 			}
27 | 		}
28 | 	}
29 | };


--------------------------------------------------------------------------------
/docs/api.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>API Reference</title>
 6 | 
 7 | 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<link rel="import" href="../../polymer/polymer.html">
 9 | 		<link rel="import" href="../../paper-card/paper-card.html">
10 | 		<link rel="import" href="../bwt-datatable.html">
11 | 		<link rel="import" href="../documentation-menu.html">
12 | 		<link rel="import" href="../../iron-component-page/iron-component-page.html">
13 | 
14 | 	</head>
15 | 	<body>
16 | 
17 | 		<demo-menu>
18 | 			<iron-component-page id="ironComponentPage" catalog></iron-component-page>
19 | 		</demo-menu>
20 | 
21 | 		<script>
22 | 			var element = location.search.replace('?', '');
23 | 			var icp = document.getElementById('ironComponentPage');
24 | 			icp.setAttribute('active', 'bwt-'+element);
25 | 			icp.setAttribute('src', '../bwt-'+element+'.html');
26 | 		</script>
27 | 
28 | 	</body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | <head>
13 |   <meta charset="UTF-8">
14 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 |   <title>bwt-datatable tests</title>
16 |   <script src="../../web-component-tester/browser.js"></script>
17 | </head>
18 | <body>
19 |   <script>
20 |     WCT.loadSuites([
21 |       'bwt-datatable.html',
22 |       'bwt-datatable-card.html'
23 |     ]);
24 |   </script>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/demo/miscellaneous/bwt-datatable-edit-dialog.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 		<title></title>
 5 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 6 | 		<script>
 7 | 			window.Polymer = window.Polymer || {};
 8 | 			window.Polymer.dom = 'shadow';
 9 | 		</script>
10 | 		<link rel="import" href="../../../polymer/polymer.html">
11 | 		<link rel="import" href="../../../paper-input/paper-input.html">
12 | 		<link rel="import" href="../../../paper-input/paper-textarea.html">
13 | 		<link rel="import" href="../../../iron-input/iron-input.html">
14 | 		<link rel="import" href="../../bwt-datatable-edit-dialog.html">
15 | 	</head>
16 | 	<body>
17 | 		<template is="dom-bind" id="app">
18 | 			<paper-datatable-edit-dialog id="dialog" visible>
19 | 				<paper-input name="haha" label="test" no-label-float char-counter maxlength="100"></paper-input>
20 | 				<!--<paper-textarea no-label-float char-counter maxlength="100"></paper-textarea>-->
21 | 			</paper-datatable-edit-dialog>
22 | 
23 | 			<button on-tap="focus">Focus</button>
24 | 		</template>
25 | 		<script>
26 | 			var app = document.querySelector('#app');
27 | 			app.focus = function(){
28 | 				app.$.dialog.findFocus();
29 | 			}
30 | 		</script>
31 | 	</body>
32 | </html>


--------------------------------------------------------------------------------
/src/collectionHelpers.js:
--------------------------------------------------------------------------------
 1 | export class CollectionHelpers {
 2 |     constructor(data) {
 3 |         this.store = data.slice();
 4 |         this._initMap();
 5 |     }
 6 | 
 7 |     getItem (key) {
 8 |         if (key = this._parseKey(key)) {
 9 |             return this.store[key];
10 |         }
11 |     }
12 | 
13 |     getKey (item) {
14 |         let key;
15 |         if (item && typeof item == 'object') {
16 |             key = this.omap.get(item);
17 |         } else {
18 |             key = this.pmap[item];
19 |         }
20 |         if (key != undefined) {
21 |             return '#' + key;
22 |         }
23 |     }
24 | 
25 |     getKeys () {
26 |         return Object.keys(this.store).map((key) => {
27 |             return '#' + key;
28 |         });
29 |     }
30 | 
31 |     _initMap () {
32 |         this.omap = new WeakMap();
33 |         this.pmap = {};
34 |         var s = this.store;
35 |         this.store.forEach((item, index)=>{
36 |             if (item && typeof item == 'object') {
37 |                 this.omap.set(item, index);
38 |             } else {
39 |                 this.pmap[item] = index;
40 |             }
41 |         });
42 |     }
43 | 
44 |     _parseKey (key) {
45 |         if (key && key[0] === '#') {
46 |             return key.slice(1);
47 |         }
48 |     }
49 | }


--------------------------------------------------------------------------------
/src/weakCache.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  IMPORTANT: Right now this Cache is **not** weak in the sense that it discards items based memory pressure, however
 3 |  it is written in a way that will allow this later to be added without rewriting the rest of the code and right now
 4 |  'emulates' the behaviour by having a fixed maximum of items.
 5 |  */
 6 | export class WeakCache {
 7 |     constructor(limit) {
 8 |         this.limit = limit;
 9 |         this.values = [];
10 |         this.keys = [];
11 |     }
12 |     set (key, obj) {
13 |         var index = this.keys.indexOf(key);
14 |         if(index  > -1){
15 |             this.values[index] = obj;
16 |             this.values.splice(this.values.length, 0, this.values.splice(index, 1)[0]);
17 |             this.keys.splice(this.keys.length, 0, this.keys.splice(index, 1)[0]);
18 |         }else{
19 |             this.keys.push(key);
20 |             this.values.push(obj);
21 |             if(this.keys.length > this.limit){
22 |                 this.keys.shift();
23 |                 this.values.shift();
24 |             }
25 |         }
26 |     }
27 |     has (key){
28 |         return this.keys.indexOf(key) > -1;
29 |     }
30 |     get (key){
31 |         var index = this.keys.indexOf(key);
32 |         return this.values[index];
33 |     }
34 |     delete (key){
35 |         var index = this.keys.indexOf(key);
36 |         this.values.splice(index, 1);
37 |         this.keys.splice(index, 1);
38 |     }
39 | }


--------------------------------------------------------------------------------
/docs/events.md:
--------------------------------------------------------------------------------
 1 | Events
 2 | ===
 3 | All properties with a `notifies` label in the API references will trigger a `propertyName-changed` event. Beyond that the
 4 | element also exposes a few custom events which are documented here. One of the best ways to find events is
 5 | simply be exploring the [event explorer](../demo/events.html).
 6 | 
 7 | `<paper-datatable>` and `<paper-datatable-column>`
 8 | ===
 9 | Taps
10 | ---
11 | 
12 |  - `row-tap` is triggered when a user taps anywhere on a row. The `item` of the row can be found in the `detail` object.
13 |    This event can be cancelled using `event.preventDefault()` which will prevent the row from getting selected. 
14 |  - `cell-tap` on `<paper-datatable>` is triggered whenever any cell is tapped containing both the `item` and `column` in
15 |    the `detail` object.
16 |  - `cell-tap` on `<paper-datatable-column>` is triggered whenever a cell in that column is tapped. It contains only the 
17 |    `item` of the current row.
18 | 
19 | Selections
20 | ---
21 | 
22 |  - `selection-changed` is a generic event when the selection changes and exposes added or removed items from the selection.
23 |  - `toggle-all` is triggered when the 'toggle all' checkbox is tapped and can be cancelled.
24 |   
25 | Other
26 | ---
27 |  - `sort` is triggered when a column is tapped and can be cancelled.
28 | 
29 | `<paper-datatable-card>`
30 | ===
31 | Doesn't expose any special events beyond the standard Polymer `*-changed` events which you can find in the API reference.


--------------------------------------------------------------------------------
/demo/libs/relativeDate.js:
--------------------------------------------------------------------------------
 1 | /* from https://github.com/azer/relative-date */
 2 | 
 3 | var relativeDate = (function(undefined){
 4 | 
 5 | 	var SECOND = 1000,
 6 | 		MINUTE = 60 * SECOND,
 7 | 		HOUR = 60 * MINUTE,
 8 | 		DAY = 24 * HOUR,
 9 | 		WEEK = 7 * DAY,
10 | 		YEAR = DAY * 365,
11 | 		MONTH = YEAR / 12;
12 | 
13 | 	var formats = [
14 | 		[ 0.7 * MINUTE, 'just now' ],
15 | 		[ 1.5 * MINUTE, 'a minute ago' ],
16 | 		[ 60 * MINUTE, 'minutes ago', MINUTE ],
17 | 		[ 1.5 * HOUR, 'an hour ago' ],
18 | 		[ DAY, 'hours ago', HOUR ],
19 | 		[ 2 * DAY, 'yesterday' ],
20 | 		[ 7 * DAY, 'days ago', DAY ],
21 | 		[ 1.5 * WEEK, 'a week ago'],
22 | 		[ MONTH, 'weeks ago', WEEK ],
23 | 		[ 1.5 * MONTH, 'a month ago' ],
24 | 		[ YEAR, 'months ago', MONTH ],
25 | 		[ 1.5 * YEAR, 'a year ago' ],
26 | 		[ Number.MAX_VALUE, 'years ago', YEAR ]
27 | 	];
28 | 
29 | 	function relativeDate(input,reference){
30 | 		!reference && ( reference = (new Date).getTime() );
31 | 		reference instanceof Date && ( reference = reference.getTime() );
32 | 		input instanceof Date && ( input = input.getTime() );
33 | 
34 | 		var delta = reference - input,
35 | 			format, i, len;
36 | 
37 | 		for(i = -1, len=formats.length; ++i < len; ){
38 | 			format = formats[i];
39 | 			if(delta < format[0]){
40 | 				return format[2] == undefined ? format[1] : Math.round(delta/format[2]) + ' ' + format[1];
41 | 			}
42 | 		};
43 | 	}
44 | 
45 | 	return relativeDate;
46 | 
47 | })();
48 | 
49 | if(typeof module != 'undefined' && module.exports){
50 | 	module.exports = relativeDate;
51 | }


--------------------------------------------------------------------------------
/docs/browser-support.md:
--------------------------------------------------------------------------------
 1 | Supported browsers
 2 | ===
 3 | First of all let's be clear about one thing here: This data table is in certain ways more complex than anything out there.
 4 | To make this component possible at all cutting edge libraries like Polymer were used and support were limited to 
 5 | the newest version of browsers that actually care about implementing new technologies, so this left us the following
 6 | browsers:
 7 | 
 8 |  - Chrome (Primary target)
 9 |  - Edge
10 |  - Firefox
11 |  - Opera
12 | 
13 | Which covers more than three quarters of users and seems quite acceptable as data tables are mostly used on
14 | back end/admin systems where it's relatively more OK to instruct users to use certain browsers. Notable not supported
15 | browsers are IE and Safari. IE because it doesn't support *a lot* of new technologies and Edge is practically the newest
16 | version of IE. Safari because it's consistently lagging behind other browsers in technology adoption<sup>1</sup>
17 | and because buying Apple products is a conscious decision to buy into a closed ecosystem on which outsiders can not
18 | develop and test.
19 | 
20 | <sup>1</sup> <small>Some stats to back this up: caniuse.com is a site which covers technology adoption in browsers. Considering JS API's
21 |   Safari only supports 50% (like IE) of the covered API's compared to the next worst browser (Edge) which covers 71%.
22 |   And just for comparisons sake the most recent versions of Firefox cover 89% and Chrome 82%. That's simply a HUGE
23 |   difference.</small>


--------------------------------------------------------------------------------
/demo/miscellaneous/icons.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>Custom datatable `iron-iconset`</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
14 | 		<link rel="import" href="../../datatable-icons.html">
15 | 
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 	</head>
19 | 	<body>
20 | 		<template is="dom-bind" id="app">
21 | 			<demo-menu>
22 | 				<paper-icon-button icon="datatable:sort-desc-md"></paper-icon-button>
23 | 				<paper-icon-button icon="datatable:sort-asc-md"></paper-icon-button>
24 | 				<paper-icon-button icon="datatable:sort-desc"></paper-icon-button>
25 | 				<paper-icon-button icon="datatable:sort-asc"></paper-icon-button>
26 | 				<paper-icon-button icon="datatable:first-page"></paper-icon-button>
27 | 				<paper-icon-button icon="datatable:prev-page"></paper-icon-button>
28 | 				<paper-icon-button icon="datatable:next-page"></paper-icon-button>
29 | 				<paper-icon-button icon="datatable:last-page"></paper-icon-button>
30 | 				<paper-icon-button icon="datatable:editable"></paper-icon-button>
31 | 			</demo-menu>
32 | 		</template>
33 | 
34 | 		<script>
35 | 			var app = document.querySelector('#app');
36 | 
37 | 		</script>
38 | 
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/docs/installation.md:
--------------------------------------------------------------------------------
 1 | paper Datatable
 2 | ===
 3 | An implementation of [material design data tables](https://www.google.com/design/spec/components/data-tables.html)
 4 | for [modern web browsers](?browser-support) and inherited from [David Mulder paper-datatable](http://github.com/David-Mulder/paper-datatable).  It can be found on GitHub over 
 5 | [here](https://github.com/bluewatertracks/bwt-datatable).
 6 | 
 7 | Installation
 8 | ===
 9 | The element can be installed using bower using
10 | 
11 | 	bower install --save bwt-datatable
12 | 
13 | Important: If you wish to use `<paper-datatable-card>` you need the paper elements listed in `devDependencies` as well. They are not listed as normal dependencies to prevent them from being pulled in on production if you do not need them.
14 | 
15 | License
16 | ===
17 | 
18 | This program is free software: you can redistribute it and/or modify
19 | it under the terms of the GNU General Public License version 3 of the License as published by
20 | the Free Software Foundation.
21 | 
22 | This program is distributed in the hope that it will be useful,
23 | but WITHOUT ANY WARRANTY; without even the implied warranty of
24 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
25 | GNU General Public License for more details.
26 | 
27 | This project uses a fair share license construction, if you wish to use this project commercially you will likely want to
28 | continue reading [here](https://github.com/David-Mulder/fair-share-license/blob/master/CONTRIBUTING.md). If you wish to
29 | donate please contact me personally.
30 | 


--------------------------------------------------------------------------------
/bwt-datatable-styles.js:
--------------------------------------------------------------------------------
 1 | import '../@polymer/polymer/polymer-legacy.js';
 2 | import '../@polymer/font-roboto/roboto.js';
 3 | import '../@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 4 | const $_documentContainer = document.createElement('template');
 5 | 
 6 | $_documentContainer.innerHTML = `<dom-module id="paper-datatable-styles">
 7 | 	<template>
 8 | 		<custom-style>
 9 | 			<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
10 | 			<style is="custom-style">
11 | 				table{
12 | 					width: 100%;
13 | 					border-spacing: 0px;
14 | 					border-collapse: seperate;
15 | 				}
16 | 				table.card{
17 | 					background: white;
18 | 					@apply --shadow-elevation-2dp;
19 | 					border-radius: 2px;
20 | 				}
21 | 				th {
22 | 					font-size: 12px;
23 | 					color: rgba(0,0,0,.54);
24 | 					@apply --paper-font-common-base;
25 | 					@apply --paper-font-common-nowrap;
26 | 					font-weight: 500;
27 | 					text-align: left;
28 | 					height: 56px;
29 | 					padding-left: 26px;
30 | 					padding-right: 26px;
31 | 				}
32 | 				tr {
33 | 					height: 48px;
34 | 				}
35 | 				td {
36 | 					font-size: 13px;
37 | 					font-weight: normal;
38 | 					color: rgba(0,0,0,.87);
39 | 					padding-left: 26px;
40 | 					padding-right: 26px;
41 | 					border-top: 1px solid var(--paper-datatable-divider-color, var(--divider-color));
42 | 				}
43 | 				tr:hover td{
44 | 					background: #EEEEEE;
45 | 				}
46 | 			</style>
47 | 		</custom-style>
48 | 	</template>
49 | </dom-module>`;
50 | 
51 | document.head.appendChild($_documentContainer.content);
52 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bwt-datatable",
 3 |   "version": "3.0.0",
 4 |   "authors": [
 5 |     "Blue Water Tracks"
 6 |   ],
 7 |   "description": "Material design data table.",
 8 |   "keywords": [
 9 |     "bwt-datatable",
10 |     "paper-datatable",
11 |     "web-components",
12 |     "polymer",
13 |     "data-table"
14 |   ],
15 |   "main": [
16 |     "bwt-datatable.html",
17 |     "bwt-datatable-card.html"
18 |   ],
19 |   "license": "http://www.gnu.org/licenses/gpl-3.0.en.html",
20 |   "homepage": "https://github.com/bluewatertracks/bwt-datatable",
21 |   "ignore": [
22 |     "/.*",
23 |     "/test/"
24 |   ],
25 |   "dependencies": {
26 |     "polymer": "Polymer/polymer#^2.0.0",
27 |     "paper-material": "^2.0.0",
28 |     "paper-item": "^2.0.0",
29 |     "paper-icon-button": "^2.0.1",
30 |     "paper-checkbox": "^2.0.1",
31 |     "paper-tooltip": "^2.0.1",
32 |     "paper-styles": "^2.0.0",
33 |     "whenever.js": "~0.0.1",
34 |     "iron-form": "^2.0.1",
35 |     "iron-media-query": "^2.0.0",
36 |     "iron-scroll-target-behavior": "^2.0.0",
37 |     "paper-listbox": "^2.0.0",
38 |     "paper-dropdown-menu": "^2.0.0",
39 |     "paper-progress": "^2.0.1"
40 |     },
41 |   "devDependencies": {
42 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
43 |     "paper-card": "PolymerElements/paper-card#~1.0.7",
44 |     "web-component-tester": "*",
45 |     "paper-input": "PolymerElements/paper-input#~1.0.18",
46 |     "paper-header-panel": "^1.1.7",
47 |     "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.11",
48 |     "paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
49 |     "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.1.5",
50 |     "google-map": "GoogleWebComponents/google-map#^1.2.0"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/datatable-icons.js:
--------------------------------------------------------------------------------
 1 | import '@polymer/iron-icons/iron-icons.js';
 2 | import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
 3 | const $_documentContainer = document.createElement('template');
 4 | 
 5 | $_documentContainer.innerHTML = `<iron-iconset-svg name="datatable" size="24">
 6 | 	<svg><defs>
 7 | 		<g id="sort-asc-md">
 8 | 			<path d="M 11.9688 6 L 18 12 L 16.9844 13 L 12.9375 9.0156 L 12.9375 17 L 11 17 L 11.0156 9.0313 L 6.9844 13 L 6 12 L 11.9688 6 Z"></path>
 9 | 		</g>
10 | 		<g id="sort-desc-md">
11 | 			<path opacity="0.8706" d="M 12.0313 18 L 6 12 L 7.0156 11 L 11.0625 14.9844 L 11.0625 7 L 13 7 L 12.9844 14.9688 L 17.0156 11 L 18 12 L 12.0313 18 Z"></path>
12 | 		</g>
13 | 		<g id="sort-desc"><path d="M7 10l5 5 5-5z"></path></g>
14 | 		<g id="sort-asc"><path d="M7 14l5-5 5 5z"></path></g>
15 | 		<g id="prev-page"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g>
16 | 		<g id="next-page"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
17 | 		<g id="first-page">
18 | 			<path d="M 16.1563 6.3281 L 10 12 L 16.125 17.5625 L 17.2969 16.2969 L 12.8125 12.0156 L 17.3125 7.7344 L 16.1563 6.3281 Z"></path>
19 | 			<path d="M 7 6.75 L 8.9688 6.75 L 8.9688 17.2188 L 6.9688 17.2188 L 7 6.75 Z"></path>
20 | 		</g>
21 | 		<g id="last-page">
22 | 			<path d="M 8.1178 18 L 14.0695 11.9416 L 8.148 6 L 7.0151 7.3519 L 11.3505 11.9249 L 7 16.4979 L 8.1178 18 Z"></path>
23 | 			<path d="M 16.9698 17.5494 L 15.0665 17.5494 L 15.0665 6.3672 L 17 6.3672 L 16.9698 17.5494 Z"></path>
24 | 		</g>
25 | 		<g id="editable"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
26 | 	</defs></svg>
27 | </iron-iconset-svg>`;
28 | 
29 | document.head.appendChild($_documentContainer.content);
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "description": "Material design data table.",
 3 |     "keywords": [
 4 |         "bwt-datatable",
 5 |         "paper-datatable",
 6 |         "web-components",
 7 |         "polymer",
 8 |         "data-table"
 9 |     ],
10 |     "repository": {
11 |         "type": "git",
12 |         "url": "https://github.com/bluewatertracks/bwt-datatable"
13 |     },
14 |     "homepage": "https://github.com/bluewatertracks/bwt-datatable",
15 |     "name": "bwt-datatable",
16 |     "version": "3.0.0",
17 |     "author": "Blue Water Tracks",
18 |     "license": "AGPL-3.0-only",
19 |     "files": [],
20 |     "main": "bwt-datatable.js",
21 |     "dependencies": {
22 |         "@polymer/polymer": "^3.0.0",
23 |         "@polymer/paper-material": "^3.0.0-pre.18",
24 |         "@polymer/paper-item": "^3.0.0-pre.18",
25 |         "@polymer/paper-icon-button": "^3.0.0-pre.18",
26 |         "@polymer/paper-checkbox": "^3.0.0-pre.18",
27 |         "@polymer/paper-tooltip": "^3.0.0-pre.18",
28 |         "@polymer/paper-styles": "^3.0.0-pre.18",
29 |         "@polymer/iron-form": "^3.0.0-pre.18",
30 |         "@polymer/iron-media-query": "^3.0.0-pre.18",
31 |         "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.18",
32 |         "@polymer/paper-listbox": "^3.0.0-pre.18",
33 |         "@polymer/paper-dropdown-menu": "^3.0.0-pre.18",
34 |         "@polymer/paper-progress": "^3.0.0-pre.18"
35 |     },
36 |     "devDependencies": {
37 |         "@polymer/iron-component-page": "^3.0.0-pre.18",
38 |         "@polymer/paper-card": "^3.0.0-pre.18",
39 |         "wct-browser-legacy": "^1.0.1",
40 |         "@polymer/paper-input": "^3.0.0-pre.18",
41 |         "@polymer/paper-header-panel": "^3.0.0-pre.18",
42 |         "@polymer/paper-drawer-panel": "^3.0.0-pre.18",
43 |         "@polymer/paper-dialog": "^3.0.0-pre.18",
44 |         "@polymer/paper-dialog-scrollable": "^3.0.0-pre.18"
45 |     },
46 |     "resolutions": {
47 |         "inherits": "2.0.3",
48 |         "samsam": "1.1.3",
49 |         "supports-color": "3.1.2",
50 |         "type-detect": "1.0.0"
51 |     }
52 | }


--------------------------------------------------------------------------------
/demo/miscellaneous/light.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>Lightweight CSS-only MD tables</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-styles.html">
15 | 
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 		<style is="custom-style">
19 | 
20 | 			body{
21 | 				overflow:hidden;
22 | 			}
23 | 
24 | 			paper-card{
25 | 				display:block;
26 | 				max-width: 800px;
27 | 				margin: auto;
28 | 				padding: 20px;
29 | 			}
30 | 
31 | 			table{
32 | 				max-width: 800px;
33 | 				margin: auto;
34 | 				margin-bottom: 20px;
35 | 			}
36 | 			code{
37 | 				background: rgb(250,250,250);
38 | 			}
39 | 			paper-card pre {
40 | 				overflow: auto;
41 | 				margin: 10px -20px;
42 | 				padding: 20px;
43 | 				background: rgb(250,250,250);
44 | 				border-top: 1px solid rgb(230, 230, 230);
45 | 				border-bottom: 1px solid rgb(230, 230, 230);
46 | 			}
47 | 		</style>
48 | 
49 | 	</head>
50 | 	<body>
51 | 
52 | 			<style is="custom-style" include="paper-datatable-styles"></style>
53 | 
54 | 			<demo-menu>
55 | 				<table class="card">
56 | 					<thead>
57 | 						<tr>
58 | 							<th>Column 1</th>
59 | 							<th>Column 2</th>
60 | 						</tr>
61 | 					</thead>
62 | 					<tbody>
63 | 						<tr>
64 | 							<td>Cell 1</td>
65 | 							<td>Cell 2</td>
66 | 						</tr>
67 | 						<tr>
68 | 							<td>Cell 1</td>
69 | 							<td>Cell 2</td>
70 | 						</tr>
71 | 					</tbody>
72 | 				</table>
73 | 
74 | 				<paper-card>
75 | 					The above is a simple <code>&lt;table&gt;</code> element after including
76 | 					<code>paper-datable-styles</code> using:
77 | 
78 | 					<pre><code><span>&lt;style</span> <span style="color: #690;">is=</span><span style="color: #07a;">"custom-style"</span> <span style="color: #690;">include=</span><span style="color: #07a;">"paper-datatable-styles"</span>&gt;&lt;/style&gt;</code></pre>
79 | 
80 | 					with <code>class="card"</code> added for a simple MD card design.
81 | 				</paper-card>
82 | 			</demo-menu>
83 | 
84 | 
85 | 	</body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/demo/paper-datatable/race.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title></title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 	</head>
19 | 	<body>
20 | 
21 | 		<template is="dom-bind" id="app">4
22 | 			<custom-style>
23 | 				<style is="custom-style">
24 | 					paper-card {
25 | 						--paper-card-header-text: {
26 | 							font-family: 'Roboto', 'Noto', sans-serif;
27 | 							font-weight: normal;
28 | 							font-size: 20px;
29 | 						}
30 | 					}
31 | 				</style>
32 | 			</custom-style>
33 | 			<demo-menu>
34 | 
35 | 				<paper-card heading="Race rankings">
36 | 					<paper-datatable data="{{data}}" selectable multi-selection>
37 | 						<paper-datatable-column header="Contestant" property="name" type="String" sortable></paper-datatable-column>
38 | 						<template is="dom-repeat" items="{{legs}}">
39 | 							<paper-datatable-column header="Leg {{item}} Rank" property="leg-{{item}}" type="Object" sortable sort="{{customSortByRank}}">
40 | 								<template>
41 | 									<span>{{value.rank}}</span>
42 | 								</template>
43 | 							</paper-datatable-column>
44 | 							<paper-datatable-column header="Leg {{item}} Time" property="leg-{{item}}" type="Object" sortable sort="{{customSortByTime}}">
45 | 								<template>
46 | 									<span>{{value.time}}</span>
47 | 								</template>
48 | 							</paper-datatable-column>
49 | 						</template>
50 | 					</paper-datatable>
51 | 				</paper-card>
52 | 
53 | 		</template>
54 | 
55 | 		<script>
56 | 			var app = document.querySelector('#app');
57 | 			var data = [
58 | 				{
59 | 					name: 'Me',
60 | 					legs: [
61 | 						{ time: 45, rank: 1},
62 | 						{ time: 30, rank: 2},
63 | 						{ time: 35, rank: 2}
64 | 					]
65 | 				},
66 | 				{
67 | 					name: 'You',
68 | 					legs: [
69 | 						{ time: 50, rank: 2},
70 | 						{ time: 20, rank: 1},
71 | 						{ time: 20, rank: 1}
72 | 					]
73 | 				}
74 | 			];
75 | 			var legs = [];
76 | 			data[0].legs.forEach(function(leg, i){
77 | 				data.forEach(function(contestant){
78 | 					contestant['leg-'+(i+1)] = contestant.legs[i];
79 | 				});
80 | 				legs.push(i+1);
81 | 			});
82 | 			app.legs = legs;
83 | 			app.data = data;
84 | 			app.customSortByRank = function(a,b){
85 | 				return a.rank < b.rank;
86 | 			};
87 | 			app.customSortByTime = function(a,b){
88 | 				return a.time < b.time;
89 | 			};
90 | 		</script>
91 | 
92 | 	</body>
93 | </html>
94 | 


--------------------------------------------------------------------------------
/docs/getting-started-with-data-table-cards.md:
--------------------------------------------------------------------------------
 1 | Getting started with data tables in cards
 2 | ===
 3 | This documentation still isn't as complete as I would like it to be, so if anything is unclear please start with checking
 4 | out the source code from the demo's.
 5 | 
 6 | Data sources
 7 | ---
 8 | This component uses an object with a set number of functions to retrieve and save data. A `data-source` looks like
 9 | 
10 |     {
11 |         get: function(sort, page, pageSize){ return new Promise(...) },
12 |         set: function(item, property, value){ return new Promise(...) },
13 |         length: Number
14 |     }
15 | 
16 | Alternatively you can use `queryForIds(sort, page, pageSize)` which returns an array of `ids` + `getByIds(ids)` instead
17 | of a simple `get`. Advantages are better caching, better cross page selections, but the big disadvantage is that you
18 | have two do two AJAX requests and the added complexity of the API calls.
19 | 
20 | Note: If you wonder why the functions aren't directly available to the element and instead are grouped like this, the
21 | reason for this is that this allows you to create a
22 | 
23 |     <my-api-datasource for="users" data-source="{{dataSource}}"></my-api-datasource>
24 | 
25 | object which in turn you bind to this element. I have however been considering allowing manual binding directly as well.
26 | 
27 | Using `<paper-datatable-card>` without a `data-source`
28 | ===
29 | Sometimes it might make sense to do your own implementation of pagination. Sadly extending custom elements is not possible
30 | yet, but you can simply use a `<paper-datatable-card>` without a `data-source` and next listen for events like
31 | `page-changed`, `sort`, etc. to handle all the data switchery. It's good to note that a lot of events (like `sort`) do 
32 | support `event.preventDefault()`.
33 | 
34 | Toolbars
35 | ===
36 | Main toolbar
37 | ---
38 | The main toolbar is located to the right of the heading and can be filled by specifying an element with `slot="toolbar-main"`.
39 | 
40 | 	<div slot="toolbar-main">
41 | 	 	<paper-input value="{{searchQuery}}">
42 | 		<paper-icon-button icon="search" on-tap="search"></paper-icon-button>
43 | 	</div>
44 | 
45 | Selection toolbar
46 | ---
47 | The selection toolbar is shown when any items are selected and shows the number of selected items. Items in the toolbar
48 | can be specified by adding an element with `slot="toolbar-select"`. Additionally it's often required to show different icons
49 | when a single item is selected from when multiple items are selected. For this there exists `slot="toolbar-select-single"`
50 | and `slot="toolbar-select-multi"`
51 | 
52 | 	<div slot="toolbar-select-single">
53 | 		<paper-icon-button icon="info" on-tap="info"></paper-icon-button>
54 | 	</div>
55 | 	<div slot="toolbar-select">
56 | 		<paper-icon-button icon="delete" on-tap="delete"></paper-icon-button>
57 | 	</div>
58 | 	
59 | Of course you do not need to use this and you can simply check the `length` of the elements `selectedIds` as well.


--------------------------------------------------------------------------------
/demo/paper-datatable/sorting.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>Sorting and Type system</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 	</head>
19 | 	<body>
20 | 
21 | 		<template is="dom-bind" id="app">
22 | 			<custom-style>
23 | 				<style is="custom-style">
24 | 					:host {
25 | 						overflow:hidden;
26 | 					}
27 | 					paper-card {
28 | 						display:block;
29 | 						--paper-card-header-text: {
30 | 							font-family: 'Roboto', 'Noto', sans-serif;
31 | 							font-weight: normal;
32 | 							font-size: 20px;
33 | 						}
34 | 					}
35 | 					</style>
36 | 				</custom-style>
37 | 
38 | 			<demo-menu>
39 | 
40 | 				<paper-card heading="Just a normal data table">
41 | 					<paper-datatable data="{{data}}" selectable multi-selection>
42 | 						<paper-datatable-column header="String" property="string" type="String" sortable default="Default"></paper-datatable-column>
43 | 						<paper-datatable-column header="Integer" property="integer" type="Number" sortable default="1"></paper-datatable-column>
44 | 						<paper-datatable-column header="Float" property="float" type="Number" sortable default="1"></paper-datatable-column>
45 | 						<paper-datatable-column header="Date time" property="date" type="Date" sortable default="2000-01-01T00:00:00-00:00"></paper-datatable-column>
46 | 						<paper-datatable-column header="Object" property="object" type="Object" sortable default='{"integer": 0, "string": "AA"}' sort="{{customObjectSorter}}">
47 | 							<template>
48 | 								<span>[[value.integer]]</span>
49 | 								=
50 | 								<span>[[value.string]]</span>
51 | 							</template>
52 | 						</paper-datatable-column>
53 | 					</paper-datatable>
54 | 				</paper-card>
55 | 
56 | 		</template>
57 | 
58 | 		<script>
59 | 			var app = document.querySelector('#app');
60 | 			app.data = [
61 | 				{string: 'Frozen yogurt', integer: 159, float: 24.234234234256547569878089, date: "1973-10-06T06:57:04-07:00", object: {integer: 1, string: 'AB'}},
62 | 				{string: 'Ice cream sandwich', integer: 237, float: 9.2384290745893573940856398456, date: "1944-12-03T00:23:52-07:00", object: {integer: 2, string: 'DE'}},
63 | 				{string: 'Eclair', integer: 262, float: 4.345083495345792734293056340, date: "2001-09-08T19:07:57-07:00", object: {integer: 2, string: 'BC'}},
64 | 				{string: 'Cupcake', integer: 305, float: 9.23477349694578596263273544, date: "1958-09-15T02:12:31-07:00", object: {integer: 3, string: 'AA'}},
65 | 				{string: 'Gingerbread', integer: 356, float: 49.2459783407653497443, date: "1958-10-02T18:32:59-08:00", object: {integer: 8, string: 'XYZ'}},
66 | 				{string: 'Jelly bean', integer: 1110, float: 9.34534058345934593844, date: "1967-02-24T06:49:36-08:00", object: {integer: 2, string: 'DE'}},
67 | 				{}
68 | 			];
69 | 			app.customObjectSorter = function(a,b){
70 | 				if(a.integer == b.integer){
71 | 					if(a.string == b.string){
72 | 						return 0;
73 | 					}else{
74 | 						return a.string < b.string ? -1 : 1;
75 | 					}
76 | 				}else{
77 | 					return a.integer < b.integer ? -1 : 1;
78 | 				}
79 | 			};
80 | 		</script>
81 | 
82 | 	</body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/demo/paper-datatable/mobile.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>`[editable]` datatable that support Mobile devices</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 
19 | 	</head>
20 | 	<body>
21 | 
22 | 		<template is="dom-bind" id="app">
23 | 			<custom-style>
24 | 				<style is="custom-style">
25 | 					:host {
26 | 						overflow:hidden;
27 | 					}
28 | 
29 | 					paper-card{
30 | 						margin-bottom:20px;
31 | 						display:block;
32 | 						--paper-card-header-text: {
33 | 							font-family: 'Roboto', 'Noto', sans-serif;
34 | 							font-weight: normal;
35 | 							font-size: 20px;
36 | 						}
37 | 						--paper-card-header: {
38 | 							padding-left: 14px;
39 | 						}
40 | 					}
41 | 				</style>
42 | 			</custom-style>
43 | 			<demo-menu>
44 | 				<paper-card heading="Datatable that support mobile devices with screen size less than 768px (just change screen width)">
45 | 					<paper-datatable data="{{data}}" selectable multi-selection response-width='767px' resize-behavior="fixed">
46 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable sorted tooltip="The total amount of food energy in the given serving size."></paper-datatable-column>
47 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
48 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
49 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
50 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
51 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
52 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
53 | 					</paper-datatable>
54 | 				</paper-card>
55 | 			</demo-menu>
56 | 
57 | 		</template>
58 | 
59 | 		<script>
60 | 			var app = document.querySelector('#app');
61 | 			app.data = [
62 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
63 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
64 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
65 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
66 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
67 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
68 | 
69 | 			];
70 | 			app.toFixedOne = function(value){
71 | 				return value.toFixed(1);
72 | 			};
73 | 			app.toPercentage = function(value){
74 | 				return Math.round(value * 10000)/100 + '%';
75 | 			};
76 | 		</script>
77 | 
78 | 	</body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/demo/paper-datatable/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>Hello `datatable`</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 		
19 | 
20 | 	</head>
21 | 	<body>
22 | 
23 | 		<template is="dom-bind" id="app">
24 | 			<custom-style>
25 | 				<style is="custom-style">
26 | 					:host {
27 | 						overflow:hidden;
28 | 					}
29 | 					paper-card{
30 | 						display:block;
31 | 						--paper-card-header-text: {
32 | 							font-family: 'Roboto', 'Noto', sans-serif;
33 | 							font-weight: normal;
34 | 							font-size: 20px;
35 | 						}
36 | 						--paper-card-header: {
37 | 							padding-left: 14px;
38 | 						}
39 | 					}
40 | 				</style>
41 | 			</custom-style>
42 | 			<demo-menu>
43 | 
44 | 				<paper-card heading="Just a normal data table">
45 | 					<paper-datatable data="{{data}}" selectable multi-selection>
46 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
47 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
48 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
49 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
50 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
51 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
52 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
53 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
54 | 					</paper-datatable>
55 | 				</paper-card>
56 | 
57 | 		</template>
58 | 
59 | 		<script>
60 | 			var app = document.querySelector('#app');
61 | 			app.data = [
62 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
63 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
64 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
65 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
66 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
67 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
68 | 
69 | 			];
70 | 			app.toFixedOne = function(value){
71 | 				return value.toFixed(1);
72 | 			};
73 | 			app.toPercentage = function(value){
74 | 				return Math.round(value * 10000)/100 + '%';
75 | 			};
76 | 		</script>
77 | 
78 | 	</body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/demo/paper-datatable/bindings.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>The Magic of Data Bindings</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 
19 | 	</head>
20 | 	<body>
21 | 
22 | 		<template is="dom-bind" id="app">
23 | 			<custom-style>
24 | 				<style is="custom-style">
25 | 					:host {
26 | 						overflow:hidden;
27 | 					}
28 | 					paper-card {
29 | 						display:block;
30 | 						--paper-card-header-text: {
31 | 							font-family: 'Roboto', 'Noto', sans-serif;
32 | 							font-weight: normal;
33 | 							font-size: 20px;
34 | 						}
35 | 					}
36 | 				</style>
37 | 			</custom-style>
38 | 			<demo-menu>
39 | 				<paper-card heading="Just a normal data table">
40 | 					<paper-datatable data="{{data}}" selectable selected-item="{{selectedItem}}">
41 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" sortable></paper-datatable-column>
42 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
43 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
44 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
45 | 					</paper-datatable>
46 | 				</paper-card>
47 | 
48 | 				<div class="horizontal layout" style="justify-content: space-around;margin-top:20px;flex-wrap:wrap;">
49 | 					<paper-card style="min-width:250px;margin:10px;" heading="Selected item">
50 | 						<div style="padding:0px 16px 16px 16px">
51 | 							<paper-input value="{{selectedItem.title}}" label="Title"></paper-input>
52 | 							<paper-input value="{{selectedItem.calories}}" label="Calories"></paper-input>
53 | 							<paper-input value="{{selectedItem.fat}}" label="Fat"></paper-input>
54 | 							<paper-input value="{{selectedItem.carbs}}" label="Carbs"></paper-input>
55 | 						</div>
56 | 					</paper-card>
57 | 					<template is="dom-repeat" items="[[data]]">
58 | 						<paper-card style="min-width:250px;margin:10px;" heading="[[item.title]]">
59 | 							<div style="padding:0px 16px 16px 16px">
60 | 								<paper-input value="{{item.title}}" label="Title"></paper-input>
61 | 								<paper-input value="{{item.calories}}" label="Calories"></paper-input>
62 | 								<paper-input value="{{item.fat}}" label="Fat"></paper-input>
63 | 								<paper-input value="{{item.carbs}}" label="Carbs"></paper-input>
64 | 							</div>
65 | 						</paper-card>
66 | 					</template>
67 | 				</div>
68 | 
69 | 		</template>
70 | 
71 | 		<script>
72 | 			var app = document.querySelector('#app');
73 | 			app.data = [
74 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
75 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
76 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
77 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
78 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
79 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
80 | 			];
81 | 			app.toFixedOne = function(value){
82 | 				return value.toFixed(1);
83 | 			};
84 | 		</script>
85 | 
86 | 	</body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/demo/data/fakeDB.js:
--------------------------------------------------------------------------------
  1 |  /*
  2 |  JSON.stringify(data.map(function(item){
  3 | 	 item.name = {
  4 | 		 first: item.first,
  5 | 		 last: item.last
  6 | 	 };
  7 | 	 delete item.last;
  8 | 	 delete item.first;
  9 | 	 item.location = item.location.split(", ");
 10 | 	 item.location = {
 11 | 	 lat: parseFloat(item.location[0]),
 12 | 	 lng: parseFloat(item.location[1])
 13 | 	 };
 14 | 	 return item;
 15 |  }));
 16 |  */
 17 | 
 18 | 
 19 | var data = new Whenever();
 20 | 
 21 | if(localStorage.getItem('users') !== null){
 22 | 	data.ready(JSON.parse(localStorage.users));
 23 | }else{
 24 | 	httpRequest = new XMLHttpRequest();
 25 | 	httpRequest.onreadystatechange = function(){
 26 | 		if (httpRequest.readyState === XMLHttpRequest.DONE) {
 27 | 			if (httpRequest.status === 200) {
 28 | 				data.ready(JSON.parse(httpRequest.responseText));
 29 | 			}
 30 | 		}
 31 | 	}
 32 | 	httpRequest.open('GET', '../data/userData.js');
 33 | 	httpRequest.send();
 34 | }
 35 | 
 36 | 
 37 | window.db = {
 38 | 	count: function(columns, like, orderBy, skip, limit){
 39 | 		return new Promise(function(resolve, reject){
 40 | 			data.whenReady(function (users) {
 41 | 				if (like.length > 0) {
 42 | 					searchedUsers = users.filter(function (user) {
 43 | 						if (user.name.first.toLowerCase().indexOf(like.toLowerCase()) > -1) return true;
 44 | 						if (user.name.last.toLowerCase().indexOf(like.toLowerCase()) > -1) return true;
 45 | 						if (user.about.toLowerCase().indexOf(like.toLowerCase()) > -1) return true;
 46 | 					});
 47 | 				} else {
 48 | 					searchedUsers = users;
 49 | 				}
 50 | 				resolve(searchedUsers.length);
 51 | 			});
 52 | 		});
 53 | 	},
 54 | 	select: function(columns, like, orderBy, skip, limit){
 55 | 		if(typeof like === 'object'){
 56 | 			return new Promise(function (resolve, reject) {
 57 | 				data.whenReady(function (users) {
 58 | 					setTimeout(function(){
 59 | 						resolve(users.filter((user) => like.indexOf(user.id) > -1 ));
 60 | 					}, Math.random() * 500);
 61 | 				});
 62 | 			});
 63 | 		}else{
 64 | 			return new Promise(function (resolve, reject) {
 65 | 				data.whenReady(function (users) {
 66 | 					setTimeout(function () {
 67 | 						if (like.length > 0) {
 68 | 							searchedUsers = users.filter(function (user) {
 69 | 								if (user.name.first.toLowerCase().indexOf(like.toLowerCase()) > -1) return true;
 70 | 								if (user.name.last.toLowerCase().indexOf(like.toLowerCase()) > -1) return true;
 71 | 								if (user.about.toLowerCase().indexOf(like.toLowerCase()) > -1) return true;
 72 | 							});
 73 | 						} else {
 74 | 							searchedUsers = users;
 75 | 						}
 76 | 
 77 | 						if (orderBy) {
 78 | 
 79 | 							searchedUsers.sort(function (a, b) {
 80 | 								if (orderBy.direction == 'desc') {
 81 | 									var c = a;
 82 | 									a = b;
 83 | 									b = c;
 84 | 								}
 85 | 
 86 | 								if (orderBy.property == 'name') {
 87 | 									a = a[orderBy.property].last + '    ' + a[orderBy.property].first;
 88 | 									b = b[orderBy.property].last + '    ' + b[orderBy.property].first;
 89 | 								} else {
 90 | 									a = a[orderBy.property];
 91 | 									b = b[orderBy.property];
 92 | 								}
 93 | 
 94 | 								a = typeof a === 'string' ? a.toLowerCase() : a;
 95 | 								b = typeof b === 'string' ? b.toLowerCase() : b;
 96 | 
 97 | 								if (a > b) return 1;
 98 | 								if (a < b) return -1;
 99 | 								return 0;
100 | 							});
101 | 						}
102 | 						if (columns === 'id') {
103 | 							resolve(searchedUsers.slice(skip, limit).map((item) => item.id));
104 | 						} else if (columns === '*') {
105 | 							resolve(searchedUsers.slice(skip, limit));
106 | 						} else {
107 | 							console.warn('This is a *fake* db, remember');
108 | 						}
109 | 					}, Math.random() * 100);
110 | 				});
111 | 			});
112 | 		}
113 | 	},
114 | 	update: function(id, property, value){
115 | 		return new Promise(function(resolve, reject){
116 | 			data.whenReady(function (users) {
117 | 				setTimeout(function () {
118 | 					var myItem = users.find(function (thisItem) {
119 | 						return thisItem.id == id;
120 | 					});
121 | 					myItem[property] = value;
122 | 					localStorage.users = JSON.stringify(users);
123 | 					resolve(true);
124 | 				}, Math.random() * 100);
125 | 			});
126 | 		});
127 | 	}
128 | };


--------------------------------------------------------------------------------
/demo/paper-datatable/switching-datas.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title></title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../../paper-button/paper-button.html">
15 | 		<link rel="import" href="../../bwt-datatable-card.html">
16 | 		<link rel="import" href="../../bwt-datatable.html">
17 | 		<link rel="import" href="../../docs/documentation-menu.html">
18 | 
19 | 	</head>
20 | 	<body>
21 | 
22 | 		<template is="dom-bind" id="app">
23 | 			<custom-style>
24 | 				<style is="custom-style">
25 | 					paper-card {
26 | 						--paper-card-header-text: {
27 | 							font-family: 'Roboto', 'Noto', sans-serif;
28 | 							font-weight: normal;
29 | 							font-size: 20px;
30 | 						}
31 | 					}
32 | 				</style>
33 | 			</custom-style>
34 | 			<demo-menu>
35 | 
36 | 				<paper-card heading="Just a normal data table">
37 | 					<paper-datatable id="datatable" data="{{data}}" selectable multi-selection>
38 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
39 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
40 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
41 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
42 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
43 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
44 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
45 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
46 | 					</paper-datatable>
47 | 				</paper-card>
48 | 
49 | 				<paper-card>
50 | 					<paper-button on-tap="switch">Switch data</paper-button>
51 | 				</paper-card>
52 | 
53 | 		</template>
54 | 
55 | 		<script>
56 | 			var app = document.querySelector('#app');
57 | 			app.data = [
58 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
59 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
60 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
61 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08}
62 | 			];
63 | 			app.toFixedOne = function(value){
64 | 				return value.toFixed(1);
65 | 			};
66 | 			app.toPercentage = function(value){
67 | 				return Math.round(value * 10000)/100 + '%';
68 | 			};
69 | 			app.switch = function(){
70 | 				//app.$.datatable.reset();
71 | 				app.data = [
72 | 					{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
73 | 					{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
74 | 				];
75 | 			};
76 | 		</script>
77 | 
78 | 	</body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/bwt-datatable-edit-dialog.js:
--------------------------------------------------------------------------------
  1 | import { PolymerElement, html } from '../@polymer/polymer';
  2 | import '../@polymer/paper-material/paper-material.js';
  3 | import '../@polymer/iron-form/iron-form.js';
  4 | import '../@polymer/iron-flex-layout/iron-flex-layout-classes.js';
  5 | import { IronResizableBehavior } from '../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
  6 | import { mixinBehaviors } from '../@polymer/polymer/lib/legacy/class.js';
  7 | import { dom } from '../@polymer/polymer/lib/legacy/polymer.dom.js';
  8 | 
  9 | class PaperDatatableEditDialog extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
 10 | 	static get template() {
 11 | 		return html`
 12 | 		<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
 13 | 			<style is="custom-style">
 14 | 				:host{
 15 | 					position: absolute;
 16 | 					z-index: 10;
 17 | 					display: none;
 18 | 				}
 19 | 				:host([visible]){
 20 | 					display: block;
 21 | 				}
 22 | 				paper-material {
 23 | 					position:absolute;
 24 | 					left:0px;
 25 | 					top:0px;
 26 | 					right:0px;
 27 | 					min-width: 100px;
 28 | 					display: inline-block;
 29 | 					padding: 4px 24px;
 30 | 					background: var(--paper-datatable-edit-dialog-color, var(--paper-grey-50));
 31 | 					border-radius: 2px;
 32 | 					box-sizing: border-box;
 33 | 					@apply --paper-datatable-edit-dialog;
 34 | 				}
 35 | 			</style>
 36 | 		<paper-material id="material" elevation="1">
 37 | 			<iron-form id="form">
 38 | 				<form on-iron-form-presubmit="dismiss">
 39 | 					<slot></slot>
 40 | 				</form>
 41 | 			</iron-form>
 42 | 		</paper-material>
 43 | 		`;
 44 | 	}
 45 | 	static get is() {
 46 | 		return 'paper-datatable-edit-dialog';
 47 | 	}
 48 | 
 49 | 	static get properties() {
 50 | 		return {
 51 | 			positionedRelativeTo: {
 52 | 				type: Element,
 53 | 				observer: 'setLocationRelativeTo'
 54 | 			},
 55 | 			visible: {
 56 | 				type: Boolean,
 57 | 				reflectToAttribute: true
 58 | 			}
 59 | 		}
 60 | 	}
 61 | 
 62 | 
 63 | 	// listeners: {
 64 | 	// 	'iron-resize': 'setLocationRelativeTo'
 65 | 	// },
 66 | 
 67 | 	ready() {
 68 | 		super.ready();
 69 | 		this.addEventListener('keyup', (ev) => {
 70 | 			var genericEvent = ev;
 71 | 			if (ev.keyCode == 13 && genericEvent.path[0].nodeName.toLowerCase() !== 'textarea') {
 72 | 				this.dismiss();
 73 | 			}
 74 | 		});
 75 | 		document.body.addEventListener('click', (ev) => {
 76 | 			var path = ev.path;
 77 | 			if (this.positionedRelativeTo && path.indexOf(this) == -1 && path.indexOf(this.positionedRelativeTo) == -1) {
 78 | 				this.dismiss(ev);
 79 | 			}
 80 | 		});
 81 | 	}
 82 | 
 83 | 	dismiss(ev) {
 84 | 		this.set('visible', undefined);
 85 | 		this.positionedRelativeTo = undefined;
 86 | 		if (ev)
 87 | 			ev.preventDefault();
 88 | 	}
 89 | 
 90 | 	findFocus() {
 91 | 		var paperInput = this.shadowRoot.querySelector('paper-input')
 92 | 		if (paperInput) {
 93 | 			paperInput.$.input.focus();
 94 | 		}
 95 | 		var paperInput = this.shadowRoot.querySelector('paper-textarea')
 96 | 		if (paperInput) {
 97 | 			var position = paperInput.$.input.$.textarea.value.length;
 98 | 			paperInput.$.input.$.textarea.focus();
 99 | 			paperInput.$.input.$.textarea.setSelectionRange(position, position);
100 | 		}
101 | 		var input = this.shadowRoot.querySelector('input')
102 | 		if (input) {
103 | 			input.focus();
104 | 		}
105 | 	}
106 | 
107 | 	setLocationRelativeTo() {
108 | 		if (this.positionedRelativeTo) {
109 | 			this.set('visible', true)
110 | 			this.revealTime = Date.now();
111 | 			var relativeToParent = this.parentNode;
112 | 			while (relativeToParent !== window) {
113 | 				if (relativeToParent.nodeName == '#document-fragment') {
114 | 					relativeToParent = relativeToParent.host;
115 | 				} else {
116 | 					if (getComputedStyle(relativeToParent).position == 'relative' || getComputedStyle(relativeToParent).position == 'absolute') {
117 | 						break;
118 | 					}
119 | 					relativeToParent = dom(relativeToParent).parentNode;
120 | 				}
121 | 			}
122 | 			var parent = relativeToParent.getBoundingClientRect();
123 | 			var child = this.positionedRelativeTo.getBoundingClientRect();
124 | 			this.style.top = child.top - 2 - parent.top + "px";
125 | 			this.style.left = child.left - parent.left + "px";
126 | 			this.style.right = Math.max(parent.right - child.right, 0) + "px";
127 | 			this.$.material.style.minHeight = child.height + 2 + "px";
128 | 		}
129 | 	}
130 | }
131 | window.customElements.define(PaperDatatableEditDialog.is, PaperDatatableEditDialog);
132 | 


--------------------------------------------------------------------------------
/demo/paper-datatable/filter.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>Filter attribute</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 	</head>
19 | 	<body>
20 | 
21 | 		<template is="dom-bind" id="app">
22 | 			<custom-style>
23 | 				<style is="custom-style">
24 | 					:host {
25 | 						overflow:hidden;
26 | 					}
27 | 
28 | 					paper-card {
29 | 						display:block;
30 | 						--paper-card-header-text: {
31 | 							font-family: 'Roboto', 'Noto', sans-serif;
32 | 							font-weight: normal;
33 | 							font-size: 20px;
34 | 						}
35 | 					}
36 | 				</style>
37 | 			</custom-style>
38 | 			<demo-menu>
39 | 
40 | 				<paper-card heading="Just a normal data table">
41 | 					<paper-datatable id="datatable" data="{{data}}" selectable multi-selection filter="{{myFilter}}">
42 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
43 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
44 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
45 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" editable sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
46 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
47 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
48 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
49 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
50 | 						<div no-results>No results for the current filter...</div>
51 | 					</paper-datatable>
52 | 				</paper-card>
53 | 
54 | 				<paper-card heading="Filter" style="margin-top:20px;">
55 | 					<div style="padding:0px 20px 20px 20px;">
56 | 						Only show items with more than <paper-input value="{{filterLimit}}" style="display:inline-block;" label="calories" on-input="applyFilter"></paper-input>
57 | 					</div>
58 | 				</paper-card>
59 | 
60 | 		</template>
61 | 
62 | 		<script>
63 | 			var app = document.querySelector('#app');
64 | 			app.data = [
65 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
66 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
67 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
68 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
69 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
70 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
71 | 			];
72 | 
73 | 			app.filterLimit = 0;
74 | 
75 | 			app.toFixedOne = function(value){
76 | 				return value.toFixed(1);
77 | 			};
78 | 			app.toPercentage = function(value){
79 | 				return Math.round(value * 10000)/100 + '%';
80 | 			};
81 | 			app.myFilter = function(item, key, items){
82 | 				return item.calories > (app.filterLimit || 0);
83 | 			};
84 | 			app.applyFilter = function(){
85 | 				app.$.datatable.reload();
86 | 			};
87 | 		</script>
88 | 
89 | 	</body>
90 | </html>
91 | 


--------------------------------------------------------------------------------
/docs/docs.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 
  5 | 		<title>Documentation</title>
  6 | 
  7 | 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  8 | 		<link rel="import" href="../../polymer/polymer.html">
  9 | 		<link rel="import" href="../../paper-card/paper-card.html">
 10 | 		<link rel="import" href="../../marked-element/marked-element.html">
 11 | 		<link rel="import" href="../../prism-element/prism-highlighter.html">
 12 | 		<link rel="import" href="../bwt-datatable-card.html">
 13 | 		<link rel="import" href="../bwt-datatable.html">
 14 | 		<link rel="import" href="documentation-menu.html">
 15 | 		<link rel="import" href="../bwt-datatable-styles.html">
 16 | 
 17 | 
 18 | 	</head>
 19 | 	<body>
 20 | 		<prism-highlighter></prism-highlighter>
 21 | 		<template is="dom-bind" id="app">
 22 | 			<style include="paper-datatable-styles"></style>
 23 | 			<custom-style>
 24 | 				<style is="custom-style">
 25 | 					body{
 26 | 						overflow:hidden;
 27 | 					}
 28 | 
 29 | 					paper-card{
 30 | 						display:block;
 31 | 
 32 | 						max-width: 768px;
 33 | 						margin: auto;
 34 | 						margin-bottom: 20px;
 35 | 
 36 | 						overflow: auto;
 37 | 
 38 | 						--paper-card-header-text: {
 39 | 							@apply --paper-font-title;
 40 | 						};
 41 | 					}
 42 | 					h1{
 43 | 						@apply --paper-font-title;
 44 | 						margin: 15px 20px 30px 15px;
 45 | 					}
 46 | 					h2{
 47 | 						margin-top: 30px;
 48 | 						@apply --paper-font-subhead;
 49 | 					}
 50 | 					paper-card p{
 51 | 
 52 | 					}
 53 | 					paper-card code{
 54 | 						display: inline-block;
 55 | 						background: rgb(250,250,250);
 56 | 						padding: 2px;
 57 | 						margin: -2px;
 58 | 					}
 59 | 					paper-card pre{
 60 | 						overflow: auto;
 61 | 						margin: 0px -20px;
 62 | 						padding: 20px;
 63 | 						background: rgb(250,250,250);
 64 | 						border-top: 1px solid rgb(230, 230, 230);
 65 | 						border-bottom: 1px solid rgb(230, 230, 230);
 66 | 					}
 67 | 					paper-card table{
 68 | 						margin: 0px -20px;
 69 | 						width: calc(100% + 40px)
 70 | 					}
 71 | 
 72 | 					paper-card > div{
 73 | 						margin-top: -20px;
 74 | 						padding: 0px 20px 10px 20px;
 75 | 					}
 76 | 
 77 | 					th:first-child{
 78 | 						width: 35%;
 79 | 					}
 80 | 					th{
 81 | 						min-width: 150px;
 82 | 					}
 83 | 					h1 .hash{
 84 | 						color: rgba(0,0,0,0);
 85 | 						text-decoration: none;
 86 | 						transition: .3s linear color;
 87 | 					}
 88 | 					h1:hover .hash{
 89 | 						color: rgba(0,0,0,.4);
 90 | 					}
 91 | 					paper-card a{
 92 | 						color: #00bcd4;
 93 | 						text-decoration: none;
 94 | 						font-weight: 500;
 95 | 					}
 96 | 				</style>
 97 | 			</custom-style>
 98 | 			<demo-menu>
 99 | 				<template is="dom-repeat" items="[[sections]]" on-dom-change="_figureOutHash">
100 | 					<paper-card>
101 | 						<h1 id="[[item.anchor]]">[[item.title]] <a href="#[[item.anchor]]" class="hash">#</a></h1>
102 | 						<div>
103 | 							<marked-element markdown="{{item.body}}">
104 | 								<div class="markdown-html"></div>
105 | 							</marked-element>
106 | 						</div>
107 | 					</paper-card>
108 | 				</template>
109 | 			</demo-menu>
110 | 
111 | 		</template>
112 | 
113 | 
114 | 	<script>
115 | 
116 | 		var app = document.querySelector('#app');
117 | 
118 | 		var httpRequest = new XMLHttpRequest();
119 | 		httpRequest.onreadystatechange = function(){
120 | 			if(httpRequest.readyState === XMLHttpRequest.DONE){
121 | 				if(httpRequest.status === 200){
122 | 					var response = httpRequest.responseText;
123 | 					app.sections = response.split("===").map(function(section, i, all){
124 | 						if(i==0){
125 | 							return;
126 | 						}
127 | 						var prevSectionLines = all[i-1].split("\n");
128 | 						prevSectionLines.pop();
129 | 						var lastLineOfPrevSection = prevSectionLines.pop();
130 | 						var currentSectionLines = section.split("\n");
131 | 						if(i < all.length-1){
132 | 							currentSectionLines.pop();
133 | 							currentSectionLines.pop();
134 | 						}
135 | 						return {
136 | 							title: lastLineOfPrevSection.replace(/[`]/g,''),
137 | 							body: currentSectionLines.join("\n"),
138 | 							anchor: lastLineOfPrevSection.replace(/[\<\>\n\r]/g,'').replace(/ /g,'-').toLowerCase()
139 | 						};
140 | 					}).filter((section) => typeof section !== 'undefined');
141 | 				}
142 | 			}
143 | 		};
144 | 		var page = location.search.replace('?', '');
145 | 		var hashToTitle = function(hash){
146 | 			var normalWords = ['with'];
147 | 			return hash.split('-').map((word) => normalWords.indexOf(word) == -1 ? word.substr(0,1).toUpperCase() + word.substr(1, word.length -1) : word).join(' ');
148 | 		}
149 | 		document.title = hashToTitle(page);
150 | 		httpRequest.open('GET', page+'.md');
151 | 		httpRequest.send();
152 | 
153 | 
154 | 		app._figureOutHash = function(){
155 | 			setTimeout(function(){
156 | 				var hash = location.hash.replace('#', '');
157 | 				if(hash.length > 0){
158 | 					var target = document.getElementById(hash);
159 | 					target.scrollIntoView(true);
160 | 				}
161 | 			},0);
162 | 		};
163 | 
164 | 	</script>
165 | 
166 | 	</body>
167 | </html>
168 | 


--------------------------------------------------------------------------------
/docs/styling.md:
--------------------------------------------------------------------------------
 1 | Styling
 2 | ===
 3 | The biggest difficulty is styling, because the way Polymer and the shadow DOM works it's incredibly hard to style elements that are hidden in the shadow DOM, as is the case for the cells. Dynamically setting up mixins isn't possible either however, so in the end the following compromise was reached:
 4 | 
 5 | Header cell and Row cell styling
 6 | ---
 7 | It is possible to define a css string that will be applied to the header cell and all cells in a column like
 8 | 
 9 | 	<paper-datatable-column [...] style="color:green;" cell-style="color:red;"></paper-datatable-column>
10 | 
11 | Which would make the header `green` and the content in each cell in the column `red`. This is especially useful to set a `min-width` on the header. There is also a convenience attribute `align='center'` to center columns (both the header and cells) and a convenience attribute `width` to set the minimum width.
12 | 
13 | Tip: Check the `theming.html` demo for a live demonstration.
14 | 
15 | Styling content inside `<template>`'s
16 | ---
17 | Sometimes you need to style content inside of a cell when using `<template>`'s. There are 3 ways to achieve this:
18 | 
19 |  - Inline styling. 
20 |    - Advantage: It's pretty clear what you're doing. 
21 |    - Disadvantages: *If* you need the same style in multiple columns you end up with duplicated styles and you can't 
22 |      style Polymer specific styles.
23 |  - `paper-datatable-class-n` are a set of classes with matching mixins to style specific classes inside cells. 
24 |    - Advantage: You can apply the same style to multiple different elements in different columns.
25 |    - Disadvantages: It's hard to read and it only works in Shadow DOM
26 |  - [Cross scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling). Stuff like `/deep/`
27 |    - Advantage: It works really well.
28 |    - Disadvantage: It's deprecated.
29 | 
30 | <paper-datatable>
31 | ===
32 | 
33 |  Custom property | Description | Default
34 |  ----------------|-------------|----------
35 |  `--paper-datatable-divider-color` | divider color between rows | `--divider-color`
36 |  `--paper-datatable-row-selection-color` | divider color between rows | `--paper-grey-100`
37 |  `--paper-datatable-row-hover-color` | color of hovered row | `--paper-grey-200`
38 |  `--paper-datatable-checkbox-border-color` | checkbox color | `--primary-text-color`
39 |  `--paper-datatable-header-checkbox-border-color` | checkbox color | `--primary-text-color`
40 |  `--paper-datatable-icon-color` | icon color of editable icon | `rgba(0,0,0,.54)`
41 | 
42 | Mixins
43 | ---
44 | 
45 |  Mixin | Description
46 |  ------|-------------
47 |  `--paper-datatable-column-header` | column header style applied to text headers
48 |  `--paper-datatable-cell` | applied to all data cells
49 |  `--paper-datatable-cell-last` | applied to the last cell of each row (used to increase the `padding-right` if you overwrite it in `--paper-datatable-cell`)
50 |  `--paper-datatable-column-header-sorted` | applied to the sort icon
51 |  `--paper-datatable-column-header-sort-icon-hover` | applied to the sort icon when hovered
52 |  `--paper-datatable-array-item` | oly works when using the proper Shadow DOM and is applied to columns using the `array-display-prop` attribute.
53 |  `--paper-datatable-class-1` | only works when using the proper Shadow DOM and is applied to any content in cells with `class='class-1'`.
54 |  `--paper-datatable-class-2` | only works when using the proper Shadow DOM and is applied to any content in cells with `class='class-2'`.
55 |  `--paper-datatable-class-3` | only works when using the proper Shadow DOM and is applied to any content in cells with `class='class-3'`.
56 |  `--paper-datatable-class-4` | only works when using the proper Shadow DOM and is applied to any content in cells with `class='class-4'`.
57 |  `--paper-datatable-class-5` | only works when using the proper Shadow DOM and is applied to any content in cells with `class='class-5'`.
58 | 
59 | <paper-datatable-card>
60 | ===
61 | Variables
62 | ---
63 |  Custom property | Description | Default
64 |  ----------------|-------------|----------
65 |  `--paper-datatable-divider-color` | divider color is used to draw the bottom line | --divider-color
66 |  `--paper-datatable-selection-toolbar-color` | color of selection toolbar, should be 50 of the secondary color | `--paper-pink-50`
67 |  `--paper-datatable-selection-toolbar-text-color` | color of text on selection toolbar | `--accent-color`
68 |  `--paper-datatable-navigation-bar-text-color` | color of text in navigation bar |
69 |  `--paper-datatable-top-toolbar-text-color` | color of text in the top toolbar | `rgba(0,0,0,.54)`
70 |  `--paper-datatable-top-toolbar-icon-color` | color of icons in the top toolbar | ``
71 |  `--paper-datatable-selection-toolbar-icon-color` | color of icons on selection toolbar | 
72 | 
73 | Mixins
74 | ---
75 | 
76 |  Mixin | Description
77 |  ------|-------------
78 |  `--paper-datatable-card` | applied to the main card
79 |  `--paper-datatable-navigation-bar` | applied to the bottom bar containing the navigation
80 |  `--paper-datatable-selection-toolbar` | applied to the selection toolbar
81 |  `--paper-datatable-top-toolbar` | Applied to the general area above the data table
82 | 


--------------------------------------------------------------------------------
/docs/getting-started.md:
--------------------------------------------------------------------------------
  1 | Getting started
  2 | ===
  3 | First of all you have to set up a `<paper-datatable>` element. You provide it with a
  4 | `data` attribute which should be an array of `object`'s. Additionally you decide
  5 | whether you want the `data-table` to be `selectable`. At this point we get something
  6 | like
  7 | 
  8 | 	<paper-datatable data="{{data}}" selectable multi-selection>
  9 | 	</paper-datatable>
 10 | 
 11 | Next we have to define our columns, this is done by adding child elements of the type
 12 | `<paper-datatable-column>`. A fairly minimal example would be
 13 | 
 14 | 	<paper-datatable data="{{data}}" selectable multi-selection>
 15 | 		<paper-datatable-column header="Title" property="title" sortable>
 16 | 		</paper-datatable-column>
 17 | 	</paper-datatable>
 18 | 
 19 | If we want to format our content in a custom way we can easily do this by adding a `<template>`
 20 | element like so:
 21 | 
 22 | 	<paper-datatable data="{{data}}" selectable multi-selection>
 23 | 		<paper-datatable-column header="Title" property="title" sortable editable>
 24 | 			<template>
 25 | 				<paper-input value="{{value}}">
 26 | 			</template>
 27 | 		</paper-datatable-column>
 28 | 	</paper-datatable>
 29 | 
 30 | Before you start there is one choice you have to make: Whether you wish to use the `<paper-datable>` on it's own or
 31 | whether you wish to use the full `<paper-datatable-card>` element. The `<paper-datatable-card>` element wraps a 
 32 |  `<paper-datatable>` element and handles things like pagination and lazy loading of data. So there is a very simple rule
 33 |  of thumb:
 34 |  
 35 |   - Use the `<paper-datatable>` if your table is going to show a fixed number of rows.
 36 |   - Use the `<paper-datatable-card>` if your table has a dynamic number of rows. 
 37 | 
 38 | And it's also a cool idea to check [the different `resize-behavior`s](resize-behavior.html) and pick one you like.
 39 | 
 40 | Editable columns
 41 | ===
 42 | There are two ways to define editable columns, the easiest way is to just set the `editable` attribute like
 43 | 
 44 | 	<paper-datatable-column header="Author" property="title" type="String" editable>
 45 | 	</paper-datatable-column>
 46 | 
 47 | which uses default `<template>`'s for simple `type="String"` and `type="Number"` cases. You can always set your own
 48 | `<template>` as well in which case `[editable]` will indicate to the system that a tap inside the cell should not select
 49 | the row.
 50 | 
 51 | 	<paper-datatable-column header="Author" property="title" editable>
 52 | 		<template>
 53 | 			 <paper-input value="{{value}}" no-label-float></paper-input>
 54 | 		</template>
 55 | 	</paper-datatable-column>
 56 | 
 57 | Inside the template you can access the following 3 bindings:
 58 | 
 59 |  - `{{value}}` which is the value of the current cell;
 60 |  - `{{item}}` which is the entire row; 
 61 |  - and `{{column}}` which references the current column.
 62 | 
 63 | Additionally it's possible to load the `<template>` instead of inline. The will cause a small dialog to be shown when
 64 |  the user taps on the cell. See the first table in [this demo](editable.html) for an example of this. The big advantage
 65 |  of this is performance as not every cell needs to be initalized.
 66 | 
 67 | Mobile view
 68 | ===
 69 | There is a `responseWidth` property for `<paper-datatable>` which define a resolution to show mobile view.
 70 | 
 71 | 	<paper-datatable data="{{data}}" selectable multi-selection response-width="767px">
 72 | 		<paper-datatable-column header="Title" property="title" sortable editable>
 73 | 			<template>
 74 | 				<paper-input value="{{value}}">
 75 | 			</template>
 76 | 		</paper-datatable-column>
 77 | 	</paper-datatable>
 78 | 
 79 | Default value for `responseWidth` property is `767px`. You can change it to desired value for your purpose.
 80 | 
 81 | Fixed header
 82 | ===
 83 | There is a `headerFixed` property for `<paper-datatable>` and `<paper-datatable-cart>` which add ability to fix table and/or column header to the top of the page.
 84 | 	
 85 | 	<paper-datatable-card header="Users" data-source="{{data}}" id-property="id" selected-ids="{{selectedIds}}" header-fixed>
 86 | 		<paper-datatable  selectable multi-selection header-fixed>
 87 | 			<paper-datatable-column header="Title" property="title" sortable editable>
 88 | 				<template>
 89 | 					<paper-input value="{{value}}">
 90 | 				</template>
 91 | 			</paper-datatable-column>
 92 | 		</paper-datatable>
 93 | 	</paper-datatable-card>
 94 | 
 95 | If you want to use datatable inside some custom element like `app-header` with its own `scrollTarget` and scroll event instead of native `document` you must to define a right `scrollTarget` for your datatable.
 96 | 
 97 | 	this.$.datatableCard.scrollTarget = document.querySelector('some-selector').scrollTarget;
 98 | 
 99 | Default value for `headerFixed` property is `false`. You can change it to fix a header if you have a big amount of data in table for better usability.
100 | 
101 | Polymer Keys and Selections
102 | ===
103 | You might encounter keys that look like `#1` whilst working with `<paper-datatable>` these keys are Polymer's internal
104 | keys on the `paperDatatable.data` collection. You can use those just like they would be a normal index in Polymer
105 | functions, so stuff like the following works:
106 | 
107 | 	this.$.paperDatatable.set('data.#1.author', 'Tom');
108 | 


--------------------------------------------------------------------------------
/demo/paper-datatable-card/playground.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 		<title>`paper-datatable-card` playground</title>
  5 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  6 | 		<link rel="import" href="../../../polymer/polymer.html">
  7 | 		<link rel="import" href="../../bwt-datatable-card.html">
  8 | 		<link rel="import" href="../../bwt-datatable.html">
  9 | 		<link rel="import" href="../../docs/documentation-menu.html">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<template is="dom-bind" id="app">
 15 | 			<style>
 16 | 				:host {
 17 | 					background: #f5f5f5;
 18 | 				}
 19 | 			</style>
 20 | 			<demo-menu>
 21 | 
 22 | 				<paper-datatable-card id="datatableCard" header="Document library" page-size="10" data-source="{{data}}" id-property="i" selected-ids="{{selectedIds}}">
 23 | 					<div slot="toolbar-main">
 24 | 						<paper-icon-button icon="add" on-tap="addNew"></paper-icon-button>
 25 | 					</div>
 26 | 					<div slot="toolbar-select">
 27 | 						<paper-icon-button icon="delete"></paper-icon-button>
 28 | 					</div>
 29 | 					<paper-datatable selectable multi-selection>
 30 | 						<paper-datatable-column header="ID" property="i" type="String" tooltip="Some title" sortable align="center" style="min-width: 40px" sorted></paper-datatable-column>
 31 | 						<paper-datatable-column header="Author" property="author" tooltip="The total amount of..." style="min-width: 500px" default='{"first": "", "last": ""}' editable>
 32 | 							<template>
 33 | 								<paper-input value="{{value.first}}" no-label-float style="display:inline-block;width:49%;"></paper-input>
 34 | 								<paper-input value="{{value.last}}" no-label-float style="display:inline-block;width:49%;"></paper-input>
 35 | 							</template>
 36 | 						</paper-datatable-column>
 37 | 						<paper-datatable-column header="Document title" property="title" type="String" tooltip="Some title" sortable style="width: 99%"></paper-datatable-column>
 38 | 						<paper-datatable-column header="Rating" property="rating" type="Number" tooltip="The total amount of..." sortable style="min-width: 200px" editable>
 39 | 							<template>
 40 | 								<paper-input value="{{value}}" no-label-float></paper-input>
 41 | 							</template>
 42 | 						</paper-datatable-column>
 43 | 						<paper-datatable-column property="reserved" header="Reserved" type="boolean" default="false" style="min-width: 100px" cell-style="padding-left:40px;" align="center" editable>
 44 | 							<template>
 45 | 								<paper-checkbox checked="{{value}}"></paper-checkbox>
 46 | 							</template>
 47 | 						</paper-datatable-column>
 48 | 					</paper-datatable>
 49 | 				</paper-datatable-card>
 50 | 
 51 | 				<div style="padding:20px">
 52 | 					Selected IDs: [[outputSelectedIds(selectedIds.splices)]]
 53 | 				</div>
 54 | 			</demo-menu>
 55 | 		</template>
 56 | 
 57 | 		<script>
 58 | 			var app = document.querySelector('#app');
 59 | 
 60 | 			var myData = [];
 61 | 			for (var i=0; i<142; i++) {
 62 | 				var id = i*10000+Math.round(Math.random() * 500);
 63 | 				var rating = Math.round(Math.random() * 2000)+1000;
 64 | 				myData.push({
 65 | 					i: i,
 66 | 					title: "title"+id,
 67 | 					rating: rating,
 68 | 					author: {
 69 | 						first: "David",
 70 | 						last: "Mulder "+ i
 71 | 					},
 72 | 					reserved: (Math.random() > 0.9 ? true : undefined)
 73 | 				});
 74 | 			}
 75 | 			window.myData = myData;
 76 | 
 77 | 			app.data = {
 78 | 				get: function(sort, page, pageSize){
 79 | 					console.log('just once? :/');
 80 | 					return new Promise(function(resolve, reject){
 81 | 						myData.sort(function(a,b){
 82 | 							if(sort.direction == "desc"){
 83 | 								var c = a;
 84 | 								a = b;
 85 | 								b = c;
 86 | 							}
 87 | 							if(a[sort.property] > b[sort.property]) return 1;
 88 | 							if(a[sort.property] < b[sort.property]) return -1;
 89 | 							return 0;
 90 | 						});
 91 | 						resolve(myData.slice((page-1)*pageSize, page*pageSize));
 92 | 					});
 93 | 				},
 94 | 				set: function(item, property, value){
 95 | 					return new Promise(function(resolve, reject){
 96 | 						console.info("a save was triggered", [item, property, value]);
 97 | 						if(item.id === '__new__'){
 98 | 							//validate item, if invalid (and thus not savable yet) reject, otherwise return it's new id
 99 | 							console.warn('this is for the time being deprecated');
100 | 							/*
101 | 							if(item.author.first.length > 0 && item.author.last.length > 0){
102 | 								console.log('trigger save');
103 | 								var id = Math.round(Math.random() * 10000);
104 | 
105 | 								item.id = id;
106 | 								myData.push(item);
107 | 								app.set('data.length', myData.length);
108 | 								resolve(id);
109 | 							}else{
110 | 								console.log('no luck yet');
111 | 								reject();
112 | 							}*/
113 | 						}else{
114 | 							var myItem = myData.find(function(thisItem){
115 | 								return thisItem.id == item.id;
116 | 							});
117 | 							myItem[property] = value;
118 | 							resolve(true);
119 | 						}
120 | 					});
121 | 
122 | 				},
123 | 				length:myData.length
124 | 			};
125 | 
126 | 			app.addNew = function(){
127 | 				this.$.datatableCard.addNew();
128 | 			};
129 | 
130 | 			app.outputSelectedIds = function(){
131 | 				return app.selectedIds.join(', ');
132 | 			}
133 | 
134 | 		</script>
135 | 
136 | 	</body>
137 | </html>
138 | 


--------------------------------------------------------------------------------
/demo/paper-datatable-card/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 		<title>Simple `paper-datatable-card`</title>
  5 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  6 | 		<link rel="import" href="../../../polymer/polymer.html">
  7 | 		<link rel="import" href="../../bwt-datatable-card.html">
  8 | 		<link rel="import" href="../../bwt-datatable.html">
  9 | 		<link rel="import" href="../../docs/documentation-menu.html">
 10 | 	</head>
 11 | 	<body>
 12 | 
 13 | 		<demo-menu>
 14 | 
 15 | 			<template is="dom-bind" id="app">
 16 | 				<style is="custom-style">
 17 | 					:host {
 18 | 						background: #f5f5f5;
 19 | 					}
 20 | 				</style>
 21 | 				<paper-datatable-card id="datatableCard" header="Users" data-source="{{dataSource}}" progress id-property="sha1" selected-ids="{{selectedIds}}">
 22 | 					<div slot="toolbar-main">
 23 | 					</div>
 24 | 					<div slot="toolbar-select">
 25 | 						<paper-icon-button icon="delete" on-tap="delete"></paper-icon-button>
 26 | 					</div>
 27 | 					<div slot="toolbar-select-single">
 28 | 						<paper-icon-button icon="info" on-tap="showInfo"></paper-icon-button>
 29 | 					</div>
 30 | 					<paper-datatable id="datatable" selectable multi-selection>
 31 | 						<paper-datatable-column id="nameColumn" header="Name" property="name" capitalize="[[capitalize]]" style="min-width: 200px;" sortable>
 32 | 							<template>
 33 | 								<div>
 34 | 									<img src="[[item.picture.thumbnail]]" style="width:32px;height:32px;border-radius:16px;vertical-align: middle;margin-right:4px;">
 35 | 									<span style="vertical-align:middle;">[[capitalize(value.title)]]</span>
 36 | 									<span style="vertical-align:middle;">[[capitalize(value.first)]]</span>
 37 | 									<span style="vertical-align:middle;">[[capitalize(value.last)]]</span>
 38 | 								</div>
 39 | 							</template>
 40 | 						</paper-datatable-column>
 41 | 						<paper-datatable-column header="E-mail" property="email" style="min-width: 200px;" sortable></paper-datatable-column>
 42 | 						<paper-datatable-column header="SSN" property="SSN" style="min-width: 130px;" sortable></paper-datatable-column>
 43 | 						<paper-datatable-column header="Phone" property="phone" style="min-width: 150px;" sortable></paper-datatable-column>
 44 | 						<paper-datatable-column header="Cell" property="cell" style="min-width: 150px;" sortable></paper-datatable-column>
 45 | 						<paper-datatable-column header="Address" property="location" capitalize="[[capitalize]]" style="min-width: 200px;" sortable>
 46 | 							<template>
 47 | 								<div>[[capitalize(value.street)]]</div>
 48 | 								<div><span>[[capitalize(value.state)]]</span> <span>[[capitalize(value.zip)]]</span></div>
 49 | 							</template>
 50 | 						</paper-datatable-column>
 51 | 					</paper-datatable>
 52 | 				</paper-datatable-card>
 53 | 
 54 | 				<div style="padding:20px; max-width:500px; margin:auto;text-align:justify;">
 55 | 					Note: This demo uses random data from <a href="http://randomuser.me">randomuser.me</a>, so because of this
 56 | 					browsing through the data is fake, sorting doesn't work and selections are not preserved, etc. The other
 57 | 					demo of the `<code>&lt;paper-datatable-card&gt;</code>` does support those things, but is a lot more
 58 | 					complex and can thus be harder to understand initially.
 59 | 				</div>
 60 | 
 61 | 			</template>
 62 | 
 63 | 		</demo-menu>
 64 | 
 65 | 		<script>
 66 | 			var app = document.querySelector('#app');
 67 | 			
 68 | 
 69 | 			app.dataSource = {
 70 | 				get: function(sort, page, pageSize){
 71 | 					return new Promise(function(resolve, reject){
 72 | 						var httpRequest = new XMLHttpRequest();
 73 | 						httpRequest.onreadystatechange = function() {
 74 | 							if (httpRequest.readyState === XMLHttpRequest.DONE) {
 75 | 								if (httpRequest.status === 200) {
 76 | 									var result = JSON.parse(httpRequest.responseText);
 77 | 									var count = 0;
 78 | 									var users = result.results.map(function(item){
 79 | 										item.sha1 = count;
 80 | 										count++;
 81 | 										return item;
 82 | 									});
 83 | 									resolve(users);
 84 | 								}
 85 | 							}
 86 | 						};
 87 | 						//httpRequest.open('GET', 'http://api.randomuser.me/?nat=US&results='+pageSize);
 88 | 						httpRequest.open('GET', '../data/users.json');
 89 | 						httpRequest.send();
 90 | 					});
 91 | 				},
 92 | 				// none of the <templates> bind in an editable way right now, but if they would this is the function
 93 | 				// that's triggered after an edit
 94 | 				set: function(id, property, value){
 95 | 					console.info("a save was triggered", arguments);
 96 | 				},
 97 | 				length:100
 98 | 			};
 99 | 
100 | 			app.capitalize = function(str){
101 | 				if (!str) return '';
102 | 				return str.toString().split(' ').map(function(str){
103 | 					return str.substr(0,1).toUpperCase() + str.substr(1, str.length - 1);
104 | 				}).join(' ');
105 | 			};
106 | 
107 | 			app.delete = function(){
108 | 				// do your delete first
109 | 				app.set('dataSource.length', app.dataSource.length - 1);
110 | 				// and then call:
111 | 				app.$.datatable.deselectAll();
112 | 				app.$.datatableCard.retrieveVisibleData();
113 | 			};
114 | 
115 | 			app.showInfo = function(){
116 | 				window.alert('You select item #'+this.selectedIds+'!');
117 | 			};
118 | 
119 | 		</script>
120 | 
121 | 	</body>
122 | </html>


--------------------------------------------------------------------------------
/test/bwt-datatable.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | --> 
 11 | <html>
 12 | <head>
 13 |   <meta charset="UTF-8">
 14 |   <title>bwt-datatable tests</title>
 15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 16 | 
 17 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 18 |   <script src="../../web-component-tester/browser.js"></script>
 19 |   <link rel="import" href="../bwt-datatable.html">
 20 | 
 21 |   <style>
 22 |     
 23 |   </style>
 24 | 
 25 | </head>
 26 | <body>
 27 |   <template is="dom-bind" id="app">
 28 | 				<style is="custom-style">
 29 | 					bwt-card {
 30 | 						--bwt-card-header-text: {
 31 | 							font-family: 'Roboto', 'Noto', sans-serif;
 32 | 							font-weight: normal;
 33 | 							font-size: 20px;
 34 | 						}
 35 | 					}
 36 | 				</style>
 37 | 
 38 | 				<bwt-datatable id="datatable" data="{{data}}" selectable multi-selection>
 39 | 					<bwt-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></bwt-datatable-column>
 40 | 					<bwt-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size."></bwt-datatable-column>
 41 | 					<bwt-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></bwt-datatable-column>
 42 | 					<bwt-datatable-column header="[[carbsHeader]]" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></bwt-datatable-column>
 43 | 					<bwt-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></bwt-datatable-column>
 44 | 					<bwt-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></bwt-datatable-column>
 45 | 					<bwt-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></bwt-datatable-column>
 46 | 					<bwt-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></bwt-datatable-column>
 47 | 				</bwt-datatable>
 48 | 
 49 | 		</template>
 50 | 
 51 | 		<script>
 52 | 			var app = document.querySelector('#app');
 53 | 			app.data = [
 54 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
 55 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
 56 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
 57 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
 58 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
 59 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
 60 | 			];
 61 | 			app.toFixedOne = function(value){
 62 | 				return value.toFixed(1);
 63 | 			};
 64 | 			app.toPercentage = function(value){
 65 | 				return Math.round(value * 10000)/100 + '%';
 66 | 			};
 67 |       app.carbsHeader = 'Carbs';
 68 | 
 69 |       suite('<bwt-datatable>', function() {
 70 | 				test('select two rows', function(done){
 71 |           var datatable = app.$.datatable;
 72 | 					datatable.select(app.data[0]);
 73 | 					datatable.select(app.data[2]);
 74 |           assert.strictEqual(datatable.selectedItems.length, 2);
 75 | 					assert.isTrue(datatable.selectedKeys[0] == '#0');
 76 | 					assert.isTrue(datatable.selectedKeys[1] == '#2');
 77 | 					done();
 78 | 				});
 79 | 				test('deselect all', function(done){
 80 | 					var datatable = app.$.datatable;
 81 | 					datatable.deselectAll();
 82 |           assert.strictEqual(datatable.selectedItems.length, 0);
 83 | 					assert.isTrue(datatable.selectedKeys.length === 0);
 84 | 					done();
 85 | 				});
 86 | 				test('toggle all(select all rows in table)', function(done){
 87 | 					var datatable = app.$.datatable;
 88 | 					datatable.toggleAll();
 89 | 					assert.isTrue(datatable.selectedKeys.length === 6);
 90 | 					datatable.toggleAll();
 91 | 					assert.isTrue(datatable.selectedKeys.length === 0);
 92 | 					done();
 93 | 				});
 94 |         test('binding to column header', function(done) {
 95 |           var datatable = app.$.datatable;
 96 |           var columns = Polymer.dom(document).querySelectorAll('bwt-datatable-column');
 97 |           assert.strictEqual(columns[3].header, app.carbsHeader);
 98 |           app.carbsHeader = 'Organic';
 99 |           assert.strictEqual(columns[3].header, app.carbsHeader);
100 |           done();
101 |         });
102 |       });
103 |   </script>
104 | 
105 | </body>
106 | </html>


--------------------------------------------------------------------------------
/demo/paper-datatable/playground.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 
  5 | 		<title>`paper-datatable` playground</title>
  6 | 
  7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  8 | 		<script src="../libs/relativeDate.js"></script>
  9 | 		<script>
 10 | 			window.Polymer = window.Polymer || {};
 11 | 			window.Polymer.dom = 'shadow';
 12 | 		</script>
 13 | 		<link rel="import" href="../../../polymer/polymer.html">
 14 | 		<link rel="import" href="../../../paper-card/paper-card.html">
 15 | 		<link rel="import" href="../../bwt-datatable-card.html">
 16 | 		<link rel="import" href="../../bwt-datatable.html">
 17 | 		<link rel="import" href="../../docs/documentation-menu.html">
 18 | 
 19 | 	</head>
 20 | 	<body>
 21 | 		<template is="dom-bind" id="app">
 22 | 			<custom-style>
 23 | 				<style is="custom-style">
 24 | 					:host {
 25 | 						--paper-datatable-array-item: {
 26 | 							min-width: 15px;
 27 | 							height: 17px;
 28 | 							text-align: center;
 29 | 							border-radius: 8px;
 30 | 							background: gray;
 31 | 							color: white;
 32 | 							padding: 0px 1px;
 33 | 						};
 34 | 					}
 35 | 
 36 | 					paper-card{
 37 | 						padding:20px;
 38 | 						margin:20px;
 39 | 						display:block;
 40 | 					}
 41 | 				</style>
 42 | 			</custom-style>
 43 | 			<demo-menu>
 44 | 				<paper-card>
 45 | 					<paper-datatable data="{{data}}" selectable>
 46 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" tooltip="Some title" sortable>	</paper-datatable-column>
 47 | 						<paper-datatable-column header="Calories" property="calories" type="Number" tooltip="The total amount of..." sortable>
 48 | 							<template>
 49 | 								<paper-input value="{{value}}" no-label-float></paper-input>
 50 | 							</template>
 51 | 						</paper-datatable-column>
 52 | 					</paper-datatable>
 53 | 				</paper-card>
 54 | 
 55 | 				<paper-card>
 56 | 					<paper-datatable data="{{data}}" selectable multi-selection>
 57 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" tooltip="Some title" sortable>	</paper-datatable-column>
 58 | 						<paper-datatable-column header="Calories" property="calories" type="Number" tooltip="The total amount of..." sortable>
 59 | 							<template>
 60 | 								<paper-input value="{{value}}"></paper-input>
 61 | 								<paper-input value="{{item.calories}}"></paper-input>
 62 | 								<paper-input value="{{item.complexObj.a}}"></paper-input>
 63 | 							</template>
 64 | 						</paper-datatable-column>
 65 | 						<paper-datatable-column header="Object" property="complexObj" type="Object" tooltip="The total amount of..." sortable>
 66 | 							<template>
 67 | 								<paper-input value="{{value.a}}"></paper-input>
 68 | 								<paper-input value="{{item.complexObj.a}}"></paper-input>
 69 | 								<paper-input value="{{item.complexObj.b}}"></paper-input>
 70 | 							</template>
 71 | 						</paper-datatable-column>
 72 | 						<paper-datatable-column header="Array" property="arr" type="Array" tooltip="The total amount of..." sortable>
 73 | 							<template>
 74 | 								<template is="dom-repeat" items="{{value}}" as="valueItem">
 75 | 									<paper-input value="{{valueItem}}"></paper-input>
 76 | 								</template>
 77 | 							</template>
 78 | 						</paper-datatable-column>
 79 | 					</paper-datatable>
 80 | 				</paper-card>
 81 | 
 82 | 				<paper-card>
 83 | 					<paper-datatable id="lastDataTable" data="{{data}}" selectable multi-selection on-row-tap="log">
 84 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" sortable editable></paper-datatable-column>
 85 | 						<paper-datatable-column header="Yummy" property="yummy" type="Boolean" sortable editable align="center"></paper-datatable-column>
 86 | 						<paper-datatable-column header="Calories" property="calories" type="Number" sortable editable></paper-datatable-column>
 87 | 						<paper-datatable-column header="Array" property="arr" type="Array" on-cell-tap="log"></paper-datatable-column>
 88 | 						<paper-datatable-column header="Complex Array" property="complexArr" type="Array" array-display-prop="title"></paper-datatable-column>
 89 | 						<paper-datatable-column id="dateTest" header="Created" property="created" type="Date" sortable format-value="{{formatDate}}"></paper-datatable-column>
 90 | 						<paper-datatable-column id="dateTest" header="Created" property="created" type="Date" sortable></paper-datatable-column>
 91 | 					</paper-datatable>
 92 | 				</paper-card>
 93 | 
 94 | 				Calories: <span>[[getItem(data.*, 'data.0.calories')]]</span>
 95 | 				Array item: <span>[[getItem(data.*, 'data.0.arr.0')]]</span>
 96 | 				<paper-button on-tap="deselectAll">Deselect all</paper-button>
 97 | 			</demo-menu>
 98 | 		</template>
 99 | 
100 | 		<script>
101 | 			var app = document.querySelector('#app');
102 | 			//this function is necessary, because since Polymer 1.2 paths with indexes aren't allowed in direct bindings
103 | 			app.getItem = function(watcher, path){
104 | 				return this.get(path);
105 | 			};
106 | 			app.data = [
107 | 				{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)},
108 | 				{title: 'Dessert', yummy: true, calories: 3000, complexObj: {a: 'bb', b: 'dd'}, arr: [5,6], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447155235838)},
109 | 				{title: 'Cake', yummy: false, calories: 4000, complexObj: {a: 'cc', b: 'gg'}, arr: [7,8], complexArr: [{title:'b'}, {title:'c'}], created: new Date(1447355135838)}
110 | 			];
111 | 			app.log = function(ev){
112 | 				console.info('event', ev.type, 'on', ev.target, 'with detail', ev.detail);
113 | 			};
114 | 			app.deselectAll = function(){
115 | 				app.$.lastDataTable.deselectAll();
116 | 			};
117 | 
118 | 			/* relativeDate is defined in relativeDate.js */
119 | 			app.formatDate = relativeDate;
120 | 		</script>
121 | 
122 | 	</body>
123 | </html>
124 | 


--------------------------------------------------------------------------------
/demo/paper-datatable/editable.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 
 5 | 		<title>`[editable]` data tables</title>
 6 | 
 7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 		<script>
 9 | 			window.Polymer = window.Polymer || {};
10 | 			window.Polymer.dom = 'shadow';
11 | 		</script>
12 | 		<link rel="import" href="../../../polymer/polymer.html">
13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
14 | 		<link rel="import" href="../../bwt-datatable-card.html">
15 | 		<link rel="import" href="../../bwt-datatable.html">
16 | 		<link rel="import" href="../../docs/documentation-menu.html">
17 | 
18 | 	</head>
19 | 	<body>
20 | 
21 | 		<template is="dom-bind" id="app">
22 | 			<custom-style>
23 | 				<style is="custom-style">
24 | 					:host {
25 | 						overflow:hidden;
26 | 					}
27 | 
28 | 					paper-card {
29 | 						margin-bottom:20px;
30 | 						display:block;
31 | 						--paper-card-header-text: {
32 | 							font-family: 'Roboto', 'Noto', sans-serif;
33 | 							font-weight: normal;
34 | 							font-size: 20px;
35 | 						}
36 | 						--paper-card-header: {
37 | 							padding-left: 14px;
38 | 						}
39 | 					}
40 | 					
41 | 				</style>
42 | 			</custom-style>
43 | 			<demo-menu>
44 | 				<paper-card heading="And one with `[editable]` and `[dialog]` added to the first column.">
45 | 					<paper-datatable data="{{data}}" id="datatableElement" selectable multi-selection>
46 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" editable dialog edit-icon sortable>
47 | 							<template>
48 | 								<paper-input value="{{value}}" no-label-float maxlength="40" char-counter></paper-input>
49 | 							</template>
50 | 						</paper-datatable-column>
51 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable sorted tooltip="The total amount of food energy in the given serving size."></paper-datatable-column>
52 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
53 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
54 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
55 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
56 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
57 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
58 | 					</paper-datatable>
59 | 				</paper-card>
60 | 
61 | 				<paper-card heading="And one with just `[editable]` added to each column.">
62 | 					<paper-datatable data="{{data}}" selectable multi-selection>
63 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" editable sortable></paper-datatable-column>
64 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" editable sortable sorted tooltip="The total amount of food energy in the given serving size."></paper-datatable-column>
65 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" editable sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
66 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" editable sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
67 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" editable sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
68 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" editable sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
69 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="String" align="right" editable sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
70 | 						<paper-datatable-column header="Iron (%)" property="iron" type="String" align="right" editable sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
71 | 					</paper-datatable>
72 | 				</paper-card>
73 | 			</demo-menu>
74 | 
75 | 		</template>
76 | 
77 | 		<script>
78 | 			var app = document.querySelector('#app');
79 | 			app.data = [
80 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
81 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
82 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
83 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
84 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
85 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
86 | 
87 | 			];
88 | 			app.toFixedOne = function(value){
89 | 				return value.toFixed(1);
90 | 			};
91 | 			app.toPercentage = function(value){
92 | 				return Math.round(value * 10000)/100 + '%';
93 | 			};
94 | 		</script>
95 | 
96 | 	</body>
97 | </html>
98 | 


--------------------------------------------------------------------------------
/demo/miscellaneous/events.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 
  5 | 		<title>Event explorer</title>
  6 | 
  7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  8 | 		<script>
  9 | 			window.Polymer = window.Polymer || {};
 10 | 			window.Polymer.dom = 'shadow';
 11 | 		</script>
 12 | 		<link rel="import" href="../../../polymer/polymer.html">
 13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
 14 | 		<link rel="import" href="../../bwt-datatable-card.html">
 15 | 		<link rel="import" href="../../bwt-datatable.html">
 16 | 		<link rel="import" href="../../docs/documentation-menu.html">
 17 | 
 18 | 	</head>
 19 | 	<body>
 20 | 
 21 | 			<template is="dom-bind" id="app">
 22 | 				<custom-style>
 23 | 					<style is="custom-style">
 24 | 						h2 {
 25 | 							@apply --paper-font-title;
 26 | 							font-size: 18px !important;
 27 | 							font-variant: small-caps;
 28 | 						}
 29 | 						pre{
 30 | 							/* display:block;word-wrap: break-word;background:rgb(245,245,245);padding:5px; */
 31 | 							overflow: auto;
 32 | 							margin: 10px -15px;
 33 | 							padding: 15px;
 34 | 							background: rgb(250,250,250);
 35 | 							border-top: 1px solid rgb(230, 230, 230);
 36 | 							border-bottom: 1px solid rgb(230, 230, 230);
 37 | 						}
 38 | 						.noEvents{
 39 | 							margin: 10px;
 40 | 							text-align: center;
 41 | 							font-variant: small-caps;
 42 | 							color: rgba(0,0,0,.8);
 43 | 						}
 44 | 					</style>
 45 | 				</custom-style>
 46 | 				<paper-drawer-panel right-drawer>
 47 | 					<paper-header-panel drawer style="overflow-y:auto;overflow-x:hidden;" mode="waterfall">
 48 | 						<paper-toolbar><h2 style="margin-left:0px;" class="title">Event log</h2></paper-toolbar>
 49 | 
 50 | 						<div class="content fit" style="border-left: 1px solid rgb(230, 230, 230);">
 51 | 							<template is="dom-repeat" items="[[eventLog]]" sort="[[inverse]]">
 52 | 								<div style="padding:3px 15px;margin:10px 0px;padding-bottom:10px;border-bottom: 1px dotted rgb(230, 230, 230);">
 53 | 									<strong>[[item.type]]</strong> on <code>&lt;paper-[[item.on]]&gt;</code><br>
 54 | 									<pre>[[item.message]]</pre>
 55 | 									<i>[[item.error]]</i>
 56 | 								</div>
 57 | 							</template>
 58 | 							<div class="noEvents">
 59 | 								No events logged yet.
 60 | 							</div>
 61 | 						</div>
 62 | 					</paper-header-panel>
 63 | 					<demo-menu main>
 64 | 						<div style="padding:30px;">
 65 | 							<paper-datatable-card id="card" header="Dangerously delicious" number-of-items="49">
 66 | 								<div slot="toolbar-main">
 67 | 								</div>
 68 | 								<div slot="toolbar-select">
 69 | 									<paper-icon-button icon="delete" on-tap="delete"></paper-icon-button>
 70 | 								</div>
 71 | 								<paper-datatable id="datatable" data="{{data}}" selectable multi-selection>
 72 | 									<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable>
 73 | 									</paper-datatable-column>
 74 | 									<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." cell-style="font-weight:bold;"></paper-datatable-column>
 75 | 									<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
 76 | 								</paper-datatable>
 77 | 							</paper-datatable-card>
 78 | 							<p>
 79 | 								Note: This demo attempts to showcase as many events as possible. It should be understood however that a single demo can not show all events as some
 80 | 								events are mutually exclusive.
 81 | 							</p>
 82 | 						</div>
 83 | 					</demo-menu>
 84 | 				</paper-drawer-panel>
 85 | 			</template>
 86 | 
 87 | 
 88 | 		<script>
 89 | 			var app = document.querySelector('#app');
 90 | 			app.data = [
 91 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6},
 92 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9},
 93 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16},
 94 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7},
 95 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16},
 96 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0},
 97 | 				{id: 6, title: 'Lollipop', calories: 392, fat: 0.2},
 98 | 				{id: 7, title: 'Honeycomb', calories: 408, fat: 3.2}
 99 | 			];
100 | 			app.toFixedOne = function(value){
101 | 				return value.toFixed(1);
102 | 			};
103 | 			app.toPercentage = function(value){
104 | 				return Math.round(value * 10000)/100 + '%';
105 | 			};
106 | 
107 | 			app.inverse = function(a, b){
108 | 				return a.timestamp < b.timestamp ? 1 : -1;
109 | 			};
110 | 
111 | 			app.eventLog = [];
112 | 			var log = function(element, ev){
113 | 				console.info(ev.type, ev.detail);
114 | 				try{
115 | 					var message = JSON.stringify(ev.detail);
116 | 				}catch(e){
117 | 					var error = 'See console for details';
118 | 					var message = {};
119 | 					Object.keys(ev.detail).forEach(function(key){
120 | 						try{
121 | 							JSON.stringify(ev.detail[key]);
122 | 							message[key] = ev.detail[key];
123 | 						}catch(e){
124 | 							message[key] = '...';
125 | 						}
126 | 					});
127 | 					message = JSON.stringify(message, null, ' ');
128 | 				}
129 | 				app.push('eventLog', {
130 | 					type: ev.type,
131 | 					message: message,
132 | 					error: error,
133 | 					timestamp: new Date(),
134 | 					on: element
135 | 				});
136 | 				if(app.eventLog.length > 14){
137 | 					app.splice('eventLog', 0, 1);
138 | 				}
139 | 			};
140 | 			document.addEventListener('WebComponentsReady', function(ev){
141 | 				app.$.card.addEventListener('page-changed', log.bind(app, 'datatable-card'));
142 | 				app.$.card.addEventListener('page-size-changed', log.bind(app, 'datatable-card'));
143 | 				app.$.datatable.addEventListener('sort', log.bind(app, 'datatable'));
144 | 				app.$.datatable.addEventListener('selection-changed', log.bind(app, 'datatable'));
145 | 				app.$.datatable.addEventListener('row-tap', log.bind(app, 'datatable'));
146 | 				app.$.datatable.addEventListener('cell-tap', log.bind(app, 'datatable'));
147 | 				app.$.datatable.addEventListener('toggle-all', log.bind(app, 'datatable'));
148 | 				var columns = document.querySelectorAll('paper-datatable-column');
149 | 				for(var i=0;i<columns.length;i++){
150 | 					columns[i].addEventListener('cell-tap', log.bind(app, 'datatable-column'));
151 | 				}
152 | 			});
153 | 
154 | 		</script>
155 | 
156 | 	</body>
157 | </html>


--------------------------------------------------------------------------------
/demo/paper-datatable/dynamic-columns.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 
  5 | 		<title>Adding, removing and toggling columns</title>
  6 | 
  7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  8 | 		<script>
  9 | 			window.Polymer = window.Polymer || {};
 10 | 			window.Polymer.dom = 'shadow';
 11 | 		</script>
 12 | 		<link rel="import" href="../../../polymer/polymer.html">
 13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
 14 | 		<link rel="import" href="../../../paper-button/paper-button.html">
 15 | 		<link rel="import" href="../../bwt-datatable-card.html">
 16 | 		<link rel="import" href="../../bwt-datatable.html">
 17 | 		<link rel="import" href="../../docs/documentation-menu.html">
 18 | 
 19 | 	</head>
 20 | 	<body>
 21 | 
 22 | 		<template is="dom-bind" id="app">
 23 | 			<custom-style>
 24 | 				<style is="custom-style">
 25 | 					:host {
 26 | 						overflow: hidden;
 27 | 					}
 28 | 					paper-card {
 29 | 						display: block;
 30 | 						margin-bottom: 20px;
 31 | 						--paper-card-header-text: {
 32 | 							font-family: 'Roboto', 'Noto', sans-serif;
 33 | 							font-weight: normal;
 34 | 							font-size: 20px;
 35 | 						}
 36 | 					}
 37 | 					#actions paper-button {
 38 | 						display: inline-flex;
 39 | 						align-items: center;
 40 | 						background: #3F51B5;
 41 | 						color:white;
 42 | 						margin-bottom: 10px;
 43 | 					}
 44 | 				</style>
 45 | 			</custom-style>
 46 | 			<demo-menu>
 47 | 				<paper-card heading="Just a normal data table">
 48 | 					<paper-datatable data="{{data}}" selectable multi-selection>
 49 | 						<paper-datatable-column id="titleColumn" header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
 50 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
 51 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
 52 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
 53 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
 54 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
 55 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
 56 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
 57 | 					</paper-datatable>
 58 | 				</paper-card>
 59 | 
 60 | 				<paper-card heading="Actions" id="actions">
 61 | 					<div style="padding:0px 20px 20px 20px;">
 62 | 						<paper-button raised on-tap="doInsert">
 63 | 							<iron-icon icon="add"></iron-icon>
 64 | 							&nbsp;Insert column
 65 | 						</paper-button>
 66 | 						<paper-button raised on-tap="doEditableInsert">
 67 | 							<iron-icon icon="add"></iron-icon>
 68 | 							&nbsp;Insert editable column
 69 | 						</paper-button>
 70 | 						<paper-button raised on-tap="doDelete">
 71 | 							<iron-icon icon="delete"></iron-icon>
 72 | 							&nbsp;Delete fourth column
 73 | 						</paper-button>
 74 | 						<paper-button raised on-tap="toggleInactive">
 75 | 							<iron-icon icon="cached"></iron-icon>
 76 | 							&nbsp;Toggle [inactive] on title column
 77 | 						</paper-button>
 78 | 					</div>
 79 | 				</paper-card>
 80 | 
 81 | 		</template>
 82 | 
 83 | 		<script>
 84 | 			var app = document.querySelector('#app');
 85 | 			app.data = [
 86 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
 87 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
 88 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
 89 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
 90 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
 91 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
 92 | 			];
 93 | 			app.toFixedOne = function(value){
 94 | 				return value.toFixed(1);
 95 | 			};
 96 | 			app.toPercentage = function(value){
 97 | 				return Math.round(value * 10000)/100 + '%';
 98 | 			};
 99 | 			app.doInsert = function(){
100 | 				var column = document.createElement('paper-datatable-column');
101 | 				column.header = 'Fat (dyn)';
102 | 				column.property = 'fat';
103 | 				column.type = 'number';
104 | 				column.align = 'right';
105 | 				column.formatValue = app.toFixedOne;
106 | 				var columns = Polymer.dom(document).querySelectorAll('paper-datatable-column');
107 | 				columns[3].parentNode.insertBefore(column, columns[3]);
108 | 			};
109 | 			app.doEditableInsert = function(){
110 | 				var div = document.createElement('div');
111 | 				div.innerHTML = '<paper-datatable-column header="Fat (dyn)" property="fat" type="Number" align="right" editable sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>';
112 | 				var columns = Polymer.dom(document).querySelectorAll('paper-datatable-column');
113 | 				columns[3].parentNode.insertBefore(div.childNodes[0], columns[3]);
114 | 			};
115 | 			app.doDelete = function(){
116 | 				var columns = Polymer.dom(document).querySelectorAll('paper-datatable-column');
117 | 				columns[3].parentNode.removeChild(columns[3]);
118 | 			}
119 | 			app.toggleInactive = function(){
120 | 				if(app.$.titleColumn.inactive){
121 | 					app.$.titleColumn.inactive = false;
122 | 				}else{
123 | 					app.$.titleColumn.inactive = true;
124 | 				}
125 | 			};
126 | 		</script>
127 | 
128 | 	</body>
129 | </html>
130 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![Published on NPM](https://img.shields.io/npm/v/bwt-datatable.svg)](https://www.npmjs.com/package/bwt-datatable)
  2 | [![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/bluewatertracksbwt-datatable)
  3 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bluewatertracks/bwt-datatable)
  4 | 
  5 | # bwt-datatable
  6 | 
  7 | ### News! New stable release 3.0.0
  8 | This package was updated to ES6 syntax and now support Polymer 3!
  9 | 
 10 | The new version `3.0.0` works only with Polymer 3.0 or above. If you want to use it with Polymer 2.* please use previous version `2.2.0`.
 11 | 
 12 | You can find new example how to use it in the file `example/your-datatable-implementation.js`.
 13 | 
 14 | ### About
 15 | We greatly appreciated the work of [David Mulder's paper-datatable](https://github.com/David-Mulder/paper-datatable) but since it hasn't been active for a while and we at Blue Water Tracks really wanted to keep pushing the work done so far, we decided to inherit the project and let it evolve but combining the pull requests on the project along with a couple of fixes and features that we came up with. Since many people already use the `paper-datatable` component, we created this component to make sure that it is compatible with the `paper-datatable` component. You can easily use this element only changing the path to `paper-datatable` import element like below. 
 16 | We hope that David takes what we have done with`bwt-datatable` and merges it into the original `paper-datatable`. 
 17 | 
 18 | ### Before
 19 | 	<link rel="import" href="/bower_components/paper-datatable/paper-datatable.html">
 20 | 
 21 | ### Now
 22 | 	<link rel="import" href="/bower_components/bwt-datatable/bwt-datatable.html">
 23 | 
 24 | If you already used selection toolbar in `paper-datatable-card` you need to add slot property to it like this: 
 25 | 
 26 |     <div slot="toolbar-select-single">
 27 |       <paper-icon-button icon="info" on-tap="info"></paper-icon-button>
 28 |     </div>
 29 |     <div slot="toolbar-select">
 30 |       <paper-icon-button icon="delete" on-tap="delete"></paper-icon-button>
 31 |     </div>
 32 | 
 33 |  - Original `paper-datatable` documentation and demos can be found [here](http://david-mulder.github.io/paper-datatable/components/paper-datatable/docs/docs.html?installation)
 34 |  - Our documentation and demos can be found [here](https://bluewatertracks.github.io/bwt-datatable/components/bwt-datatable/docs/docs.html?installation)
 35 | 
 36 | 
 37 | [![datatable full implementation](http://david-mulder.github.io/paper-datatable/components/paper-datatable/docs/screenshot.png)](http://david-mulder.github.io/paper-datatable/components/paper-datatable/demo/paper-datatable-card/full-implementation.html)
 38 | 
 39 | ## New changes
 40 | 
 41 |  - Column header update dynamically according to [paper-datatable pull request #78](https://github.com/David-Mulder/paper-datatable/pull/78)
 42 |  - Truly responsive; ability to use `bwt-datatable` on mobile devices by easily setting the  `responseWidth` property to the desired breakpoint resolution.
 43 | 
 44 |  		<paper-datatable data="{{data}}" selectable multi-selection response-width="767px">
 45 | 			<paper-datatable-column header="Title" property="title" sortable editable>
 46 | 			</paper-datatable-column>
 47 | 		</paper-datatable>
 48 | 
 49 | <p align="center">
 50 |   <img src="https://github.com/bluewatertracks/bwt-datatable/blob/master/images/bwt-datatable-mobile.png" alt="bwt-datatable mobile view"/>
 51 | </p>
 52 | 
 53 | - Table and/or column header can be fixed to the top of the page for better usability when you have very big amount of data in table. More info can be found [here](https://bluewatertracks.github.io/bwt-datatable/components/bwt-datatable/docs/docs.html?getting-started#fixed-header)
 54 | 
 55 | <p align="center">
 56 |   <img src="https://github.com/bluewatertracks/bwt-datatable/blob/master/images/header-fixed.gif" alt="bwt-datatable fixed header"/>
 57 | </p>
 58 | 
 59 | We also tried to add additional functionality and fix some of the bugs in paper-datatable and also merge the following pull requests for ``paper-datatable``
 60 | - Fix issue with null values inside paper-column [pull request #113](https://github.com/David-Mulder/paper-datatable/pull/113)
 61 | - Change es6 to es5 code to support some of the older browsers [request #51](https://github.com/David-Mulder/paper-datatable/pull/51) and [request #106](https://github.com/David-Mulder/paper-datatable/pull/106)
 62 |  (Hopefully when Polymer 2 ships with transpiling, we can rewrite the code into proper ES6 code)
 63 | - Use textContent instead of innerHTML inside elements [request #108](https://github.com/David-Mulder/paper-datatable/pull/108)
 64 | 
 65 | ## Installation
 66 | 
 67 | The element can be installed using bower using
 68 | 
 69 |     bower install --save bwt-datatable
 70 | 
 71 | **Important:** If you wish to use `<bwt-datatable-card>` you need the paper elements listed in `devDependencies` as well. They are not listed as normal dependencies to prevent them from being pulled in on production if you do not need them.
 72 | 
 73 | ## Usage
 74 | 
 75 | Check out the [getting started guide](https://bluewatertracks.github.io/bwt-datatable/components/bwt-datatable/docs/docs.html?getting-started).
 76 | 
 77 | ## Contributors
 78 | 
 79 | | | | |
 80 | |----------|:-------------:|------:|
 81 | | [![@bhargavkonkathi](https://avatars2.githubusercontent.com/u/24550636?v=3&u=ddd3f64f6888100d6eebd283768b61dabc6f495d&s=80)](https://github.com/bhargavkonkathi) |  Programming is like playing chess; each line is as important as each step to determine what kind of player or programmer you are. When ever not playing chess, it's Javascript, Java and mongodb.
 82 | | [![@maisnamraju](https://avatars2.githubusercontent.com/u/2786378?v=3&s=80)](https://github.com/maisnamraju) |  Javascript Ninja; saving the world with one line of javascript at a time. ;) 
 83 | | [![@dhrytsenko](https://avatars0.githubusercontent.com/u/12988041?v=3&s=80)](https://github.com/dhrytsenko) | What is my opinion about JavaScript, NodeJS, MongoDB and Polymer? Building blocks to the future! Allowing me to help make the world a better place.
 84 | 
 85 | 
 86 | 
 87 | ## Pull Requests are welcome
 88 | 
 89 | If you feel that you have something that could improve the component, please feel free to send a PR or create an issue with an explaination.
 90 | 
 91 | ## License
 92 | 
 93 | This program is free software: you can redistribute it and/or modify
 94 | it under the terms of the GNU General Public License version 3 of the License as published by
 95 | the Free Software Foundation.
 96 | 
 97 | This program is distributed in the hope that it will be useful,
 98 | but WITHOUT ANY WARRANTY; without even the implied warranty of
 99 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
100 | GNU General Public License for more details.
101 | 
102 | This project uses a fair share license construction, if you wish to use this project commercially you will likely want to
103 | continue reading [here](https://github.com/David-Mulder/fair-share-license/blob/master/CONTRIBUTING.md). If you wish to
104 | donate please contact me personally.
105 | 


--------------------------------------------------------------------------------
/demo/miscellaneous/theming.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 
  5 | 		<title>Theming options</title>
  6 | 
  7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  8 | 		<script>
  9 | 			window.Polymer = window.Polymer || {};
 10 | 			window.Polymer.dom = 'shadow';
 11 | 		</script>
 12 | 		<link rel="import" href="../../../polymer/polymer.html">
 13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
 14 | 		<link rel="import" href="../../bwt-datatable-card.html">
 15 | 		<link rel="import" href="../../bwt-datatable.html">
 16 | 		<link rel="import" href="../../docs/documentation-menu.html">
 17 | 
 18 | 
 19 | 	</head>
 20 | 	<body>
 21 | 		<demo-menu>
 22 | 			<template is="dom-bind" id="app">
 23 | 				<custom-style>
 24 | 					<style is="custom-style">
 25 | 						html {
 26 | 							--dark-primary-color:       #D32F2F;
 27 | 							--default-primary-color:    #F44336;
 28 | 							--light-primary-color:      #FFCDD2;
 29 | 							--accent-color:             #FF9800;
 30 | 							--primary-background-color: #FFCDD2;
 31 | 							--primary-text-color:       #212121;
 32 | 							--secondary-text-color:     #727272;
 33 | 							--disabled-text-color:      #BDBDBD;
 34 | 							--divider-color:            rgba(0,0,0,.3);
 35 | 
 36 | 							--paper-progress-active-color: #EC407A;
 37 | 							--paper-progress-container-color: var(--paper-grey-800);
 38 | 
 39 | 							--paper-input-container-input-color: rgba(255, 255, 255, var(--dark-primary-opacity));
 40 | 							--paper-input-container-focus-color: #EC407A;
 41 | 						}
 42 | 
 43 | 						demo-menu{
 44 | 							--demo-menu-background: #303030;
 45 | 						}
 46 | 
 47 | 						paper-datatable-card{
 48 | 							max-width: 1000px;
 49 | 							margin: 30px auto;
 50 | 							--paper-datatable-selection-toolbar-color: var(--paper-grey-900);
 51 | 							--paper-datatable-card: {
 52 | 								background: var(--paper-grey-800);
 53 | 							};
 54 | 							color: rgba(255, 255, 255, var(--dark-primary-opacity));
 55 | 							--paper-input-container-input-color: rgba(255, 255, 255, var(--dark-primary-opacity));
 56 | 							--paper-datatable-navigation-bar-text-color: rgba(255, 255, 255, var(--dark-primary-opacity));
 57 | 
 58 | 							--paper-datatable-top-toolbar-text-color: rgba(255, 255, 255, var(--dark-primary-opacity));
 59 | 
 60 | 						}
 61 | 
 62 | 						paper-datatable{
 63 | 							--paper-datatable-row-hover-color: inherit;
 64 | 							--paper-datatable-row-selection-color: inherit;
 65 | 
 66 | 							--paper-datatable-column-header: {
 67 | 								color: inherit;
 68 | 								padding-left: 5px;
 69 | 								padding-right: 5px;
 70 | 								min-width: 73px;
 71 | 								border-bottom: 0px;
 72 | 							};
 73 | 							--paper-datatable-column-header-sorted: {
 74 | 								color: inherit;
 75 | 							};
 76 | 							--paper-datatable-column-header-sort-icon-hover: {
 77 | 								color: rgba(255, 255, 255, .5)
 78 | 							};
 79 | 							--paper-datatable-column-header-last: {
 80 | 								padding-right: 24px;
 81 | 							};
 82 | 							--paper-datatable-cell-last: {
 83 | 								padding-right: 24px;
 84 | 							};
 85 | 
 86 | 							--paper-datatable-header-checkbox-border-color: rgba(255, 255, 255, var(--dark-primary-opacity));
 87 | 
 88 | 							--paper-datatable-cell: {
 89 | 								color: #212121;
 90 | 								padding-left: 5px;
 91 | 								padding-right: 5px;
 92 | 							};
 93 | 
 94 | 							--paper-datatable-edit-dialog-color: #303030;
 95 | 
 96 | 							--paper-datatable-edit-dialog: {
 97 | 								border: 1px solid rgba(255, 255, 255, .2);
 98 | 								box-sizing: border-box;
 99 | 							}
100 | 
101 | 						}
102 | 					</style>
103 | 				</custom-style>
104 | 				<paper-datatable-card header="Dangerously delicious">
105 | 					<div slot="toolbar-main">
106 | 						<paper-icon-button icon="more-vert"></paper-icon-button>
107 | 					</div>
108 | 					<div slot="toolbar-select">
109 | 						<paper-icon-button icon="delete"></paper-icon-button>
110 | 					</div>
111 | 					<paper-datatable data="{{data}}" selectable multi-selection custom-row-style="{{generateRowCss}}" progress="{{progressBarVisble}}" sort-property="calories" sort-direction="asc">
112 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable editable dialog edit-icon>
113 | 							<template>
114 | 								<paper-input value="{{value}}" no-label-float maxlength="40" char-counter></paper-input>
115 | 							</template>
116 | 						</paper-datatable-column>
117 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." cell-style="font-weight:bold;"></paper-datatable-column>
118 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
119 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
120 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
121 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
122 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
123 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
124 | 					</paper-datatable>
125 | 				</paper-datatable-card>
126 | 
127 | 			</template>
128 | 
129 | 		</demo-menu>
130 | 
131 | 		<script>
132 | 			var app = document.querySelector('#app');
133 | 			app.data = [
134 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01},
135 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01},
136 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07},
137 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
138 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
139 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0},
140 | 				{id: 6, title: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, sodium: 38, calcium:0, iron: .02},
141 | 				{id: 7, title: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, sodium: 562, calcium:0, iron: .45}
142 | 			];
143 | 			app.toFixedOne = function(value){
144 | 				return value.toFixed(1);
145 | 			};
146 | 			app.toPercentage = function(value){
147 | 				return Math.round(value * 10000)/100 + '%';
148 | 			};
149 | 			app.generateRowCss = function(item){
150 | 				var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
151 | 				var min = 150;
152 | 				var max = 450;
153 | 				var level = Math.floor((item.calories - min)/(max-min)*levels.length);
154 | 				return 'background:'+levels[level]+';';
155 | 			};
156 | 
157 | 			app.progressBarVisble = true;
158 | 			setTimeout(function(){
159 | 				app.progressBarVisble = false;
160 | 			}.bind(this), 1000)
161 | 		</script>
162 | 
163 | 	</body>
164 | </html>
165 | 


--------------------------------------------------------------------------------
/demo/data/users.json:
--------------------------------------------------------------------------------
1 | {"results":[{"gender":"female","name":{"title":"mrs","first":"kitty","last":"gomez"},"location":{"street":"5428 w pecan st","city":"seattle","state":"alaska","postcode":37747},"email":"kitty.gomez@example.com","login":{"username":"bigswan105","password":"premium","salt":"RnAIjulY","md5":"e5a799e7dd2b1e511930e9b3a0e59799","sha1":"eb13b29b95fbd6863edca11464338a8f9a18fbb1","sha256":"7a6a3abc4ba94f3d6a4edc30a21dca864e4545071b93707d76aa7c6356bff3f4"},"dob":"1951-06-29 14:16:31","registered":"2004-10-16 02:09:09","phone":"(932)-724-2792","cell":"(598)-407-4287","id":{"name":"SSN","value":"189-12-4006"},"picture":{"large":"https://randomuser.me/api/portraits/women/75.jpg","medium":"https://randomuser.me/api/portraits/med/women/75.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/75.jpg"},"nat":"US"},{"gender":"female","name":{"title":"miss","first":"stacey","last":"douglas"},"location":{"street":"3052 nowlin rd","city":"atlanta","state":"tennessee","postcode":61048},"email":"stacey.douglas@example.com","login":{"username":"blackmouse315","password":"farscape","salt":"8tU79t1H","md5":"dfbec4cfbc852e87a2fc7413d35d102a","sha1":"96c3ede68e9ad41de6e8da3064120cabd44a1585","sha256":"c4dcd5e33683c91164220ed0b9ebc49136125bc5abf5900b2803478a3370706a"},"dob":"1947-09-06 14:09:43","registered":"2003-11-28 03:13:34","phone":"(309)-662-6909","cell":"(540)-801-7919","id":{"name":"SSN","value":"940-65-8377"},"picture":{"large":"https://randomuser.me/api/portraits/women/16.jpg","medium":"https://randomuser.me/api/portraits/med/women/16.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/16.jpg"},"nat":"US"},{"gender":"female","name":{"title":"miss","first":"ann","last":"jacobs"},"location":{"street":"6686 depaul dr","city":"concord","state":"louisiana","postcode":66921},"email":"ann.jacobs@example.com","login":{"username":"greenbear180","password":"tigers","salt":"khzi6CdY","md5":"98d95601cb467b688532f131315442a9","sha1":"27830d7a433cdd9e6cacf2400f17c7d1d3b08947","sha256":"872bb41798abfdc24b57e60e0bda70efe0fa408af80c26c4b3a6802d90ea304f"},"dob":"1972-07-31 07:22:12","registered":"2012-08-01 09:15:40","phone":"(484)-558-1420","cell":"(928)-465-0404","id":{"name":"SSN","value":"637-07-6751"},"picture":{"large":"https://randomuser.me/api/portraits/women/63.jpg","medium":"https://randomuser.me/api/portraits/med/women/63.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/63.jpg"},"nat":"US"},{"gender":"male","name":{"title":"mr","first":"tommy","last":"douglas"},"location":{"street":"9916 lovers ln","city":"orlando","state":"connecticut","postcode":43242},"email":"tommy.douglas@example.com","login":{"username":"greenwolf454","password":"melrose","salt":"uzmE1MI5","md5":"888a8d1215fd54b7f4ee4e8f12727200","sha1":"4b30ebc49fa0b06e1d08e48acdb5a083071508aa","sha256":"1c9bc112adeb5eceec76f78831d223a05d510337438df83f7da2d68a7a0820a0"},"dob":"1993-08-21 11:37:24","registered":"2015-10-05 00:14:35","phone":"(485)-920-8741","cell":"(057)-104-3170","id":{"name":"SSN","value":"678-18-0618"},"picture":{"large":"https://randomuser.me/api/portraits/men/61.jpg","medium":"https://randomuser.me/api/portraits/med/men/61.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/men/61.jpg"},"nat":"US"},{"gender":"male","name":{"title":"mr","first":"charlie","last":"caldwell"},"location":{"street":"7029 paddock way","city":"waterbury","state":"new jersey","postcode":80162},"email":"charlie.caldwell@example.com","login":{"username":"redwolf895","password":"ladybug","salt":"ifWQQ5EC","md5":"650fbfbef22a772a0d8195db91c3687e","sha1":"b47b3bed4d0420a254e4988e8330a3bc63e26d90","sha256":"2cf2b3b14db1b3068f0ab334103435fbfadc948fbcd4a707a661822918498432"},"dob":"1961-01-19 16:01:15","registered":"2016-07-09 06:05:49","phone":"(919)-192-9766","cell":"(283)-943-7595","id":{"name":"SSN","value":"689-62-8258"},"picture":{"large":"https://randomuser.me/api/portraits/men/29.jpg","medium":"https://randomuser.me/api/portraits/med/men/29.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/men/29.jpg"},"nat":"US"},{"gender":"male","name":{"title":"mr","first":"howard","last":"holt"},"location":{"street":"5738 w 6th st","city":"addison","state":"arkansas","postcode":80071},"email":"howard.holt@example.com","login":{"username":"crazywolf632","password":"shrimp","salt":"HP2DAxNU","md5":"701b4ec067e7bb41071572e4612d1e29","sha1":"ed2582ac9860b6f5ea72cb866e375c56bc15f128","sha256":"f01349e296e4498c8acac30d96fce682efc9290a910f23f82bb429168a715e94"},"dob":"1950-11-20 07:32:44","registered":"2007-10-31 09:36:10","phone":"(250)-569-6820","cell":"(684)-741-5758","id":{"name":"SSN","value":"555-51-2341"},"picture":{"large":"https://randomuser.me/api/portraits/men/49.jpg","medium":"https://randomuser.me/api/portraits/med/men/49.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/men/49.jpg"},"nat":"US"},{"gender":"female","name":{"title":"mrs","first":"sheila","last":"brewer"},"location":{"street":"9475 w sherman dr","city":"durham","state":"west virginia","postcode":11291},"email":"sheila.brewer@example.com","login":{"username":"blackfish203","password":"preacher","salt":"jWtRRmhR","md5":"65972a82e5bacb8047aa23485e184e44","sha1":"4e19d6b07592b70cf197fe2de798b8a5decdc439","sha256":"47832a30567652ec583a07f27623de5cb71a5ce7d2a713a2dbc5d85a9fe9dd44"},"dob":"1994-06-10 19:41:40","registered":"2012-05-10 03:40:59","phone":"(043)-076-9872","cell":"(555)-378-0203","id":{"name":"SSN","value":"410-85-8697"},"picture":{"large":"https://randomuser.me/api/portraits/women/64.jpg","medium":"https://randomuser.me/api/portraits/med/women/64.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/64.jpg"},"nat":"US"},{"gender":"male","name":{"title":"mr","first":"everett","last":"riley"},"location":{"street":"5800 college st","city":"plano","state":"alabama","postcode":76880},"email":"everett.riley@example.com","login":{"username":"organicleopard307","password":"scuba1","salt":"S47PQWtV","md5":"8cc53c96f2e36ae545de093239c54b98","sha1":"556cf077bf5a4732b19c9dc9251e35fa34071849","sha256":"5ea6b76cc2b761620d6cd1281a9a11bbd9c1e260507acb20bb04701644ad56f9"},"dob":"1966-08-31 04:25:44","registered":"2004-06-14 01:17:29","phone":"(468)-522-1348","cell":"(123)-356-4278","id":{"name":"SSN","value":"800-25-7022"},"picture":{"large":"https://randomuser.me/api/portraits/men/98.jpg","medium":"https://randomuser.me/api/portraits/med/men/98.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/men/98.jpg"},"nat":"US"},{"gender":"female","name":{"title":"ms","first":"louella","last":"martin"},"location":{"street":"4074 mcgowen st","city":"pomona","state":"ohio","postcode":98463},"email":"louella.martin@example.com","login":{"username":"smallsnake131","password":"admin","salt":"w0rLSZDB","md5":"a9405a820aacba756df94d802fa157ad","sha1":"b377254fc02c030c907ffdb63d381d044989dfdb","sha256":"0a5927c2b2ca5f73c698b944881baa73043dd13d5f2ac2618cff7f9793713737"},"dob":"1970-09-27 11:07:59","registered":"2008-07-20 12:33:37","phone":"(433)-192-6687","cell":"(198)-657-3227","id":{"name":"SSN","value":"374-55-1434"},"picture":{"large":"https://randomuser.me/api/portraits/women/24.jpg","medium":"https://randomuser.me/api/portraits/med/women/24.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/24.jpg"},"nat":"US"},{"gender":"female","name":{"title":"ms","first":"kristen","last":"boyd"},"location":{"street":"8304 n stelling rd","city":"flint","state":"indiana","postcode":35861},"email":"kristen.boyd@example.com","login":{"username":"whitefish168","password":"ncc74656","salt":"vI7lIcYd","md5":"5321fdf82380c41bb22777eee1ba58ae","sha1":"9ed259a6e6e55bad4955711bf98e8e52d782670d","sha256":"8ff826b52ac63f6cbb58fcdc0d71dafd27057144804f159f3cc08fc674d58319"},"dob":"1948-06-04 20:30:42","registered":"2009-05-18 07:46:14","phone":"(305)-993-7575","cell":"(706)-645-2149","id":{"name":"SSN","value":"468-80-0972"},"picture":{"large":"https://randomuser.me/api/portraits/women/22.jpg","medium":"https://randomuser.me/api/portraits/med/women/22.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/22.jpg"},"nat":"US"}],"info":{"seed":"e5d518c2a829db5d","results":10,"page":1,"version":"1.1"}}


--------------------------------------------------------------------------------
/demo/paper-datatable/resize-behavior.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 
  5 | 		<title>Resize behaviors</title>
  6 | 
  7 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  8 | 		<script>
  9 | 			window.Polymer = window.Polymer || {};
 10 | 			window.Polymer.dom = 'shadow';
 11 | 		</script>
 12 | 		<link rel="import" href="../../../polymer/polymer.html">
 13 | 		<link rel="import" href="../../../paper-card/paper-card.html">
 14 | 		<link rel="import" href="../../bwt-datatable-card.html">
 15 | 		<link rel="import" href="../../bwt-datatable.html">
 16 | 		<link rel="import" href="../../docs/documentation-menu.html">
 17 | 
 18 | 	</head>
 19 | 	<body>
 20 | 
 21 | 		<template is="dom-bind" id="app">
 22 | 			<custom-style>
 23 | 				<style is="custom-style">
 24 | 					paper-card {
 25 | 						margin-bottom: 20px;
 26 | 						--paper-card-header-text: {
 27 | 							font-family: 'Roboto', 'Noto', sans-serif;
 28 | 							font-weight: normal;
 29 | 							font-size: 20px;
 30 | 						}
 31 | 					}
 32 | 				</style>
 33 | 			</custom-style>
 34 | 			<demo-menu>
 35 | 
 36 | 				<paper-card heading="'overflow' resize behavior">
 37 | 					<paper-datatable data="{{data}}" selectable multi-selection>
 38 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
 39 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
 40 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
 41 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
 42 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
 43 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
 44 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
 45 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
 46 | 					</paper-datatable>
 47 | 				</paper-card>
 48 | 
 49 | 				<paper-card heading="'fixed' resize behavior">
 50 | 					<paper-datatable data="{{data}}" selectable multi-selection resize-behavior="fixed">
 51 | 						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" sortable></paper-datatable-column>
 52 | 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
 53 | 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
 54 | 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
 55 | 						<paper-datatable-column header="Protein (g)" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
 56 | 						<paper-datatable-column header="Sodium (mg)" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
 57 | 						<paper-datatable-column header="Calcium (%)" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
 58 | 						<paper-datatable-column header="Iron (%)" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
 59 | 					</paper-datatable>
 60 | 				</paper-card>
 61 | 
 62 | 				<paper-card heading="'dynamic-columns' resize behavior">
 63 | 					<paper-datatable data="{{data}}" selectable multi-selection resize-behavior="dynamic-columns">
 64 | 						<paper-datatable-column header="Dessert (100g serving)" resize-priority="-1" width="126" property="title" type="String" sortable></paper-datatable-column>
 65 | 						<paper-datatable-column header="Calories" resize-priority="1" width="72" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
 66 | 						<paper-datatable-column header="Fat (g)" resize-priority="1" width="72" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
 67 | 						<paper-datatable-column header="Carbs (g)" resize-priority="1" width="72" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
 68 | 						<paper-datatable-column header="Protein (g)" resize-priority="1" width="72" property="protein" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of protein in the given serving size."></paper-datatable-column>
 69 | 						<paper-datatable-column header="Sodium (mg)" resize-priority="1" width="72" property="sodium" type="Number" align="right" sortable tooltip="The amount of sodium as a percentage of the recommended daily amount."></paper-datatable-column>
 70 | 						<paper-datatable-column header="Calcium (%)" resize-priority="1" width="72" property="calcium" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of calcium as a percentage of the recommended daily amount."></paper-datatable-column>
 71 | 						<paper-datatable-column header="Iron (%)" resize-priority="1" width="72" property="iron" type="Number" align="right" format-value="[[toPercentage]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount."></paper-datatable-column>
 72 | 						<paper-datatable-column header="Grade" resize-priority="2" width="72" property="grade" type="Number" align="right" format-value="[[outOfTen]]" sortable tooltip="The amount of iron as a percentage of the recommended daily amount." cell-style="font-weight:bold;"></paper-datatable-column>
 73 | 					</paper-datatable>
 74 | 				</paper-card>
 75 | 
 76 | 		</template>
 77 | 
 78 | 		<script>
 79 | 			var app = document.querySelector('#app');
 80 | 			app.data = [
 81 | 				{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4, sodium: 87, calcium:.14, iron: .01, grade: 5},
 82 | 				{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3, sodium: 129, calcium:.08, iron: .01, grade: 7},
 83 | 				{id: 2, title: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6, sodium: 337, calcium:.06, iron: .07, grade: 7},
 84 | 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08, grade: 7},
 85 | 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16, grade: 8},
 86 | 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0, grade: 6}
 87 | 			];
 88 | 			app.toFixedOne = function(value){
 89 | 				return value.toFixed(1);
 90 | 			};
 91 | 			app.toPercentage = function(value){
 92 | 				return Math.round(value * 10000)/100 + '%';
 93 | 			};
 94 | 			app.outOfTen = function(value){
 95 | 				return value + '/10';
 96 | 			};
 97 | 		</script>
 98 | 
 99 | 	</body>
100 | </html>
101 | 


--------------------------------------------------------------------------------
/demo/paper-datatable-card/full-implementation.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 		<title>Full `paper-datatable-card` implementation</title>
  5 | 		<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  6 | 		<script>
  7 | 			window.Polymer = window.Polymer || {};
  8 | 			window.Polymer.dom = 'shadow';
  9 | 		</script>
 10 | 		<link rel="import" href="../../../polymer/polymer.html">
 11 | 		<link rel="import" href="../../bwt-datatable-card.html">
 12 | 		<link rel="import" href="../../bwt-datatable.html">
 13 | 		<link rel="import" href="../../docs/documentation-menu.html">
 14 | 		<link rel="import" href="../../../google-map/google-map.html">
 15 | 		<link rel="import" href="../../../paper-input/paper-textarea.html">
 16 | 		<link rel="import" href="../../../paper-dialog/paper-dialog.html">
 17 | 		<link rel="import" href="../../../paper-button/paper-button.html">
 18 | 		<link rel="import" href="../../../paper-dialog-scrollable/paper-dialog-scrollable.html">
 19 | 		<script src="../../../whenever.js/whenever.js"></script>
 20 | 		<script src="../data/fakeDB.js"></script>
 21 | 		<script src="../data/userData.js"></script>
 22 | 	</head>
 23 | 	<body>
 24 | 
 25 | 		<template is="dom-bind" id="app">
 26 | 			<style>
 27 | 				:host {
 28 | 					background: #f5f5f5;
 29 | 				}
 30 | 			</style>
 31 | 			<demo-menu>
 32 | 				<paper-dialog id="editDialog" with-backdrop style="min-width: 300px; max-width:500px; min-height:300px;">
 33 | 					<!--<template is="dom-repeat" items="[[selectedItems]]" filter="[[onlyFirst]]">-->
 34 | 					<template is="dom-repeat" items="[[selectedItems]]">
 35 | 						<h2>Item #<span>[[item.id]]</span></h2>
 36 | 						<div>
 37 | 							<div class="horizontal layout">
 38 | 								<paper-input value="{{item.name.first}}" label="First Name" class="flex"></paper-input>
 39 | 								<paper-input value="{{item.name.last}}" label="Last Name" class="flex"></paper-input>
 40 | 							</div>
 41 | 							<paper-input value="{{item.birthday}}" label="Birthday"></paper-input>
 42 | 							<paper-input value="{{item.bank}}" label="International Bank Account Number"></paper-input>
 43 | 							<paper-textarea value="{{item.about}}" label="About me"></paper-textarea>
 44 | 							<!--<paper-input-container>
 45 | 								<label>Location</label>
 46 | 								<google-map latitude="{{item.location.lat}}" longitude="{{item.location.lng}}" style="width:100%;height:200px;margin:3px;">
 47 | 									<google-map-marker latitude="{{item.location.lat}}" longitude="{{item.location.lng}}" draggable="true"></google-map-marker>
 48 | 								</google-map>
 49 | 								<input value="set" type="hidden"/ >
 50 | 							</paper-input-container>-->
 51 | 						</div>
 52 | 						<div class="buttons">
 53 | 							<paper-button dialog-confirm>Okay</paper-button>
 54 | 						</div>
 55 | 					</template>
 56 | 				</paper-dialog>
 57 | 
 58 | 				<paper-datatable-card id="datatableCard" header="Users" page-size="10" data-source="{{data}}" id-property="id" selected-ids="{{selectedIds}}">
 59 | 					<div slot="toolbar-main">
 60 | 						<paper-input value="{{searchTerm}}" on-input="retrieveResults" label="Search..." style="display:inline-block" no-label-float>
 61 | 							<div prefix>
 62 | 								<iron-icon icon="search"></iron-icon>
 63 | 							</div>
 64 | 						</paper-input>
 65 | 						<paper-icon-button icon="cached" on-tap="retrieveResults"></paper-icon-button>
 66 | 					</div>
 67 | 					<div slot="toolbar-select">
 68 | 						<paper-icon-button icon="delete" on-tap="deleteSelected"></paper-icon-button>
 69 | 					</div>
 70 | 					<div slot="toolbar-select-single">
 71 | 						<paper-icon-button icon="datatable:editable" on-tap="editDialogForSelected"></paper-icon-button>
 72 | 					</div>
 73 | 					<paper-datatable id="datatable" selectable multi-selection selected-items="{{selectedItems}}" on-row-tap="rowTapped">
 74 | 						<div no-results>
 75 | 							Loading or no more items...
 76 | 						</div>
 77 | 						<paper-datatable-column header="ID" property="id" type="String" tooltip="Some title" sortable align="center" style="min-width: 40px" sorted></paper-datatable-column>
 78 | 						<paper-datatable-column header="Name" property="name" type="Object" tooltip="Some title" sortable style="min-width: 160px">
 79 | 							<template>
 80 | 								<span>[[value.first]]</span>
 81 | 								<span>[[value.last]]</span>
 82 | 							</template>
 83 | 						</paper-datatable-column>
 84 | 						<paper-datatable-column header="Birthday" property="birthday" type="Date" tooltip="Some title" sortable style="min-width: 40px" inactive></paper-datatable-column>
 85 | 						<paper-datatable-column header="About me" property="about" type="String" sortable tooltip="Some title" style="min-width: 320px" dialog format-value="{{clip}}" edit-icon>
 86 | 							<template>
 87 | 								<paper-textarea value="{{value}}" no-label-float></paper-textarea>
 88 | 							</template>
 89 | 						</paper-datatable-column>
 90 | 						<paper-datatable-column header="Location" property="location" type="Object" tooltip="Some title" style="min-width: 300px" cell-style="font-family:monospace;" dialog format-value="{{formatLatLng}}" edit-icon>
 91 | 							<template>
 92 | 								<span>
 93 | 									<google-map latitude="{{value.lat}}" longitude="{{value.lng}}" style="height:300px;margin:20px 0px;" zoom="3">
 94 | 										<google-map-marker latitude="{{value.lat}}" longitude="{{value.lng}}" draggable="true"></google-map-marker>
 95 | 									</google-map>
 96 | 								</span>
 97 | 							</template>
 98 | 						</paper-datatable-column>
 99 | 					</paper-datatable>
100 | 				</paper-datatable-card>
101 | 
102 | 				<div style="padding:20px; max-width:500px; margin:auto;text-align:justify;">
103 | 					Note: This demo isn't using a 'real' database, but instead queries a localStorage array. Sorting, pagination,
104 | 					deleting, etc. are all implemented however on this 'fake' database (including <code>setTimeout</code>'s
105 | 					to emulate AJAX requests) and it should provide a solid starting point when you implement an AJAX
106 | 					based datatable. Also do please check out the edit dialog (by <strong>double clicking or selecting a row and
107 | 					hitting the edit icon in the toolbar</strong>).
108 | 				</div>
109 | 			</demo-menu>
110 | 		</template>
111 | 
112 | 		<script>
113 | 			var app = document.querySelector('#app');
114 | 			
115 | 			app.data = {
116 | 				queryForIds: function(sort, page, pageSize){
117 | 					db.count(app.searchTerm, sort, (page-1)*pageSize, page*pageSize).then(function(count){
118 | 						app.set('data.length', count);
119 | 					});
120 | 					return db.select('id', app.searchTerm, sort, (page-1)*pageSize, page*pageSize);
121 | 				},
122 | 				getByIds: function(ids){
123 | 					return db.select('*', ids);
124 | 				},
125 | 				set: function(item, property, value){
126 | 					return db.update(item.id, property, value);
127 | 				},
128 | 				length:0
129 | 			};
130 | 
131 | 			app.clip = function(value){
132 | 				var substr = value.substr(0, 40);
133 | 				if(substr.length < 40){
134 | 					return substr;
135 | 				}else{
136 | 					return substr + '...';
137 | 				}
138 | 			};
139 | 
140 | 			app.formatLatLng = function(value){
141 | 				var lat = (value.lat > 0 ? '&nbsp;': '') + (value.lat < 10 && value.lat > -10 ? '&nbsp;': '') + value.lat.toFixed(6);
142 | 				var lng = (value.lng > 0 ? '&nbsp;': '') + (value.lng < 10 && value.lng > -10 ? '&nbsp;': '') + (value.lng < 100 && value.lng > -100 ? '&nbsp;': '') + value.lng.toFixed(6);
143 | 				return lat + ' | ' + lng;
144 | 			};
145 | 
146 | 			app.deleteSelected = function(){
147 | 				var users = JSON.parse(localStorage.getItem('users'));
148 | 				app.selectedIds.forEach((id) => {
149 | 					// var index = users.findIndex((item) => id == item.id);
150 | 					// users.splice(index, 1);
151 | 				});
152 | 				// this.saveToLocalStorage(users);
153 | 				this.$.datatableCard.deselectAll();
154 | 				this.$.datatableCard.retrieveVisibleData();
155 | 			};
156 | 
157 | 			app.saveToLocalStorage = function(users){
158 | 				// localStorage.users = JSON.stringify(users);
159 | 			};
160 | 
161 | 			app.editDialogForSelected = function(){
162 | 				this.$.editDialog.opened = true;
163 | 			};
164 | 
165 | 			app.onlyFirst = function(item, index){
166 | 				// if(typeof index === 'undefined'){
167 | 				// 	alert('Please see issue #34');
168 | 				// }
169 | 				// if(index == 0){
170 | 				// 	return true;  
171 | 				// }          
172 | 			};                                    
173 | 
174 |  			app.rowTapped = function(ev){
175 | 				if(app.isDebouncerActive('dblclick'+ev.detail.item.id)){
176 | 					//double click
177 | 					app.$.datatableCard.deselectAll();
178 | 					app.$.datatableCard.select(ev.detail.item.id);
179 | 					app.editDialogForSelected();
180 | 					ev.preventDefault();
181 | 					app.cancelDebouncer('dblclick');
182 | 				}else{
183 | 					app.debounce('dblclick'+ev.detail.item.id, function(){}, 300);
184 | 				}
185 | 			};
186 | 
187 | 			app.retrieveResults = function(ev){
188 | 				app.$.datatableCard.retrieveVisibleData();
189 | 			};
190 | 
191 | 		</script>
192 | 
193 | 	</body>
194 | </html>
195 | 


--------------------------------------------------------------------------------
/examples/your-datatable-implementation.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * This file is only an example how you could use this datatable
  4 |  */
  5 | import { PolymerElement, html } from '@polymer/polymer';
  6 | import '../../node_modules/bwt-datatable/bwt-datatable.js';
  7 | import '../../node_modules/bwt-datatable/bwt-datatable-card.js';
  8 | import '../../node_modules/bwt-datatable/bwt-datatable-column.js';
  9 | class YourDatatable extends PolymerElement {
 10 |     static get template() {
 11 |         return html`
 12 |         <style>
 13 |             :host {
 14 |                 /*
 15 |                     Styles goes here to change something on table
 16 |                 */
 17 |                 --paper-datatable-selection-toolbar-color: var(--secondary-color);
 18 |                 --paper-datatable-selection-toolbar-text-color: #fff;
 19 | 
 20 |                 --paper-datatable-checkbox-color: var(--secondary-color);
 21 |                 --paper-datatable-header-checkbox-color: var(--secondary-color);
 22 |                 --paper-datatable-top-toolbar-header: {
 23 |                     font-size: 16px;
 24 |                     line-height: 20px;
 25 |                     font-weight: bold;
 26 |                     color: var(--page-header-color, #000);
 27 |                 }
 28 |             }
 29 | 
 30 |         </style>
 31 | 
 32 |         <paper-datatable-card id="datatableCard" header="[[headerLabel]]" pagination-label="Cantidad de líneas" data-source="{{dataSource}}" id-property="_id" selected-ids="{{selectedIds}}" page-size="5">
 33 |             <!-- You can add whatever you want to toolbar based on number of selected rows -->
 34 |             <div slot="toolbar-main">
 35 | 				<paper-input value="{{searchTerm}}" on-input="retrieveResults" label="Search..." style="display:inline-block" no-label-float>
 36 |                     <div prefix>
 37 |                         <iron-icon icon="search"></iron-icon>
 38 |                     </div>
 39 | 			    </paper-input>
 40 | 				<paper-icon-button icon="add" role="button"></paper-icon-button>
 41 | 			</div>
 42 | 			<div slot="toolbar-select" hidden$="[[!multiSelection]]">
 43 | 				<paper-icon-button icon="delete"></paper-icon-button>
 44 | 			</div>
 45 | 			<div slot="toolbar-select-single">
 46 | 				<paper-icon-button icon="datatable:editable"></paper-icon-button>
 47 | 			</div>
 48 | 			<paper-datatable id="datatableElement" selectable="[[selectable]]" multi-selection>
 49 | 			    <slot></slot>
 50 | 			</paper-datatable>
 51 | 		</paper-datatable-card>
 52 |         `;
 53 |     }
 54 | 
 55 |     static get is() {
 56 |         return 'your-datatable';
 57 |     }
 58 | 
 59 |     // Element properties
 60 |     static get properties() {
 61 |         return {
 62 |             /**
 63 |              * Datatable props
 64 |              */
 65 |             headerLabel: String,
 66 |             dataSource: Object,
 67 |              /*
 68 |                 A list with selected row items (it's have whole object with all properties)
 69 |             */
 70 |             selectedItems: Array,
 71 |             /*
 72 |                 A list with selected row ids
 73 |             */
 74 |             selectedIds: Array,
 75 |             selectedKeys: Array,
 76 |             /**
 77 |              * You can use this prop to bind selection from parent component
 78 |              */
 79 |             selectable: {
 80 |                 type: Boolean,
 81 |                 value: false,
 82 |             },
 83 |             /**
 84 |              * You can use this prop to bind selection from parent component
 85 |              */
 86 |             multiSelection: {
 87 |                 type: Boolean,
 88 |                 value: false,
 89 |             },
 90 |              /**
 91 |              * Youer property to send data
 92 |              */
 93 |             data: {
 94 |                 type: Array,
 95 |                 value: [],
 96 |                 observer: "_dataChanged"
 97 |             },
 98 |             /**
 99 |              * Query string what you want to find
100 |              */
101 |             searchTerm: {
102 |                 type: String,
103 |                 value: ''
104 |             }
105 |         }
106 |     }
107 | 
108 |     ready() {
109 |         super.ready();
110 |     }
111 | 
112 |     _dataChanged(data) {
113 |         //call it to initialize a table
114 |         this.dataSource = this.setData();
115 |     }
116 |     /**
117 |      * Initialize datatable with funstion to make actions as sort etc
118 |      * @param {string} idProp property which will be served as `id` prop
119 |      */
120 |     setData(idProp) {
121 |         if (!idProp) idProp = "_id";
122 |         return {
123 |             queryForIds: (sort, page, pageSize) => {
124 |                 return this.select(this.data, '_id', this.searchTerm, sort, (page - 1) *
125 |                     pageSize, page * pageSize, idProp);
126 |             },
127 |             getByIds: (ids) => {
128 |                 return this.select(this.data, '*', ids, null, null, null, idProp);
129 |             },
130 |             set: (item, property, value) => {
131 |                 return this.update(item._id, property, value);
132 |             },
133 |             length: 0
134 |         }
135 |     }
136 |     /**
137 |      * Perform all types of actions with table from initialization to filter and sorting
138 |      * @param {Array} columns list of table rows
139 |      * @param {String} rowName property of a row
140 |      * @param {String} query search phase to filder table data
141 |      * @param {Object} orderBy order direction `desc` or `asc`
142 |      * @param {Number} skip when use pagination number of items to skip
143 |      * @param {Number} limit max number of rows in table
144 |      * @param {String} idProp property which will be served as `id` prop
145 |      */
146 |     select(columns, rowName, query, orderBy, skip, limit, idProp) {
147 |         if (typeof query === 'object') {
148 |             return new Promise((resolve, reject) => {
149 |                 resolve(columns.filter((item) => {
150 |                     return query.indexOf(item[idProp]) > -1;
151 |                 }));
152 |             });
153 |         } else {
154 |             return new Promise((resolve, reject) => {
155 |                 var searchedItems;
156 |                 if (query.length > 0) {
157 |                     searchedItems = columns.filter((item) => {
158 |                         for (var key in item) {
159 |                             if (key == '_id' || !item[key]) continue;
160 |                             if (typeof item[key] == "object" || typeof item[key] == "boolean") continue;
161 |                             if (typeof item[key] == "number") item[key] = item[key].toString();
162 |                             if (item[key].toLowerCase().indexOf(query.toLowerCase()) > -1) return true;
163 |                         }
164 |                     });
165 |                 } else {
166 |                     searchedItems = columns;
167 |                 }
168 |                 this.set('dataSource.length', searchedItems.length);
169 |                 if (orderBy && orderBy.property != "_id") {
170 |                     searchedItems.sort((a, b) => {
171 |                         if (orderBy.direction == 'desc') {
172 |                             var c = a;
173 |                             a = b;
174 |                             b = c;
175 |                         }
176 |                         a = a[orderBy.property];
177 |                         b = b[orderBy.property];
178 |                         a = typeof a === 'string' ? a.toLowerCase() : a;
179 |                         b = typeof b === 'string' ? b.toLowerCase() : b;
180 | 
181 |                         if (a > b) return 1;
182 |                         if (a < b) return -1;
183 |                         return 0;
184 |                     });
185 |                 }
186 |                 if (searchedItems.length <= 5 && rowName === '_id')
187 |                     resolve(searchedItems.slice(0, limit).map((item) => item[idProp]));
188 |                 if (rowName === '_id') resolve(searchedItems.slice(skip, limit).map((item) => item[idProp]));
189 |                 else resolve(searchedItems.slice(skip, limit));
190 |             });
191 |         }
192 |     }
193 |     /**
194 |      * Update table in case if you edit cell/row and update it withour full reset and 
195 |      * @param {String} id id of edited row
196 |      * @param {String} property property to change
197 |      * @param {String} value bew value to set
198 |      */
199 |     update(id, property, value) {
200 |         return new Promise((resolve, reject) => {
201 |             var editedItem;
202 |             this.data.forEach((item) => {
203 |                 if (item._id == id) {
204 |                     editedItem = item;
205 |                 }
206 |             });
207 |             //call this func to send data to server
208 |             this._sendDateToServer(editedItem, property, value);
209 |             editedItem[property] = value;
210 |             resolve(true);
211 |         });
212 |     }
213 |     /**
214 |      * Refresh table if perform any actions
215 |      */
216 |     retrieveResults() {
217 |         this.$.datatableCard.retrieveVisibleData();
218 |     }
219 | }
220 | window.customElements.define(YourDatatable.is, YourDatatable);
221 | 


--------------------------------------------------------------------------------
/docs/documentation-menu.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../paper-drawer-panel/paper-drawer-panel.html">
  2 | <link rel="import" href="../../iron-icon/iron-icon.html">
  3 | <link rel="import" href="../../iron-icons/iron-icons.html">
  4 | <link rel="import" href="../../paper-input/paper-input.html">
  5 | <link rel="import" href="../../paper-item/paper-item.html">
  6 | <link rel="import" href="../../paper-menu/paper-menu.html">
  7 | <link rel="import" href="../../paper-menu/paper-submenu.html">
  8 | <link rel="import" href="../../paper-styles/paper-styles.html">
  9 | <link rel="import" href="../../paper-header-panel/paper-header-panel.html">
 10 | <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
 11 | 
 12 | <dom-module id="demo-menu">
 13 | 	<template>
 14 | 		<custom-style>
 15 | 			<style is="custom-style">
 16 | 				iron-icon{
 17 | 					padding-right: 10px;
 18 | 					width: 34px;
 19 | 				}
 20 | 				paper-item{
 21 | 					font-size: 12px;
 22 | 					line-height: 12px;
 23 | 					cursor: pointer;
 24 | 				}
 25 | 				#content{
 26 | 					overflow: auto;
 27 | 					position: absolute;
 28 | 					left: 0px;
 29 | 					top: 0px;
 30 | 					right: 0px;
 31 | 					bottom: 0px;
 32 | 					background: #f5f5f5;
 33 | 					background: var(--demo-menu-background);
 34 | 					padding: 20px;
 35 | 				}
 36 | 				#drawer{
 37 | 					background: white;
 38 | 					position: absolute;
 39 | 					left: 0px;
 40 | 					right: 0px;
 41 | 					top: 0px;
 42 | 					bottom: 0px;
 43 | 					overflow: auto;
 44 | 				}
 45 | 				.menu-content{
 46 | 					padding-left: 10px;
 47 | 				}
 48 | 
 49 | 				paper-header-panel {
 50 | 					--paper-header-panel-shadow: {
 51 | 						height: 0px;
 52 | 						bottom: 0px;
 53 | 					};
 54 | 				}
 55 | 				paper-item.indent{
 56 | 					margin-left: 20px;
 57 | 				}
 58 | 				paper-item.unindent{
 59 | 					margin-left: 0px;
 60 | 				}
 61 | 				.title{
 62 | 					margin-left: 10px !important;
 63 | 					font-size: 18px !important;
 64 | 				}
 65 | 				.title.small{
 66 | 					font-variant: small-caps;
 67 | 					font-size: 16px !important;
 68 | 				}
 69 | 				.search paper-input{
 70 | 					--paper-input-container-color: white;
 71 | 					--paper-input-container-focus-color: lightblue;
 72 | 					--paper-input-container-input-color: white;
 73 | 				}
 74 | 				#noresults{
 75 | 					text-align: center;
 76 | 					@apply --paper-font-common-base;
 77 | 					font-variant: small-caps;
 78 | 					color: rgba(0,0,0,.8);
 79 | 				}
 80 | 			</style>
 81 | 		</custom-style>
 82 | 		<paper-drawer-panel>
 83 | 			<paper-header-panel id="drawer" drawer>
 84 | 				<paper-toolbar>
 85 | 					<div class="title" style="">
 86 | 						&lt;paper-datatable&gt;
 87 | 					</div>
 88 | 				</paper-toolbar>
 89 | 				<paper-menu id="menu" selected="{{currentUrl}}" attr-for-selected="data-url" on-iron-activate="navigate">
 90 | 					<paper-item data-url="docs/docs.html?installation" data-keywords='["install", "installation", "bower", "license", "browser", "support"]'>
 91 | 						<iron-icon icon="book"></iron-icon>Installation</span>
 92 | 					</paper-item>
 93 | 					<paper-item data-url="docs/docs.html?getting-started" data-keywords='["editable", "edit", "columns", "tutorial", "docs", "hash", "keys"]'>
 94 | 						<iron-icon icon="book"></iron-icon>Getting started</span>
 95 | 					</paper-item>
 96 | 					<paper-item data-url="demo/paper-datatable/" class="indent" data-keywords='["tutorial", "simple", "example", "demo"]'>
 97 | 						<iron-icon icon="favorite"></iron-icon><span>Simple <code>&lt;datatable&gt;</code></span>
 98 | 					</paper-item>
 99 | 					<paper-item data-url="demo/paper-datatable/editable.html" class="indent" data-keywords='["editable", "tutorial", "simple", "example", "demo", "dialog"]'>
100 | 						<iron-icon icon="favorite"></iron-icon><span>Editable <code>&lt;datatable&gt;</code></span>
101 | 					</paper-item>
102 | 					<paper-item data-url="demo/paper-datatable/mobile.html" class="indent" data-keywords='["editable", "tutorial", "simple", "example", "demo", "dialog"]'>
103 | 						<iron-icon icon="favorite"></iron-icon><span>Mobile view of <code>&lt;datatable&gt;</code></span>
104 | 					</paper-item>
105 | 					<paper-item data-url="docs/docs.html?getting-started-with-data-table-cards" data-keywords='["pagination", "pages", "card", "cards", "docs"]'>
106 | 						<iron-icon icon="book"></iron-icon>Data tables in cards</span>
107 | 					</paper-item>
108 | 					<paper-item data-url="demo/paper-datatable-card/" class="indent" data-keywords='["pagination", "pages", "card", "cards", "demo"]'>
109 | 						<iron-icon icon="explore"></iron-icon><span>Simple <code>&lt;datatable-card&gt;</code></span>
110 | 					</paper-item>
111 | 					<paper-item data-url="demo/paper-datatable-card/full-implementation.html" class="indent" data-keywords='["pagination", "pages", "card", "cards", "demo", "data-source", "datasource", "data source", "search"]'>
112 | 						<iron-icon icon="favorite"></iron-icon><span><code>&lt;datatable-card&gt;</code> full impl.</span>
113 | 					</paper-item>
114 | 					<paper-item data-url="docs/docs.html?styling" data-keywords='["docs", "theming", "styling", "css", "variables", "mixins"]'>
115 | 						<iron-icon icon="book"></iron-icon>Styling</span>
116 | 					</paper-item>
117 | 					<paper-item data-url="demo/miscellaneous/theming.html" class="indent" data-keywords='["demo", "theming", "styling", "css", "variables", "mixins"]'>
118 | 						<iron-icon icon="explore"></iron-icon><span>Theming options</span>
119 | 					</paper-item>
120 | 					<paper-item data-url="docs/docs.html?events" data-keywords='["docs", "events", "event"]'>
121 | 						<iron-icon icon="book"></iron-icon>Events</span>
122 | 					</paper-item>
123 | 					<paper-item data-url="demo/miscellaneous/events.html" class="indent" data-keywords='["demo", "events", "event"]'>
124 | 						<iron-icon icon="explore"></iron-icon><span>Event explorer</span>
125 | 					</paper-item>
126 | 
127 | 					<hr style="border-bottom-color:rgba(240,240,240);border-top:0px;" data-keywords='[""]'>
128 | 
129 | 					<paper-submenu id="submenu" data-keywords$="{{allSubKeywords}}">
130 | 						<paper-item class="menu-trigger">
131 | 							<iron-icon icon="menu"></iron-icon><span>Miscellaneous demo's</span>
132 | 						</paper-item>
133 | 						<paper-menu class="menu-content" selected="{{currentUrl}}" attr-for-selected="data-url" on-iron-activate="navigate">
134 | 							<paper-item data-url="demo/paper-datatable/bindings.html" data-keywords='["data binding", "binding", "selected", "selectedItem", "editable", "demo", "item", "value"]'>
135 | 								<iron-icon icon="explore"></iron-icon><span>The magic of data bindings</span>
136 | 							</paper-item>
137 | 							<paper-item data-url="demo/paper-datatable/sorting.html" data-keywords='["sorting", "sortable", "demo"]'>
138 | 								<iron-icon icon="explore"></iron-icon><span>Sorting & Type system</span>
139 | 							</paper-item>
140 | 							<paper-item data-url="demo/paper-datatable/resize-behavior.html" data-keywords='["resize", "demo"]'>
141 | 								<iron-icon icon="explore"></iron-icon><span>Resize behaviors</span>
142 | 							</paper-item>
143 | 							<paper-item data-url="demo/miscellaneous/light.html" data-keywords='["table", "css", "light", "lightweight"]'>
144 | 								<iron-icon icon="explore"></iron-icon><span>CSS only MD <span><code>&lt;table&gt;</code></span>
145 | 							</paper-item>
146 | 							<paper-item data-url="demo/paper-datatable/dynamic-columns.html" data-keywords='["adding", "removing", "columns", "demo"]'>
147 | 								<iron-icon icon="build"></iron-icon><span>Dynamic columns</span>
148 | 							</paper-item>
149 | 							<paper-item data-url="demo/paper-datatable/filter.html" data-keywords='["filter", "demo", "search"]'>
150 | 								<iron-icon icon="build"></iron-icon><span>Simple filter</span>
151 | 							</paper-item>
152 | 							<paper-item data-url="demo/paper-datatable/playground.html" data-keywords='["data binding", "binding", "editable", "demo", "item", "value"]'>
153 | 								<iron-icon icon="build"></iron-icon><span>Complex <code>&lt;datatable&gt;</code> element</span>
154 | 							</paper-item>
155 | 							<paper-item data-url="demo/paper-datatable-card/playground.html" data-keywords='["editable", "demo", "card", "pagination", "datasource", "data-source", "data source"]'>
156 | 								<iron-icon icon="build"></iron-icon><span><code>&lt;datatable-card&gt;</code> element</span>
157 | 							</paper-item>
158 | 							<paper-item data-url="demo/miscellaneous/icons.html" data-keywords='["icons"]'>
159 | 								<iron-icon icon="build"></iron-icon><span>Icons</span>
160 | 							</paper-item>
161 | 						</paper-menu>
162 | 					</paper-submenu>
163 | 					<hr style="border-bottom-color:rgba(240,240,240);border-top:0px;" data-keywords='[""]'>
164 | 					<paper-item data-url="docs/api.html?datatable" data-keywords='["api", "reference", "datatable", "columns", "editable", "column", "filter"]'>
165 | 						<iron-icon icon="book"></iron-icon><span><code>&lt;datatable&gt;</code> API</span>
166 | 					</paper-item>
167 | 					<paper-item data-url="docs/api.html?datatable-column" data-keywords='["api", "reference", "column", "columns", "editable", "styling", "style", "dialog", "edit", "icon"]'>
168 | 						<iron-icon icon="book"></iron-icon><span><code>&lt;datatable-column&gt;</code> API</span>
169 | 					</paper-item>
170 | 					<paper-item data-url="docs/api.html?datatable-card" data-keywords='["api", "reference", "card", "pagination", "search", "data source", "data-source", "data", "source", "page", "selection"]'>
171 | 						<iron-icon icon="book"></iron-icon><span><code>&lt;datatable-card&gt;</code> API</span>
172 | 					</paper-item>
173 | 				</paper-menu>
174 | 				<div id="noresults">Sorry, no results</div>
175 | 			</paper-header-panel>
176 | 			<!--
177 | 			<div main>
178 | 				<div id="content">
179 | 					<content></content>
180 | 				</div>
181 | 			</div>
182 | 			-->
183 | 			<paper-header-panel main>
184 | 				<paper-toolbar>
185 | 					<div class="title small">[[title]]</div>
186 | 					<div class="search">
187 | 						<paper-input value="{{searchTerm}}" no-label-float autofocus autosave="paper-datatable">
188 | 							<iron-icon icon="search" prefix style="padding-right: 0px"></iron-icon>
189 | 						</paper-input>
190 | 					</div>
191 | 				</paper-toolbar>
192 | 				<div id="content">
193 | 					<content></content>
194 | 				</div>
195 | 			</paper-header-panel>
196 | 		</paper-drawer-panel>
197 | 	</template>
198 | 	<script>
199 | 		Polymer({
200 | 			is: 'demo-menu',
201 | 			properties: {
202 | 				currentUrl: {
203 | 					type: String,
204 | 					value: function(){
205 | 						return location.href.replace(this.resolveUrl('..'),'');// + (location.search.length ? '?' + location.search.replace('?','') : '');
206 | 					}
207 | 				},
208 | 				searchTerm: {
209 | 					type: String,
210 | 					value: '',
211 | 					observer: 'search'
212 | 				}
213 | 			},
214 | 			ready: function(){
215 | 				var items = Polymer.dom(this.$.submenu).querySelectorAll('[data-keywords]').reduce(function(prev, cur){
216 | 					return prev.concat(JSON.parse(cur.dataset.keywords));
217 | 				}, []);
218 | 				this.allSubKeywords = JSON.stringify(items);
219 | 				this.title = document.title;
220 | 				document.title += ' - <paper-datatable>';
221 | 
222 | 				var link = document.createElement('link');
223 | 				link.type = 'image/x-icon';
224 | 				link.rel = 'shortcut icon';
225 | 				link.href = this.resolveUrl('/images/icon.png');
226 | 				document.getElementsByTagName('head')[0].appendChild(link);
227 | 			},
228 | 			navigate: function(event, item){
229 | 				if(item.selected){
230 | 					location.href = this.resolveUrl('../'+item.selected);
231 | 				}
232 | 			},
233 | 			search: function(){
234 | 
235 | 				this.$.noresults.setAttribute("hidden", true);
236 | 
237 | 				var possibleResults = Polymer.dom(this.root).querySelectorAll('[data-keywords]');
238 | 
239 | 				var results = possibleResults.filter(function(possibleResult){
240 | 					var keywords = JSON.parse(possibleResult.dataset.keywords);
241 | 					return keywords.some(function(keyword){
242 | 						return keyword.indexOf(this.searchTerm) > -1;
243 | 					}.bind(this));
244 | 				}.bind(this));
245 | 
246 | 				possibleResults.forEach(function(possibleResult){
247 | 					possibleResult.setAttribute('hidden', true);
248 | 					possibleResult.classList.remove('unindent');
249 | 				});
250 | 
251 | 				results.forEach(function(result){
252 | 					result.removeAttribute('hidden');
253 | 					if(this.searchTerm.length > 0) {
254 | 						result.classList.add('unindent');
255 | 					}
256 | 				}.bind(this));
257 | 
258 | 				this.$.submenu.opened = true;
259 | 				if(this.searchTerm.length > 0){
260 | 					if(results.length === 0){
261 | 						this.$.noresults.removeAttribute("hidden");
262 | 					}
263 | 				}else{
264 | 					//Polymer.dom(this.$.submenu).querySelector("paper-menu").selectedItem doesn't work due to asyncness issues :'(
265 | 					this.$.submenu.opened = Polymer.dom(this.$.submenu).querySelectorAll('paper-menu paper-item').some(function(submenuItem){
266 | 						return submenuItem.dataset.url == this.currentUrl;
267 | 					}.bind(this));
268 | 				}
269 | 
270 | 			}
271 | 		});
272 | 	</script>
273 | </dom-module>


--------------------------------------------------------------------------------
/bwt-datatable-column.js:
--------------------------------------------------------------------------------
  1 | import { PolymerElement, html } from '../@polymer/polymer';
  2 | import { mixinBehaviors } from '../@polymer/polymer/lib/legacy/class.js';
  3 | import { Templatizer } from '../@polymer/polymer/lib/legacy/templatizer-behavior.js';
  4 | import { Whenever } from './src/whatever.js';
  5 | import { dom } from '../@polymer/polymer/lib/legacy/polymer.dom.js';
  6 | 'use strict';
  7 | class PaperDatatableColumn extends mixinBehaviors([Templatizer], PolymerElement) {
  8 | 	static get template() {
  9 | 		return html`
 10 | 		<style>
 11 | 			:host {
 12 | 				display: block;
 13 | 			}
 14 | 		</style>
 15 | 		<template id="arrayTemplate">
 16 | 			<template is="dom-repeat" items="[[value]]" as="arrayItem">
 17 | 				<div class="array-item">[[_getArrayItemLabel(column, arrayItem)]]</div>
 18 | 			</template>
 19 | 		</template>
 20 | 		<template id="editableInputTemplate">
 21 | 			<paper-input type="[[_getCorrectTypeForInput(column.type)]]" value="{{value}}" step="any" no-label-float></paper-input>
 22 | 		</template>
 23 | 		<template id="editableBooleanTemplate">
 24 | 			<paper-checkbox checked="{{value}}"></paper-checkbox>
 25 | 		</template>`;
 26 | 	}
 27 | 	static get properties() {
 28 | 		return {
 29 | 			/**
 30 | 				 * String displayed in `<th></th>`
 31 | 				 *
 32 | 				 * @attribute header
 33 | 				 * @type String
 34 | 				 * @required
 35 | 				 */
 36 | 			header: {
 37 | 				type: String,
 38 | 				notify: true,
 39 | 				observer: '_headerChanged'
 40 | 			},
 41 | 			/**
 42 | 			 * The property to be used from `data` for this column
 43 | 			 *
 44 | 			 * @attribute property
 45 | 			 * @type String
 46 | 			 * @required
 47 | 			 */
 48 | 			property: String,
 49 | 			/**
 50 | 			 * The type of the property (can be 'String', 'Number', 'Array', 'Date', etc.)
 51 | 			 * Used for sorting and default display
 52 | 			 *
 53 | 			 * @attribute type
 54 | 			 * @type String
 55 | 			 * @default 'String'
 56 | 			 */
 57 | 			type: {
 58 | 				type: String,
 59 | 				value: 'String'
 60 | 			},
 61 | 			/**
 62 | 			 * Tooltip shown when hovering the `<th>`
 63 | 			 *
 64 | 			 * @attribute tooltip
 65 | 			 * @type String
 66 | 			 */
 67 | 			tooltip: {
 68 | 				type: String,
 69 | 				notify: true
 70 | 			},
 71 | 			/**
 72 | 			 * Whether to show sorting UI on the column. Sorting only works automagically
 73 | 			 * on simple data types.
 74 | 			 *
 75 | 			 * @attribute sortable
 76 | 			 * @type Boolean
 77 | 			 * @default false
 78 | 			 */
 79 | 			sortable: Boolean,
 80 | 			/**
 81 | 			 * Whether the column is currently sorted. Should only be set on one column at a time
 82 | 			 *
 83 | 			 * @attribute sorted
 84 | 			 * @type Boolean
 85 | 			 * @default false
 86 | 			 */
 87 | 			sorted: {
 88 | 				type: Boolean,
 89 | 				notify: true,
 90 | 				observer: '_sortChanged',
 91 | 				reflectToAttribute: true
 92 | 			},
 93 | 			/**
 94 | 			 * Whether the column is currently sorted. Should only be set on one column at a time
 95 | 			 *
 96 | 			 * @attribute sortDirection
 97 | 			 * @type String
 98 | 			 * @default 'asc'
 99 | 			 */
100 | 			sortDirection: {
101 | 				type: String,
102 | 				value: 'asc',
103 | 				observer: '_sortChanged'
104 | 			},
105 | 			/**
106 | 			 * If `type` is a simple type, then if this is true one of the default editable
107 | 			 * templates is used. For example if `type` is `String` every cell will contain
108 | 			 * a `<paper-input>`. This is practically just a convenience method so that you
109 | 			 * don't have to define every `<template>` on your own.
110 | 			 *
111 | 			 * If you do use a custom `<template>` this will prevent a `row-tap` from triggering
112 | 			 * a selection. So if you click in a `<paper-input>` it won't select the row.
113 | 			 *
114 | 			 * @attribute editable
115 | 			 * @type Boolean
116 | 			 * @default false
117 | 			 */
118 | 			editable: Boolean,
119 | 			/**
120 | 			 * If `type` is an `Array` and the array consists of `Object`s it's a common need
121 | 			 * to display a single property of every object (in non-editable mode).
122 | 			 *
123 | 			 * Note that it's not possible to use this in combination with an editable dialog,
124 | 			 * as internally this is using a `<template>` and Polymer currently allows only
125 | 			 * one template to be templatized per element.
126 | 			 *
127 | 			 * @attribute arrayDisplayProp
128 | 			 * @type String
129 | 			 */
130 | 			arrayDisplayProp: String,
131 | 			/**
132 | 			 * Style to be applied to every cell.
133 | 			 *
134 | 			 * @attribute cellStyle
135 | 			 * @type String
136 | 			 */
137 | 			cellStyle: {
138 | 				type: String,
139 | 				value: ''
140 | 			},
141 | 			/**
142 | 			 * Convenience attribute to align the header and cell content (e.g. 'center')
143 | 			 *
144 | 			 * @attribute align
145 | 			 * @type String
146 | 			 * @default 'left'
147 | 			 */
148 | 			align: {
149 | 				type: String,
150 | 				value: 'left'
151 | 			},
152 | 			/**
153 | 			 * Style to be applied to the header.
154 | 			 *
155 | 			 * @attribute style
156 | 			 * @type String
157 | 			 */
158 | 			_styleString: {
159 | 				type: String,
160 | 				value: function () {
161 | 					var alignment = this.align || this.getAttribute('align') || 'left';
162 | 					var minWidth = this.width || this.getAttribute('width') || 0;
163 | 					minWidth += parseFloat(minWidth).toString() === minWidth ? 'px' : '';
164 | 					var styleString = this.getAttribute('style') || '';
165 | 					return 'text-align:' + alignment + ';min-width:' + minWidth + ';' + styleString;
166 | 				}
167 | 			},
168 | 			/**
169 | 			 * If you have `undefined`'s in your `data` this method can be used to
170 | 			 * set a default, thus preventing auto-saves from triggering.
171 | 			 *
172 | 			 * @attribute default
173 | 			 * @type Object
174 | 			 */
175 | 			default: Object,
176 | 			/**
177 | 			 * Can be overwritten to manually format the value in a non-editable state
178 | 			 *
179 | 			 * IMPORTANT: This is a property, not a method you should call directly.
180 | 			 *
181 | 			 * @attribute formatValue
182 | 			 * @type Function
183 | 			 * @default see code
184 | 			 */
185 | 			formatValue: Function,
186 | 			/**
187 | 			 * Can be overwritten to manually sort the datatable if internal sorting is used. This is a normal
188 | 			 * function following the Javascript sort API.
189 | 			 *
190 | 			 * IMPORTANT: This is a property, not a method you should call directly.
191 | 			 *
192 | 			 * @attribute sort
193 | 			 * @type Function
194 | 			 * @default see code
195 | 			 */
196 | 			sort: Function,
197 | 			/**
198 | 			 * Instead of rendering the `<template>` inline in the cell it will instead be rendered in a
199 | 			 * floating `<paper-datatable-edit-dialog>` after the user `tap`s on the cell.
200 | 			 *
201 | 			 * @attribute dialog
202 | 			 * @type Boolean
203 | 			 * @default false
204 | 			 */
205 | 			dialog: {
206 | 				type: Boolean
207 | 			},
208 | 			/**
209 | 			 * Per material design spec it's often useful to indicate that a cell is editable if you're using
210 | 			 * `[dialog]` based editing. This will show a little pencil icon to the right of the cell, but can be
211 | 			 * a bit overwhelming if used on more than one column.
212 | 			 *
213 | 			 * @attribute editIcon
214 | 			 * @type Boolean
215 | 			 * @default false
216 | 			 */
217 | 			editIcon: {
218 | 				type: Boolean
219 | 			},
220 | 
221 | 			/**
222 | 			 * Removing and adding columns entirely from the DOM is a bit hard, so instead there is this
223 | 			 * convenience method to entirely disable a column.
224 | 			 *
225 | 			 * @attribute inactive
226 | 			 * @type Boolean
227 | 			 * @default false
228 | 			 */
229 | 			inactive: {
230 | 				type: Boolean,
231 | 				observer: '_requeryColumnList'
232 | 			},
233 | 			/**
234 | 			 * If you're using the `dynamic-columns` resize behavior this attribute is used to determining
235 | 			 * how important the column is when columns have to be hidden due to the window size. Set to -1
236 | 			 * if the column should always be shown. If columns have the same priority they will be assumed to
237 | 			 * be ordered by importance from left to right.
238 | 			 */
239 | 			resizePriority: {
240 | 				type: Number,
241 | 				value: 0
242 | 			},
243 | 			/**
244 | 			 * Mostly just a convenience attribute to set min-width, but required in conjuction with
245 | 			 * the `dynamic-columns` resize behavior
246 | 			 *
247 | 			 * @type Number in px or String
248 | 			 */
249 | 			width: Object
250 | 		}
251 | 	}
252 | 	static get is() {
253 | 		return 'paper-datatable-column';
254 | 	}
255 | 	ready() {
256 | 		super.ready();
257 | 		this.beenAttached = Whenever();
258 | 		// if template exists user use hiw own implementation for column content
259 | 		let template = dom(this).querySelector('template');
260 | 		if (!template) {
261 | 			if (this.type.toLowerCase() == 'array') {
262 | 				template = this.$.arrayTemplate;
263 | 			} else if (this.editable && this.type.toLowerCase() == 'string') {
264 | 				template = this.$.editableInputTemplate;
265 | 			} else if (this.editable && this.type.toLowerCase() == 'number') {
266 | 				template = this.$.editableInputTemplate;
267 | 			} else if (this.editable && this.type.toLowerCase() == 'boolean') {
268 | 				template = this.$.editableBooleanTemplate;
269 | 			}
270 | 		}
271 | 
272 | 		if (template) {
273 | 			this._instanceProps = {};
274 | 			this._instanceProps.item = true;
275 | 			this._instanceProps.value = true;
276 | 			this._instanceProps.column = true;
277 | 			this.templatize(template);
278 | 
279 | 			this.template = true;
280 | 		}
281 | 	}
282 | 
283 | 	connectedCallback() {
284 | 		super.connectedCallback();
285 | 	}
286 | 
287 | 	_createCellInstance(model, notificationKey) {
288 | 		if (typeof model[this.property] == 'undefined' && typeof this.default !== 'undefined') {
289 | 			var instance = this.stamp({ item: model, column: this, value: this.default, _dataKey: notificationKey });
290 | 		} else {
291 | 			var instance = this.stamp({ item: model, column: this, value: model[this.property], _dataKey: notificationKey });
292 | 		}
293 | 		return instance;
294 | 	}
295 | 
296 | 	_formatValue(data) {
297 | 		data = this._cast(data);
298 | 		if ('formatValue' in this) {
299 | 			return this.formatValue(data);
300 | 		}
301 | 		if (typeof data == 'undefined') {
302 | 			return '';
303 | 		}
304 | 		var value = this._cast(data);
305 | 		if (this.type.toLowerCase() == 'string') {
306 | 			return value;
307 | 		} else if (this.type.toLowerCase() == 'number') {
308 | 			return value;
309 | 		} else if (this.type.toLowerCase() == 'boolean') {
310 | 			return value ? 'Yes' : 'No';
311 | 		} else if (this.type.toLowerCase() == 'date') {
312 | 			var prependZero = function (val) {
313 | 				return val < 10 ? '0' + val : val;
314 | 			}
315 | 			return value.getUTCFullYear() + '/' + prependZero(value.getUTCMonth() + 1) + '/' + prependZero(value.getUTCDate()) + '&nbsp;' + prependZero(value.getUTCHours()) + ':' + prependZero(value.getUTCMinutes()) + ':' + prependZero(value.getUTCSeconds());
316 | 		} else {
317 | 			console.warn('Complex objects should implement their own template or format-value function.', data);
318 | 			return '?';
319 | 		}
320 | 	}
321 | 
322 | 	_sort(valA, valB) {
323 | 		valA = this._cast(valA);
324 | 		valB = this._cast(valB);
325 | 
326 | 		if ('sort' in this) {
327 | 			return this.sort(valA, valB);
328 | 		}
329 | 
330 | 		if (valA < valB) return -1;
331 | 		if (valA > valB) return 1;
332 | 		return 0;
333 | 	}
334 | 
335 | 	_cast(value) {
336 | 		if (typeof value === 'undefined' || value === null) {
337 | 			if (typeof this.default !== 'undefined') {
338 | 				value = JSON.parse(JSON.stringify(this.default));
339 | 			} else {
340 | 				value = '';
341 | 			}
342 | 		}
343 | 
344 | 		if (this.type.toLowerCase() == 'string') {
345 | 			return value.toString();
346 | 		} else if (this.type.toLowerCase() == 'number') {
347 | 			return parseFloat(value);
348 | 		} else if (this.type.toLowerCase() == 'boolean') {
349 | 			return value ? true : false;
350 | 		} else if (this.type.toLowerCase() == 'date') {
351 | 			return new Date(value);
352 | 		} else {
353 | 			return value;
354 | 		}
355 | 	}
356 | 
357 | 	_sortChanged() {
358 | 		if (this.sorted && this.beenAttached) {
359 | 			this.beenAttached.whenReady(function () {
360 | 				this.parentNodeRef.sort(this);
361 | 			}.bind(this));
362 | 		}
363 | 	}
364 | 
365 | 	_forwardParentProp(prop, value) {
366 | 		console.warn('_forwardParentProp', arguments);
367 | 	}
368 | 	_forwardParentPath(prop, value) {
369 | 		console.warn('_forwardParentPath', arguments);
370 | 	}
371 | 
372 | 	_forwardInstanceProp(templateInstance, prop, value) {
373 | 		var path = prop.split('.');
374 | 		var item = path.shift();
375 | 		if (item == 'value') {
376 | 			var parentPath = ['data', templateInstance.get('_dataKey'), this.property];
377 | 			value = this._cast(value);
378 | 			this.parentNodeRef.set(parentPath, value);
379 | 		} else if (item == 'item') {
380 | 			console.warn('_forwardInstanceProp', arguments);
381 | 		}
382 | 	}
383 | 
384 | 	_forwardInstancePath(templateInstance, prop, value) {
385 | 		var path = prop.split('.');
386 | 		var item = path.shift();
387 | 		if (item == 'value') {
388 | 			var parentPath = ['data', templateInstance.get('_dataKey'), this.property].concat(path);
389 | 			if (path.length == 0) {
390 | 				value = this._cast(value);
391 | 			}
392 | 		} else if (item == 'item') {
393 | 			var parentPath = ['data', templateInstance.get('_dataKey')].concat(path);
394 | 		}
395 | 		this.parentNodeRef.set(parentPath, value);
396 | 	}
397 | 	_requeryColumnList() {
398 | 		//only trigger this if ready, anything before that point will be handled automatically during
399 | 		// initial initialization.
400 | 		if (this.beenAttached.state.ready) {
401 | 			this.parentNodeRef._queryAndSetColumns();
402 | 		}
403 | 	}
404 | 	_getArrayItemLabel(column, value) {
405 | 		return column.arrayDisplayProp ? value[column.arrayDisplayProp] : value;
406 | 	}
407 | 	_getCorrectTypeForInput(type) {
408 | 		if (type.toLowerCase() == 'string') {
409 | 			return 'string';
410 | 		} else if (type.toLowerCase() == 'number') {
411 | 			return 'number';
412 | 		}
413 | 	}
414 | 	_headerChanged(header) {
415 | 		this.fire('header-changed');
416 | 	}
417 | }
418 | window.customElements.define(PaperDatatableColumn.is, PaperDatatableColumn);
419 | 


--------------------------------------------------------------------------------
/bwt-datatable-card.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { PolymerElement, html } from '../@polymer/polymer';
  3 | 
  4 | import '../@polymer/paper-material/paper-material.js';
  5 | import '../@polymer/paper-material/paper-material-shared-styles.js';
  6 | import '../@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
  7 | import '../@polymer/paper-listbox/paper-listbox.js';
  8 | import '../@polymer/paper-item/paper-item.js';
  9 | import '../@polymer/paper-icon-button/paper-icon-button.js';
 10 | import '../@polymer/paper-tooltip/paper-tooltip.js';
 11 | import '../@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 12 | import { mixinBehaviors } from '../@polymer/polymer/lib/legacy/class.js';
 13 | import { IronScrollTargetBehavior } from '../@polymer/iron-scroll-target-behavior/iron-scroll-target-behavior.js';
 14 | import { IronResizableBehavior } from '../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 15 | import { dom } from '../@polymer/polymer/lib/legacy/polymer.dom.js';
 16 | import { WeakCache } from './src/weakCache.js';
 17 | import './bwt-datatable.js';
 18 | 'use scrict';
 19 | 
 20 | class PaperDatatableCard extends mixinBehaviors([IronScrollTargetBehavior, IronResizableBehavior], PolymerElement) {
 21 | 	static get template() {
 22 | 		return html`
 23 | 			<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning paper-material-shared-styles"></style>
 24 | 			<style >
 25 | 				:host {
 26 | 					display: block;
 27 | 					@apply --paper-font-common-base;
 28 | 				}
 29 | 				.paper-material{
 30 | 					border-radius: 2px;
 31 | 					background: white;
 32 | 					@apply --paper-datatable-card;
 33 | 				}
 34 | 				#selectionToolbar{
 35 | 					display: none;
 36 | 					background: var(--paper-datatable-selection-toolbar-color, var(--paper-pink-50));
 37 | 					@apply --paper-datatable-selection-toolbar;
 38 | 					padding:0px 12px 0px 24px;
 39 | 				}
 40 | 				#selectionToolbar .selectionHeader, #selectionToolbar .toolbar ::content paper-icon-button{
 41 | 					color: var(--paper-datatable-selection-toolbar-text-color, var(--accent-color));
 42 | 				}
 43 | 				#selectionToolbar[data-visible]{
 44 | 					display: flex;
 45 | 				}
 46 | 				#selectionToolbar .toolbar{
 47 | 					display: none;
 48 | 				}
 49 | 				#selectionToolbar .toolbar[data-visible]{
 50 | 					display: flex;
 51 | 				}
 52 | 				#toolbar-main{
 53 | 					padding-right: 12px;
 54 | 					@apply --paper-datatable-toolbar-main;
 55 | 				}
 56 | 				#topBlock{
 57 | 					height:64px;
 58 | 					padding:0px 6px 0px 24px;
 59 | 					position:relative;
 60 | 					@apply --paper-datatable-top-toolbar;
 61 | 				}
 62 | 				#topBlock .header{
 63 | 					font-size:20px;
 64 | 					@apply --paper-font-common-base;
 65 | 					color: var(--paper-datatable-top-toolbar-text-color);
 66 | 					@apply --paper-datatable-top-toolbar-header;
 67 | 				}
 68 | 				#selectionToolbar > ::content paper-icon-button, .toolbar > ::content paper-icon-button,
 69 | 				#selectionToolbar > ::content paper-icon, .toolbar > ::content paper-icon,
 70 | 				#selectionToolbar > ::content iron-icon, .toolbar > ::content iron-icon{
 71 | 					color: var(--paper-datatable-selection-toolbar-icon-color, rgba(0,0,0,.54));
 72 | 				}
 73 | 				#toolbar-main ::content paper-icon-button, #toolbar-main ::content paper-icon, #toolbar-main ::content iron-icon{
 74 | 					color: var(--paper-datatable-top-toolbar-icon-color);
 75 | 				}
 76 | 				#topBlock .selectionHeader{
 77 | 					font-size:16px;
 78 | 					@apply --paper-font-common-base;
 79 | 				}
 80 | 				#bottomBlock{
 81 | 					height:56px;
 82 | 					padding:0px 6px;
 83 | 					border-top: 1px solid var(--paper-datatable-divider-color, var(--divider-color));
 84 | 					color: var(--paper-datatable-navigation-bar-text-color, rgba(0,0,0,.54));
 85 | 					align-items: center;
 86 | 					font-size: 12px;
 87 | 					text-align: center;
 88 | 					font-weight: 500;
 89 | 					@apply --paper-datatable-navigation-bar;
 90 | 				}
 91 | 				#bottomBlock paper-dropdown-menu{
 92 | 					vertical-align: middle;
 93 | 					margin-right: 18px;
 94 | 					--paper-input-container-underline: {
 95 | 						display: none;
 96 | 					};
 97 | 					--paper-input-container-input: {
 98 | 						text-align: right;
 99 | 						font-size: 12px;
100 | 						font-weight: 500;
101 | 						color: var(--paper-datatable-navigation-bar-text-color, rgba(0,0,0,.54));
102 | 					};
103 | 					--paper-dropdown-menu-icon: {
104 | 						color: var(--paper-datatable-navigation-bar-text-color, rgba(0,0,0,.54));
105 | 					};
106 | 
107 | 				}
108 | 				.fixedToTop {
109 | 					background: #fff;
110 | 					position: fixed !important;
111 | 					box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
112 | 					top: 0;
113 | 					z-index: 1;
114 | 				}
115 | 			</style>
116 | 
117 | 		<div class="paper-material" elevation="1">
118 | 			<div class="horizontal center layout" id="topBlock">
119 | 				<div class="flex header">
120 | 					<span>[[header]]</span>
121 | 				</div>
122 | 				<div id="toolbar-main" class="toolbar">
123 | 					<slot name="toolbar-main"></slot>
124 | 				</div>
125 | 				<div id="selectionToolbar" class="horizontal center layout fit" data-visible$="[[_selectedToolbarVisible]]">
126 | 					<div class="flex selectionHeader">
127 | 						<span>[[_numberOfSelectedIds]]</span> item selected
128 | 					</div>
129 | 					<div class="toolbar" data-visible$="[[_singleSelectToolbarVisible]]">
130 | 						<slot name="toolbar-select-single"></slot>
131 | 					</div>
132 | 					<div class="toolbar" data-visible$="[[_multiSelectToolbarVisible]]">
133 | 						<slot name="toolbar-select-multi"></slot>
134 | 					</div>
135 | 					<div class="toolbar" data-visible>
136 | 						<slot name="toolbar-select"></slot>
137 | 					</div>
138 | 				</div>
139 | 			</div>
140 | 			<div>
141 | 				<slot></slot>
142 | 			</div>
143 | 			<div class="horizontal center layout" id="bottomBlock">
144 | 				<div class="flex"></div>
145 | 				<span>[[paginationLabel]]</span>
146 | 				<paper-dropdown-menu no-label-float style="width: 68px;">
147 | 					<paper-listbox slot="dropdown-content" selected="{{pageSize}}" attr-for-selected="value">
148 | 						<template is="dom-repeat" items="[[pageSizeOptions]]" as="size">
149 | 							<paper-item value$="[[size]]">[[size]]</paper-item>
150 | 						</template>
151 | 					</paper-listbox>
152 | 				</paper-dropdown-menu>
153 | 				<span>
154 | 					<span>[[_getRangeStart(page, pageSize)]]</span>-<span>[[_getRangeEnd(page, pageSize, _numberOfItems)]]</span> of&nbsp;<span>[[_numberOfItems]]</span>
155 | 				</span>
156 | 				<paper-icon-button icon="datatable:first-page" on-tap="firstPage" disabled="[[_prevPageDisabled(page)]]"></paper-icon-button>
157 | 				<paper-icon-button icon="datatable:prev-page" on-tap="prevPage" disabled="[[_prevPageDisabled(page)]]"></paper-icon-button>
158 | 				<paper-icon-button icon="datatable:next-page" on-tap="nextPage" disabled="[[_nextPageDisabled(page, pageSize, _numberOfItems)]]"></paper-icon-button>
159 | 				<paper-icon-button icon="datatable:last-page" on-tap="lastPage" disabled="[[_nextPageDisabled(page, pageSize, _numberOfItems)]]"></paper-icon-button>
160 | 			</div>
161 | 		</div>`;
162 | 	}
163 | 
164 | 	/*
165 | 	 A [material design implementation of the tables within cards spec](https://www.google.com/design/spec/components/data-tables.html#data-tables-tables-within-cards).
166 | 
167 | 
168 | 	 @element paper-datatable-card
169 | 	 @demo demo/users-card.html Polished demo
170 | 	 @demo demo/paper-datatable-card.html Complex demo
171 | 	 */
172 | 	static get is() {
173 | 		return 'paper-datatable-card';
174 | 	}
175 | 	// Element properties
176 | 	static get properties() {
177 | 		return {
178 | 			/**
179 | 			 * Heading shown above the data table
180 | 			 *
181 | 			 * @attribute String
182 | 			 * @default ''
183 | 			 * @type Object
184 | 			 */
185 | 			header: String,
186 | 			/**
187 | 			 * See general documentation.
188 | 			 *
189 | 			 * @attribute dataSource
190 | 			 * @type Object
191 | 			 */
192 | 			dataSource: Object,
193 | 			/**
194 | 			 * Number of items per page
195 | 			 *
196 | 			 * @attribute pageSize
197 | 			 * @default 10
198 | 			 * @type Number
199 | 			 */
200 | 			pageSize: {
201 | 				type: Number,
202 | 				value: 10,
203 | 				notify: true,
204 | 				observer: "_pageSizeChanged"
205 | 			},
206 | 			/**
207 | 			 * Possible number of items per page
208 | 			 *
209 | 			 * @attribute pageSizeOptions
210 | 			 * @default [5, 10, 25, 100]
211 | 			 * @type Array
212 | 			 */
213 | 			pageSizeOptions: {
214 | 				type: Array,
215 | 				value: [5, 10, 25, 100],
216 | 				notify: true
217 | 			},
218 | 			/**
219 | 			 * Current page shown
220 | 			 *
221 | 			 * @attribute Number
222 | 			 * @default 1
223 | 			 * @type Object
224 | 			 */
225 | 			page: {
226 | 				type: Number,
227 | 				value: 1,
228 | 				notify: true
229 | 			},
230 | 			paginationLabel: {
231 | 				type: String,
232 | 				value: "Rows per page:"
233 | 			},
234 | 			_disableSave: {
235 | 				type: Boolean,
236 | 				value: false
237 | 			},
238 | 			_datatable: {
239 | 				type: Object
240 | 			},
241 | 			/**
242 | 			 * Used when the value is `undefined`.
243 | 			 *
244 | 			 * @attribute default
245 | 			 * @type Object
246 | 			 */
247 | 			default: {
248 | 				type: Object
249 | 			},
250 | 			/**
251 | 			 * Property containing the `id` of every row. It is **important** this is available for multi-page selection to work
252 | 			 *
253 | 			 * @attribute idProperty
254 | 			 * @type String
255 | 			 * @default 'id'
256 | 			 * @required
257 | 			 */
258 | 			idProperty: {
259 | 				type: String,
260 | 				value: 'id'
261 | 			},
262 | 			/**
263 | 			 * An array of selected row id's.
264 | 			 *
265 | 			 * @attribute selectedIds
266 | 			 * @type Array
267 | 			 * @default []
268 | 			 */
269 | 			selectedIds: {
270 | 				type: Array,
271 | 				notify: true,
272 | 				value: []
273 | 			},
274 | 			_cacheUsed: {
275 | 				type: Boolean
276 | 			},
277 | 			_sortDirection: {
278 | 				type: String,
279 | 				value: 'asc'
280 | 			},
281 | 			_sortProperty: {
282 | 				type: String
283 | 			},
284 | 			_headerDistanseToTop: {
285 | 				type: Number
286 | 			},
287 | 			/**
288 | 			 * Fix table header to the top of the page on scroll
289 | 			 *
290 | 			 * @attribute headerFixed
291 | 			 * @type Boolean
292 | 			 * @default false
293 | 			 */
294 | 			headerFixed: {
295 | 				type: Boolean,
296 | 				reflectToAttribute: true,
297 | 				value: false
298 | 			},
299 | 			_selectedToolbarVisible: Boolean,
300 | 			_singleSelectToolbarVisible: Boolean,
301 | 			_multiSelectToolbarVisible: Boolean,
302 | 			_numberOfSelectedIds: Number,
303 | 			_numberOfItems: Number
304 | 		}
305 | 	}
306 | 	ready() {
307 | 		super.ready();
308 | 		this._datatable = dom(this).querySelector("paper-datatable");
309 | 		this._datatable.data = [];
310 | 		this._datatable.addEventListener("data-changed", this._triggerSave.bind(this));
311 | 		this._datatable.addEventListener("sort", this._handleSort.bind(this));
312 | 		this._datatable.addEventListener("selection-changed", this._setSelectedIds.bind(this));
313 | 		this._datatable.addEventListener("selection-changed", this._setSelectedToolbarVisible.bind(this));
314 | 		this._datatable.addEventListener("toggle-all", this._toggleAll.bind(this));
315 | 		this._datatable._setPartialSelection = function () { };
316 | 		this.set('selectedIds', []);
317 | 		this.set('_sortProperty', this.idProperty);
318 | 	}
319 | 	// listeners: {
320 | 	// 	'iron-resize': '_resizeHandler'
321 | 	// },
322 | 	static get observers() {
323 | 		return [
324 | 			'retrieveVisibleData(dataSource, page, _datatable, _sortDirection, _sortProperty)',
325 | 			'_setNumberOfItems(dataSource.length)',
326 | 			'_createCache(dataSource.queryForIds)'
327 | 		]
328 | 	}
329 | 	/**
330 | 	 * Scroll listener from IronScrollTargetBehavior
331 | 	 */
332 | 	_scrollHandler() {
333 | 		if (this.headerFixed) {
334 | 			var paperDatatable = dom(this).querySelector("paper-datatable");
335 | 			var header = dom(this).querySelector('#topBlock');
336 | 			var headerStyles = getComputedStyle(header);
337 | 			if (this._scrollTop > this._headerDistanseToTop && !header.classList.contains("fixedToTop")) {
338 | 				header.style.width = headerStyles.width;
339 | 				paperDatatable.style.paddingTop = header.offsetHeight + "px";
340 | 				header.classList.add("fixedToTop");
341 | 			} else if (this._scrollTop < this._headerDistanseToTop && header.classList.contains("fixedToTop")) {
342 | 				header.style.width = "auto";
343 | 				header.style.top = 0;
344 | 				paperDatatable.style.paddingTop = 0;
345 | 				header.classList.remove("fixedToTop");
346 | 			}
347 | 		}
348 | 	}
349 | 	/**
350 | 	 * Set scroll target and check coordinates to top
351 | 	 */
352 | 	_resizeHandler() {
353 | 		if (this.headerFixed && !this._headerDistanseToTop) {
354 | 			var header = dom(this).querySelector('#topBlock');
355 | 			this._headerDistanseToTop = header.getBoundingClientRect().top;
356 | 		};
357 | 	}
358 | 	_pageSizeChanged() {
359 | 		if (this.page > 1) {
360 | 			this.firstPage();
361 | 		} else {
362 | 			this.retrieveVisibleData();
363 | 		}
364 | 	}
365 | 	_createCache() {
366 | 		this._cacheUsed = true;
367 | 		this._cache = new WeakCache(100);
368 | 	}
369 | 	_triggerSave(ev) {
370 | 		if (this.dataSource) {
371 | 			if (!this._disableSave && ev.detail.path) {
372 | 				var path = ev.detail.path.split(".");
373 | 				if (path.length == 2) {
374 | 					return;
375 | 				}
376 | 				var item = path.shift();
377 | 				var rowKey = path.shift();
378 | 				var property = path.shift();
379 | 				this.debounce('save' + rowKey + property, function () {
380 | 					var value = ev.detail.value;
381 | 					var data = this._datatable.get(['data', rowKey]);
382 | 					if (!data) {
383 | 						return console.warn('Some elements (like the \<google-map\>) will trigger erroneous' +
384 | 							' change notifications. Sadly this causes the paper-datatable to error out' +
385 | 							' when browsing too quickly.');
386 | 					}
387 | 					var id = data[this.idProperty];
388 | 					// setting properties in the `set` functions causes trouble, so it's more sensible for that
389 | 					// to simply have no effect rather than make the entire element break, especially
390 | 					// as the 'no effect' version can be useful (see paper-datatable-card.html demo)
391 | 					var dataClone = JSON.parse(JSON.stringify(data));
392 | 
393 | 					if (path.length > 0) {
394 | 						value = dataClone[property];
395 | 						var setPromise = this.dataSource.set(dataClone, property, value);
396 | 					} else {
397 | 						var setPromise = this.dataSource.set(dataClone, property, value);
398 | 					}
399 | 
400 | 					this._datatable.set('progress', true);
401 | 					setPromise.then(function (successOrId) {
402 | 						if (typeof successOrId === 'boolean') {
403 | 							if (successOrId !== true) {
404 | 								throw new Error('failure');
405 | 							}
406 | 						} else {
407 | 							console.warn('re-implement')
408 | 							//var index = this._datatable._getIndexById('__new__');
409 | 							//this._datatable.set(['data', index, this._datatable.idProperty], successOrId);
410 | 						}
411 | 						this._datatable.set('progress', false);
412 | 					}.bind(this), function (err) {
413 | 						throw new Error('failure');
414 | 						this._datatable.set('progress', false);
415 | 					}.bind(this)).catch(function () {
416 | 						console.warn('saving failed');
417 | 						this._datatable.set('progress', false);
418 | 					}.bind(this));
419 | 				}, 1000);
420 | 			}
421 | 		}
422 | 	}
423 | 	_handleSort(ev) {
424 | 		if (this.dataSource) {
425 | 			ev.preventDefault();
426 | 			this.firstPage();
427 | 			this._sortProperty = ev.detail.sort.property;
428 | 			this._sortDirection = ev.detail.sort.direction;
429 | 		}
430 | 	}
431 | 
432 | 	processItems(items) {
433 | 
434 | 		this._datatable.deselectAll(false);
435 | 		this._datatable.splice('data', 0, this._datatable.data.length);
436 | 
437 | 		var args = ['data'].concat(items);
438 | 		this._datatable.push.apply(this._datatable, args);
439 | 		this._setSelectedKeysOnDatatable();
440 | 		this._datatable.set('progress', false);
441 | 
442 | 		this._disableSave = false;
443 | 
444 | 		this.async(function () {
445 | 			items.forEach(function (item) {
446 | 				this._cache.set(item[this.idProperty], item);
447 | 			}.bind(this));
448 | 		});
449 | 
450 | 	}
451 | 	/**
452 | 	 * Call this function to trigger reloading of the current page
453 | 	 */
454 | 	retrieveVisibleData() {
455 | 		var self = this;
456 | 		if (!this.dataSource) return;
457 | 		this.debounce("visibleData", function () {
458 | 			this._disableSave = true;
459 | 
460 | 			var queryArgs = [{
461 | 				property: this._sortProperty,
462 | 				direction: this._sortDirection
463 | 			}, this.page, this.pageSize];
464 | 
465 | 			this._datatable.set('progress', true);
466 | 			if ('queryForIds' in this.dataSource) {
467 | 				this.dataSource.queryForIds.apply(this.dataSource, queryArgs).then(function (ids) {
468 | 					var items = [];
469 | 					var i = 0;
470 | 					var done = function () {
471 | 						i++;
472 | 						if (i == 2) {
473 | 							var sortedItems = ids.map(function (id) {
474 | 								return items.find(function (item) { return item[self.idProperty] == id });
475 | 							});
476 | 							this.processItems(sortedItems);
477 | 						}
478 | 					}.bind(this);
479 | 
480 | 					var idsInCache = ids.filter(function (id) { return self._cache.has(id) });
481 | 					if (idsInCache.length) {
482 | 						var cacheItems = [];
483 | 						idsInCache.forEach(function (id) {
484 | 							cacheItems.push(this._cache.get(id));
485 | 						}.bind(this));
486 | 						items = items.concat(cacheItems);
487 | 						done();
488 | 					} else {
489 | 						done();
490 | 					}
491 | 
492 | 					var idsNotInCache = ids.filter(function (id) { return !self._cache.has(id) });
493 | 					if (idsNotInCache.length) {
494 | 						this.dataSource.getByIds(idsNotInCache).then(function (newItems) {
495 | 							items = items.concat(newItems);
496 | 							done();
497 | 						});
498 | 					} else {
499 | 						done();
500 | 					}
501 | 				}.bind(this));
502 | 
503 | 			} else {
504 | 				this.dataSource.get.apply(this.dataSource, queryArgs).then(function (items) {
505 | 					this.processItems(items);
506 | 				}.bind(this));
507 | 			}
508 | 		}, 0);
509 | 
510 | 	}
511 | 	_getRangeStart() {
512 | 		return (this.page - 1) * this.pageSize + 1;
513 | 	}
514 | 	_getRangeEnd() {
515 | 		return Math.min((this.page) * this.pageSize, this._numberOfItems);
516 | 	}
517 | 	/**
518 | 	 * Navigate to the next page
519 | 	 */
520 | 	nextPage() {
521 | 		this.set("page", this.page + 1);
522 | 	}
523 | 	/**
524 | 	 * Navigate to the previous page
525 | 	 */
526 | 	prevPage() {
527 | 		this.set("page", this.page - 1);
528 | 	}
529 | 	/**
530 | 	 * Navigate to the first page
531 | 	 */
532 | 	firstPage() {
533 | 		this.set("page", 1);
534 | 	}
535 | 	/**
536 | 	 * Navigate to the last page
537 | 	 */
538 | 	lastPage() {
539 | 		this.set("page", Math.ceil(this._numberOfItems / this.pageSize));
540 | 	}
541 | 	_prevPageDisabled() {
542 | 		return this.page == 1;
543 | 	}
544 | 	_nextPageDisabled() {
545 | 		return this.page * this.pageSize >= this._numberOfItems;
546 | 	}
547 | 	_setSelectedToolbarVisible() {
548 | 		this._selectedToolbarVisible = this.selectedIds.length > 0;
549 | 		this._singleSelectToolbarVisible = this.selectedIds.length == 1;
550 | 		this._multiSelectToolbarVisible = this.selectedIds.length > 1;
551 | 		this._numberOfSelectedIds = this.selectedIds.length;
552 | 		this._datatable._partialSelection = this.selectedIds.length > 0;
553 | 	}
554 | 	_setSelectedIds(ev) {
555 | 		if (ev.detail.selected) {
556 | 			if (!this._datatable.multiSelection) {
557 | 				this.splice('selectedIds', 0, 1);
558 | 			}
559 | 			ev.detail.selected.forEach(function (key) {
560 | 				var id = this._datatable._getByKey(key)[this.idProperty];
561 | 				if (this.selectedIds.indexOf(id) == -1) {
562 | 					this.push('selectedIds', id);
563 | 				}
564 | 			}.bind(this));
565 | 		}
566 | 		if (ev.detail.deselected) {
567 | 			ev.detail.deselected.forEach(function (key) {
568 | 				var id = this._datatable._getByKey(key)[this.idProperty];
569 | 				if (this.selectedIds.indexOf(id) > -1) {
570 | 					this.splice('selectedIds', this.selectedIds.indexOf(id), 1);
571 | 				}
572 | 			}.bind(this));
573 | 		}
574 | 	}
575 | 	_setSelectedKeysOnDatatable() {
576 | 		this._datatable.data.forEach(function (item) {
577 | 			var id = item[this.idProperty];
578 | 			if (this.selectedIds.indexOf(id) > -1) {
579 | 				this._datatable.select(item, false);
580 | 			}
581 | 		}.bind(this));
582 | 	}
583 | 	_setNumberOfItems() {
584 | 		this.set('_numberOfItems', this.dataSource.length);
585 | 	}
586 | 	_toggleAll(ev) {
587 | 		if (this.dataSource && 'queryForIds' in this.dataSource) {
588 | 			if (this.selectedIds.length === this.dataSource.length) {
589 | 				this.deselectAll();
590 | 			} else {
591 | 				this.deselectAll();
592 | 				this._datatable.set('progress', true);
593 | 				this.dataSource.queryForIds(undefined, 1, this.dataSource.length).then(function (ids) {
594 | 					this._datatable.set('progress', undefined);
595 | 					this.push.apply(this, ['selectedIds'].concat(ids));
596 | 					this._setSelectedKeysOnDatatable();
597 | 					this._setSelectedToolbarVisible();
598 | 				}.bind(this));
599 | 			}
600 | 			ev.preventDefault();
601 | 		}
602 | 	}
603 | 	/**
604 | 	 * Deselect all items
605 | 	 */
606 | 	deselectAll() {
607 | 		this._datatable.deselectAll(false);
608 | 		this.splice('selectedIds', 0, this.selectedIds.length);
609 | 		this._setSelectedToolbarVisible();
610 | 	}
611 | 	/**
612 | 	 * Select the item with the specified id
613 | 	 * @param id
614 | 	 */
615 | 	select(id) {
616 | 		this.push('selectedIds', id);
617 | 		this._setSelectedKeysOnDatatable();
618 | 		this._setSelectedToolbarVisible();
619 | 	}
620 | }
621 | 
622 | window.customElements.define(PaperDatatableCard.is, PaperDatatableCard);
623 | 


--------------------------------------------------------------------------------