-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'fix-styles-issue-23' into develop
- Loading branch information
Showing
4 changed files
with
2,128 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title><hot-table></title> | ||
|
|
||
| <!-- Importing Web Component's Polyfill --> | ||
| <script src="../webcomponentsjs/webcomponents.js"></script> | ||
| <script> | ||
| window.Polymer = window.Polymer || {}; | ||
| window.Polymer.dom = "shadow"; | ||
| </script> | ||
|
|
||
| <!-- Code highlighter --> | ||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script> | ||
|
|
||
| <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css"> | ||
| <link rel="stylesheet" href="examples/css/main.css"/> | ||
|
|
||
| <!-- Importing Custom Elements --> | ||
| <link rel="import" href="hot-table.html"> | ||
| <style is="custom-style" include="hot-table-style"></style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id="wrapper"> | ||
| <header> | ||
| <h1><hot-table></h1> | ||
| <h2 class="logo-desc">Polymer Element wrapper for <a href="http://handsontable.com">Handsontable</a> data grid editor</h2> | ||
| </header> | ||
|
|
||
| <p class="warning">Some stuff does not work yet. <b>For now it is not ready for production!</b> <br> | ||
| But feel free to submit issues on GitHub.</p> | ||
|
|
||
| <h2>Install</h2> | ||
| <br> | ||
| Install the component using Bower: | ||
| <pre><code class="bash"> | ||
| $ bower install hot-table --save | ||
| </code></pre> | ||
| Or <a href="https://github.com/handsontable/hot-table/archive/master.zip">download as ZIP</a>. | ||
|
|
||
| <h2>Usage</h2> | ||
| <br> | ||
| 1. Import Web Components' polyfill: | ||
| <pre><code class="html"> | ||
| <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> | ||
| </code></pre> | ||
| 2. Import Custom Element: | ||
| <pre><code class="html"> | ||
| <link rel="import" href="bower_components/hot-table/hot-table.html"> | ||
| </code></pre> | ||
| 3. Start using it! | ||
| <pre><code class="html"> | ||
| <hot-table datarows="{{ itemsArray }}"></hot-table> | ||
| </code></pre> | ||
|
|
||
| <a href="https://github.com/handsontable/hot-table" class="fork-me"> | ||
| <img src="http://aral.github.com/fork-me-on-github-retina-ribbons/right-dusk-blue@2x.png" alt="Fork me on GitHub"> | ||
| </a> | ||
|
|
||
| <h2>Simple Example</h2> | ||
|
|
||
| <div class="example"> | ||
| <template id="tpl" is="dom-bind"> | ||
| <p> | ||
| Name of first person: <strong>{{ people.0.name.first }}</strong> | Highlighted row: <strong>{{ highlightedRow }}</strong> | ||
| </p> | ||
| <hot-table width="655" height="295" datarows="{{ people }}" context-menu max-rows="{{ people.length }}" | ||
| highlighted-row="{{ highlightedRow }}" class="htLeft"> | ||
| <hot-column width="30" read-only value="id" header="ID"></hot-column> | ||
| <hot-column value="name.first" header="First Name"> | ||
| <template data-hot-role="renderer" is="dom-template"><span>{{ value }}</span>...</template> | ||
| </hot-column> | ||
| <hot-column width="100" value="name.last" header="Last Name"></hot-column> | ||
| <hot-column width="100" type="date" value="date" header="Birthday"></hot-column> | ||
| <hot-column value="gender" header="Gender" source="[[ genderSource ]]" type="dropdown"></hot-column> | ||
| <hot-column type="numeric" value="age" header="Age"></hot-column> | ||
| <hot-column type="checkbox" value="languages.english" header="English" checked-template="Yes" | ||
| unchecked-template="No"></hot-column> | ||
| <hot-column type="checkbox" value="languages.spanish" header="Spanish" checked-template="Yes" | ||
| unchecked-template="No"></hot-column> | ||
| <hot-column type="checkbox" value="languages.french" header="French" checked-template="Yes" | ||
| unchecked-template="No"></hot-column> | ||
| <hot-column type="numeric" value="salary" header="Salary" format="$ 0,0.00"></hot-column> | ||
| </hot-table> | ||
| </template> | ||
| </div> | ||
|
|
||
| <h2>Code</h2> | ||
|
|
||
| <pre><code class="html"> | ||
| <template id="tpl" is="dom-bind"> | ||
| <p> | ||
| Name of first person: <strong>{{ people.0.name.first }}</strong> | Highlighted row: <strong>{{ highlightedRow }}</strong> | ||
| </p> | ||
| <hot-table width="655" height="295" datarows="{{ people }}" context-menu max-rows="{{ people.length }}" | ||
| highlighted-row="{{ highlightedRow }}" class="htLeft"> | ||
| <hot-column width="30" read-only value="id" header="ID"></hot-column> | ||
| <hot-column value="name.first" header="First Name"> | ||
| <template data-hot-role="renderer" is="dom-template"><span>{{ value }}</span>...</template> | ||
| </hot-column> | ||
| <hot-column width="100" value="name.last" header="Last Name"></hot-column> | ||
| <hot-column width="100" type="date" value="date" header="Birthday"></hot-column> | ||
| <hot-column value="gender" header="Gender" source="[[ genderSource ]]" type="dropdown"></hot-column> | ||
| <hot-column type="numeric" value="age" header="Age"></hot-column> | ||
| <hot-column type="checkbox" value="languages.english" header="English" checked-template="Yes" | ||
| unchecked-template="No"></hot-column> | ||
| <hot-column type="checkbox" value="languages.spanish" header="Spanish" checked-template="Yes" | ||
| unchecked-template="No"></hot-column> | ||
| <hot-column type="checkbox" value="languages.french" header="French" checked-template="Yes" | ||
| unchecked-template="No"></hot-column> | ||
| <hot-column type="numeric" value="salary" header="Salary" format="$ 0,0.00"></hot-column> | ||
| </hot-table> | ||
| </template> | ||
| </code></pre> | ||
|
|
||
| <h2>More demos</h2> | ||
|
|
||
| <ul> | ||
| <li><a href="examples/renderers.html">Custom Renderers</a></li> | ||
| <li><a href="examples/editors.html">Custom Editors</a></li> | ||
| <li><a href="examples/dashboard.html">Dashboard</a></li> | ||
| <li><a href="examples/persistent-state.html">Saving table state (persistent state)</a></li> | ||
| <li><a href="examples/dynamically-generated-context-menu.html">Dynamically generated context menu</a></li> | ||
| <li>Nested Tables (comming soon)</li> | ||
| </ul> | ||
|
|
||
| <h2>PRO features</h2> | ||
| <br> | ||
| <p> | ||
| To install Handsontable PRO follow by this instructions. | ||
| </p> | ||
| Install the component using Bower: | ||
| <pre><code class="bash"> | ||
| $ bower install hot-table --save | ||
| </code></pre> | ||
|
|
||
| Overwrite handsontable version with handsontable PRO: | ||
| <pre><code class="bash"> | ||
| $ bower install handsontable=git@git.handsontable.com:handsontable/handsontable-pro.git --save | ||
| </code></pre> | ||
| <i>If you don't have license for Pro yet, please click <a href="https://handsontable.com/pricing.html">here</a> for more info.</i> | ||
|
|
||
| <h2>Demos</h2> | ||
|
|
||
| <ul> | ||
| <li><a href="examples/data-filtering.html">Data filtering</a></li> | ||
| <li><a href="examples/bind-rows-with-headers.html">Bind rows with headers</a></li> | ||
| <li><a href="examples/fixing-bottom-rows.html">Fixing bottom rows</a></li> | ||
| <li><a href="examples/collapsing-columns.html">Collapsing columns with nested headers</a></li> | ||
| </ul> | ||
|
|
||
| <script> | ||
| var people = [ | ||
| {id: 1, date: '24/12/1986', name: {first: 'Joe', last: 'Fabiano'}, gender: 'Male', age: 21, | ||
| languages: {english: 'Yes', spanish: 'Yes', french: 'No'}, salary: 2000}, | ||
| {id: 2, date: '30/01/1976', name: {first: 'Fred', last: 'Wecler'}, gender: 'Male', age: 25, | ||
| languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 2500}, | ||
| {id: 3, date: '14/07/1967', name: {first: 'Steve', last: 'Wilson'}, gender: 'Male', age: 32, | ||
| languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 1700}, | ||
| {id: 4, date: '14/06/1956', name: {first: 'Maria', last: 'Fernandez'}, gender: 'Female', age: 27, | ||
| languages: {english: 'No', spanish: 'Yes', french: 'Yes'}, salary: 3000}, | ||
| {id: 5, date: '09/05/1975', name: {first: 'Pierre', last: 'Barbault'}, gender: 'Male', age: 46, | ||
| languages: {english: 'Yes', spanish: 'No', french: 'Yes'}, salary: 1450}, | ||
| {id: 6, date: '01/01/1986', name: {first: 'Nancy', last: 'Moore'}, gender: 'Female', age: 34, | ||
| languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 2300}, | ||
| {id: 7, date: '04/03/1994', name: {first: 'Barbara', last: 'MacDonald'}, gender: 'Female', age: 19, | ||
| languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 1900}, | ||
| {id: 8, date: '01/04/1993', name: {first: 'Wilma', last: 'Williams'}, gender: 'Female', age: 33, | ||
| languages: {english: 'Yes', spanish: 'Yes', french: 'Yes'}, salary: 2400}, | ||
| {id: 9, date: '01/05/1982', name: {first: 'Sasha', last: 'Silver'}, gender: 'Male', age: 27, | ||
| languages: {english: 'Yes', spanish: 'No', french: 'Yes'}, salary: 2110}, | ||
| {id: 10, date: '03/10/1992', name: {first: 'Don', last: 'Pérignon'}, gender: 'Male', age: 42, | ||
| languages: {english: 'No', spanish: 'No', french: 'Yes'}, salary: 2090}, | ||
| {id: 11, date: '01/10/1991', name: {first: 'Aaron', last: 'Kinley'}, gender: 'Female', age: 33, | ||
| languages: {english: 'Yes', spanish: 'Yes', french: 'Yes'}, salary: 2799} | ||
| ]; | ||
|
|
||
| window.addEventListener('dom-change', function () { | ||
| var tpl = document.getElementById('tpl'); | ||
|
|
||
| tpl.highlightedRow = -1; | ||
| tpl.people = people; | ||
| tpl.genderSource = ['Male', 'Female']; | ||
| }); | ||
| </script> | ||
| <script>hljs.initHighlightingOnLoad();</script> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.