<treelist>
  <nav class="panel">
    <p class="panel-tabs">
      <a id="ALLtab" onclick={panel_filter} class="is-active">ALL</a>
      <a id="Atab" onclick={panel_filter}>A</a>
      <a id="Btab" onclick={panel_filter}>B</a>
      <a id="Ctab" onclick={panel_filter}>C</a>
      <a id="Dtab" onclick={panel_filter}>D</a>
      <a id="Etab" onclick={panel_filter}>E</a>
      <a id="Ftab" onclick={panel_filter}>F</a>
      <a id="Gtab" onclick={panel_filter}>G</a>
      <a id="Htab" onclick={panel_filter}>H</a>
      <a id="Itab" onclick={panel_filter}>I</a>
      <a id="Jtab" onclick={panel_filter}>J</a>
    </p>
    <virtual each={ lists }>
      <a class="panel-block" show={ (this.showTab == symbol || this.showTab =='ALL') }>
      <!-- <a class="panel-block"> -->
        <div class="level">
          <div class="level-left">
            <span>
              <i class="{symbol}">&nbsp;</i>
            </span>
          </div>
          <div class="level-item">
            <span>{quantity}&nbsp;</span>
          </div>
          <div class="level-item">
            <span class="is-uppercase">{name}&nbsp;</span>
          </div>
          <div class="level-item">
            <span>{range}&nbsp;</span>
          </div>
          <div class="level-item">
            <span>{age}&nbsp;</span>
          </div>
          <div class="level-right">
            <div class="level-item">
              <span>${cost}</span>
            </div>
          </div>
        </div>
      </a>
    </virtual>
  </nav>

  <script>
    this.showTab = 'ALL';
.
.
.
    this.panel_filter = function (e) {
      document.getElementById(this.showTab + 'tab').classList.remove('is-active')
      this.showTab = e.target.innerText
      document.getElementById(this.showTab + 'tab').classList.add('is-active')
      this.trigger('update')
    }

  </script>

  <style scoped>

  </style>

</treelist>