<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="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">
          <language-editor selected="{{ value }}"></language-editor>
        </template>
      </hot-column>
    </hot-table>
  </template>