<hot-table>

Binding rows with headers demo

Simple Example (strict mode)

Try to add or remove rows using context menu. You will see that in strict mode all rows headers' keep to their initial rows.

Code

<dom-bind>
  <template>
    <hot-table width="420" height="280" datarows="{{ people }}" row-headers context-menu bind-rows-with-headers="strict">
      <hot-column width="50" read-only value="id" header="ID" type="numeric"></hot-column>
      <hot-column width="100" 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="100" value="gender" type="dropdown" source="genderList" header="Gender">
        <template data-hot-role="renderer" is="dom-template">(<span>{{ value }}</span>)</template>
      </hot-column>
    </hot-table>
  </template>
</dom-bind>