<hot-table>

Custom renderers demo

Simple Example

Used renderers

• First Name column uses polymer <colored-renderer> element
• Last Name column uses polymer <bold-renderer> element
• Gender column uses <template> element to render cells (as simple cell decorator)
• Age column uses native <age-renderer> (CustomElement + ShadowDOM) to render cells
• Map column uses polymer <google-maps> element

Code

<dom-bind>
  <template>
    <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" height="100" value="address" header="Map" class="maps">
        <template data-hot-role="renderer" is="dom-template">
          <template is="dom-if" if="{{ value }}">
            <custom-google-map-search map="[[ map ]]" query="{{ value }}" global-search results="{{ results }}"></custom-google-map-search>
            <google-map disable-default-ui disable-zoom map="{{ map }}"
                        latitude="{{ results.latitude }}" longitude="{{ results.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>
</dom-bind>