<hot-table>

Custom editors demo

Simple Example

Used editors:

• Color skill level column uses <template> element to edit cell
• Languages column uses polymer <language-editor> element

Code

<dom-bind>
  <template>
    <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="languages" header="Languages">
        <template data-hot-role="renderer" is="dom-template">
          <template is="dom-if" if="{{ value }}">
            <template is="dom-repeat" items="{{ value }}" as="code">
              <img src="{{ languagesComputedSrc(code) }}" alt$="{{ code }}">
            </template>
          </template>
        </template>
        <template data-hot-role="editor" is="dom-template">
          <language-editor selected="[[ value ]]"></language-editor>
        </template>
      </hot-column>
    </hot-table>
  </template>
</dom-bind>