<hot-table>

Custom editors demo

Simple Example

Used editors:

Code


  <template id="tpl" is="dom-bind">
    <hot-table width="790" height="490" datarows="{{ people }}" context-menu="true" max-rows="10">
      <hot-column width="30" read-only value="id" header="ID"></hot-column>
      <hot-column width="70" value="name.first" header="First Name"></hot-column>
      <hot-column width="100" value="name.last" header="Last Name">
        <template data-hot-role="renderer" is="dom-template">
          <bold-renderer value="{{ value }}"></bold-renderer>
        </template>
      </hot-column>
      <hot-column width="80" value="gender" type="dropdown" source="genderList" header="Gender">
        <template data-hot-role="renderer" is="dom-template">(<span>{{ value }}</span>)</template>
      </hot-column>
      <hot-column width="100" value="skillLevel" header="Color skill level" class="no-padding color-editor">
        <template data-hot-role="renderer" is="dom-template">
          <div class$="{{ value }}"></div>
        </template>
        <template data-hot-role="editor" is="dom-template">
          <select name="color" value="{{ value::input }}">
            <option value="black">Black</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="orange">Orange</option>
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
          </select>
        </template>
      </hot-column>
      <hot-column width="180" value="coordinates" header="Last seen">
        <template data-hot-role="renderer" is="dom-template" style="white-space: normal;">
          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-column width="180" value="languages" header="Languages">
        <template id="abcde" data-hot-role="renderer" is="dom-template">
          <template is="dom-repeat" items="{{ value }}" as="code">
            <img src="{{ languagesComputedSrc(code) }}" alt="{{ code }}"/>
          </template>
        </template>
        <template data-hot-role="editor" is="dom-template">
          <div class="languages-editor">
            <language-editor selected="{{ value }}"></language-editor>
          </div>
        </template>
      </hot-column>
    </hot-table>
  </template>