<hot-table>

Custom renderers demo

Simple Example

Used renderers

Code


  <template id="tpl" is="dom-bind">
    <hot-table width="830" height="1050" datarows="{{ people }}" max-rows="{{ people.length }}" context-menu>
      <hot-column width="30" read-only value="id" header="ID"></hot-column>
      <hot-column width="70" value="name.first" header="First Name">
        <template data-hot-role="renderer" is="dom-template"><colored-renderer value="{{ value }}"></colored-renderer></template>
      </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" header="Gender">
        <template data-hot-role="renderer" is="dom-template">(<span>{{ value }}</span>)</template>
      </hot-column>
      <hot-column width="120" value="age" header="Age">
        <template data-hot-role="renderer" is="dom-template"><age-renderer age$="{{ value }}"></age-renderer></template>
      </hot-column>
      <hot-column width="200" value="address" header="Map" class="maps">
        <template data-hot-role="renderer" is="dom-template">
          <template is="dom-if" if="{{ value }}">
            <google-map-search map="{{ map }}" query="{{ value }}" global-search results="{{ results }}"></google-map-search>
            <google-map disable-default-ui disable-zoom map="{{ map }}"
                        latitude="{{ results.0.latitude }}" longitude="{{ results.0.longitude }}"></google-map>
          </template>
          <template is="dom-if" if="{{ !value }}">
            <div class="google-map-empty">Double click me to provide address to show.</div>
          </template>
        </template>
      </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>