<hot-table>

Polymer Element wrapper for Handsontable data grid editor

Some stuff does not work yet. For now it is not ready for production!
But feel free to submit issues on GitHub.

Install


Install the component using Bower:

    $ bower install hot-table --save
  
Or download as ZIP.

Usage


1. Import Web Components' polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  
2. Import Custom Element:

    <link rel="import" href="bower_components/hot-table/hot-table.html">
  
3. Start using it!

    <hot-table datarows="{{ itemsArray }}"></hot-table>
  
Fork me on GitHub

Simple Example

Code


  <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>
  

More demos

PRO features


To install Handsontable PRO follow by this instructions.

Install the component using Bower:

    $ bower install hot-table --save
  
Overwrite handsontable version with handsontable PRO:

    $ bower install handsontable=git@git.handsontable.com:handsontable/handsontable-pro.git --save
  
If you don't have license for Pro yet, please click here for more info.

Demos