Skip to content

Commit

Permalink
Base version
Browse files Browse the repository at this point in the history
  • Loading branch information
@David-Mulder
David-Mulder committed Oct 24, 2015
0 parents commit 0b9d731
Show file tree
Hide file tree
Showing 12 changed files with 1,013 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
@@ -0,0 +1 @@
bower_components
20 changes: 20 additions & 0 deletions README.md
@@ -0,0 +1,20 @@
# paper-datatable

A material design implementation of a data table.

## Installation

The element can be installed using bower using

bower install --save David-Mulder/paper-datatable

## Dependencies

Element dependencies are managed via [Bower](http://bower.io/). You can
install that via:

npm install -g bower

Then, go ahead and download the element's dependencies:

bower install
40 changes: 40 additions & 0 deletions bower.json
@@ -0,0 +1,40 @@
{
"name": "paper-datatable",
"version": "1.0.0",
"authors": [
"David Mulder <david.mulder@ymail.com>"
],
"description": "Material design data table.",
"keywords": [
"web-component",
"web-components",
"polymer",
"data-table"
],
"main": [
"paper-datatable.html",
"paper-datatable-card.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/David Mulder/paper-datatable/",
"ignore": [
"/.*",
"/test/",
"/demo/"
],
"dependencies": {
"polymer": "Polymer/polymer#master",
"paper-material": "PolymerElements/paper-material#~1.0.3",
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#~1.0.5",
"paper-menu": "PolymerElements/paper-menu#~1.1.1",
"paper-item": "PolymerElements/paper-item#~1.0.5",
"paper-icon-button": "PolymerElements/paper-icon-button#~1.0.5",
"paper-toolbar": "PolymerElements/paper-toolbar#~1.0.4",
"paper-card": "PolymerElements/paper-card#~1.0.7",
"paper-checkbox": "PolymerElements/paper-checkbox#~1.0.13"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"web-component-tester": "*"
}
}
103 changes: 103 additions & 0 deletions demo/card.html
@@ -0,0 +1,103 @@
<!doctype html>
<html>
<head>
<title></title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../paper-datatable-card.html">
<link rel="import" href="../paper-datatable.html">
</head>
<body>


<template is="dom-bind" id="app">

<paper-datatable-card header="Food" page-size="10" data-source="{{data}}">
<div toolbar-main>
<paper-icon-button icon="more-vert"></paper-icon-button>
</div>
<div toolbar-select>
<paper-icon-button icon="delete"></paper-icon-button>
</div>
<paper-datatable selectable multi-selection>
<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" title="Some title" sortable> </paper-datatable-column>
<paper-datatable-column header="Calories" property="calories" type="Number" title="The total amount of..." sortable>
<template>
<paper-input value="{{value}}" no-label-float></paper-input>
</template>
</paper-datatable-column>
<paper-datatable-column header="Author" property="author" title="The total amount of...">
<template>
<paper-input value="{{value.first}}" style="display:inline-block;"></paper-input>
<paper-input value="{{value.last}}" style="display:inline-block;"></paper-input>
</template>
</paper-datatable-column>
</paper-datatable>
</paper-datatable-card>

</template>

<script>
var app = document.querySelector('#app');

var myData = [];
for (var i=0; i<142; i++) {
var id = i*10000+Math.round(Math.random() * 500);
var calories = Math.round(Math.random() * 2000)+1000;
myData.push({
id: id,
title: "title"+id,
calories: calories,
author: {
first: "David",
last: "Mulder "+ id
}
});
}


window.a = [];
app.data = {
getByIds: function(ids){
return new Promise(function(resolve, reject){
var data = [];
ids.forEach(function(id){
data.push(myData.find(function(item){
return item.id == id;
}));
});
resolve(data);
});
},
set: function(id, property, value){
var item = myData.find(function(item){
return item.id == id;
});
item[property] = value;
},
queryForIds: function(query, sort, page, limit){
// query = {search: "test"}
// sort = {property: "something", direction: "asc"}
// page = 1
// limit = 10
myData.sort(function(a,b){
if(sort.direction == "asc"){
var c = a;
a = b;
b = c;
}
if(a[sort.property] > b[sort.property]) return 1;
if(a[sort.property] < b[sort.property]) return -1;
return 0;
});
return myData.slice((page-1)*limit, page*limit).map(function(item){
return item.id;
});
},
length:myData.length
};

</script>

</body>
</html>
67 changes: 67 additions & 0 deletions demo/datatable.html
@@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title></title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-card/paper-card.html">
<link rel="import" href="../paper-datatable-card.html">
<link rel="import" href="../paper-datatable.html">
</head>
<body>


<template is="dom-bind" id="app">

<paper-card style="padding:20px;margin:20px;display:block;">
<paper-datatable data="{{data}}" id-property="aid" selectable>
<paper-datatable-column header="ID" property="aid" type="String" title="Some title" sortable> </paper-datatable-column>
<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" title="Some title" sortable> </paper-datatable-column>
<paper-datatable-column header="Calories" property="calories" type="Number" title="The total amount of..." sortable>
<template>
<paper-input value="{{value}}" no-label-float></paper-input>
</template>
</paper-datatable-column>
</paper-datatable>
</paper-card>
<paper-card style="padding:20px;margin:20px;display:block;">
<paper-datatable data="{{data}}" id-property="aid" selectable multi-selection>
<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" title="Some title" sortable> </paper-datatable-column>
<paper-datatable-column header="Calories" property="calories" type="Number" title="The total amount of..." sortable>
<template>
<paper-input value="{{value}}"></paper-input>
<paper-input value="{{item.calories}}"></paper-input>
<paper-input value="{{item.complexObj.a}}"></paper-input>
</template>
</paper-datatable-column>
<paper-datatable-column header="Object" property="complexObj" type="Object" title="The total amount of..." sortable>
<template>
<paper-input value="{{value.a}}"></paper-input>
<paper-input value="{{item.complexObj.a}}"></paper-input>
<paper-input value="{{item.complexObj.b}}"></paper-input>
</template>
</paper-datatable-column>
<paper-datatable-column header="Array" property="arr" type="Array" title="The total amount of..." sortable>
<template>
<template is="dom-repeat" items="{{value}}" as="valueItem">
<paper-input value="{{valueItem}}"></paper-input>
</template>
</template>
</paper-datatable-column>
</paper-datatable>
</paper-card>
Calories: <span>{{data.0.calories}}</span>
Array item: <span>{{data.0.arr.0}}</span>
<paper-input value="{{data.1.calories}}"></paper-input>
</template>

<script>
var app = document.querySelector('#app');
app.data = [
{aid: "asdf", title: "Ice cream", calories: 2000, complexObj: {a:"b",b:"d"}, arr: [2,3,4]},
{aid: "sdfg", title: "Dessert", calories: 3000, complexObj: {a:"bb",b:"dd"}, arr: [5,6]}
];
</script>

</body>
</html>
26 changes: 26 additions & 0 deletions demo/index.html
@@ -0,0 +1,26 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>seed-element Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>

<ul>
<li>Barebone <code>&lt;datatable&gt;</code> element <a href="./datatable.html">demo</a>.</li>
<li><code>&lt;datatable-card&gt;</code> element <a href="./datatable.html">demo</a>.</li>
</ul>

</body>
</html>
29 changes: 29 additions & 0 deletions index.html
@@ -0,0 +1,29 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">

</head>
<body>
<!-- Note: if the main element for this repository doesn't
match the folder name, add a src="&lt;main-component&gt;.html" attribute,
where &lt;main-component&gt;.html" is a file that imports all of the
components you want documented. -->
<iron-component-page ></iron-component-page>

</body>
</html>

0 comments on commit 0b9d731

Please sign in to comment.