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

Simple Example

Code


<dom-bind>
  <template>
    <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>
</dom-bind>

Demos

PRO features

To install Handsontable PRO follow by this instructions.