Migration guide to 0.2.x

Version 0.2.x uses Polymer ^1.0.0.

Major changes:

• Attributes defined in camelCase style will no longer support.

  <!-- Before: -->
  <hot-table datarows="{{ rows }}" contextMenu="true" maxRows="{{ rowsLength }}" readOnlyClassName="read-only">
    <hot-column value="name.last" readOnly></hot-column>
  </hot-table>
  
  <!-- After: -->
  <hot-table datarows="{{ rows }}" context-menu max-rows="{{ rowsLength }}" read-only-class-name="read-only">
    <hot-column value="name.last" read-only></hot-column>
  </hot-table>

• Templates in declarative renderers and editors must have is="dom-template" attribute. Additionaly binded cell value to renderer or editor template is always available under value property.

  <!-- Before: -->
  <hot-table datarows="{{ rows }}" contextMenu="true">
    <hot-column width="180" value="coordinates" header="Last seen">
      <template data-hot-role="renderer">
        lat: <b>{{ coordinates.lat }}</b><br/>
        lng: <b>{{ coordinates.lng }}</b>
      </template>
      <template data-hot-role="editor">
        <div class="map-editor">
          Latitude: <b>{{ coordinates.lat }}</b>, <br>
          Longitude: <b>{{ coordinates.lng }}</b>
          <template bind if="{{ showed }}">
            <google-map latitude="{{ coordinates.lat }}" longitude="{{ coordinates.lng }}">
              <google-map-marker latitude="{{ coordinates.lat }}" longitude="{{ coordinates.lng }}"></google-map-marker>
            </google-map>
          </template>
        </div>
      </template>
    </hot-column>
  </hot-table>
  
  <!-- After: -->
  <hot-table datarows="{{ rows }}" context-menu>
    <hot-column width="180" value="coordinates" header="Last seen">
      <template data-hot-role="renderer" is="dom-template">
        lat: <b>{{ value.lat }}</b><br/>
        lng: <b>{{ value.lng }}</b>
      </template>
      <template data-hot-role="editor" is="dom-template">
        <div class="map-editor">
          Latitude: <b>{{ value.lat }}</b>, <br>
          Longitude: <b>{{ value.lng }}</b>
          <template is="dom-if" if="[[ showed ]]">
            <google-map disable-zoom latitude="{{ value.lat }}" longitude="{{ value.lng }}">
              <google-map-marker latitude="[[ value.lat ]]" longitude="[[ value.lng ]]"></google-map-marker>
            </google-map>
          </template>
        </div>
      </template>
    </hot-column>
  </hot-table>