<div class="query-table">
  <table class="table table-striped table-condensed">
    <thead>
      <tr>
        {{#if(selectable)}}
        <th class="checkbox-heading">
          <div class="form-group">
            <label class="form-checkbox">
              <input type="checkbox" on:el:change="toggleSelectAll()" checked:from="_allSelected" />
              <i class="form-icon"></i>
            </label>
          </div>
        </th>
        {{/if}} 
        {{#for(field of fields)}}
        <th {{#is(field.name, currentSort.field)}} class="text-bold {{#if field.classes}}{{field.classes}}{{/if}}" {{/is}}
          {{#if(sort)}} on:click="setSort(field.name, scope.event)"{{/if}}>
          {{field.alias}} 
          {{#is(field.name, currentSort.field)}}
          <i class="fa fa-sort-{{#is(currentSort.type, 'desc')}}desc{{else}}asc{{/is}}"></i>
          <i class="fa fa-times float-right" on:el:click="setSort('', scope.event)" title="Clear Sort"></i>
          {{/is}}
        </th>
        {{/for}}
      </tr>
    </thead>

    <tbody>
      {{#for(object of objects)}}
      <tr {{domData('object', object)}} class="{{#if(isSelected(object))}}selected {{/if}}row-{{object[idProp]}}">
        {{#if(selectable)}}
        <td class="checkbox-cell">
          <div class="form-group d-inline-block">
            <label class="form-checkbox">
              <input type="checkbox" on:change="toggleSelected(object)" checked:from="isSelected(object)" />
              <i class="form-icon"></i>
            </label>
          </div>
        </td>
        {{/if}} 
        {{#for(field of fields)}}
        <td class="{{#if(field.classes)}}{{field.classes}} {{/if}}cell-{{field.name}}">
        
          {{!TODO: use slots}}
          {{#if(field.displayComponent}}
            {{>field.displayComponent}}
          {{else}}
            {{object[field.name]}}
          {{/if}}
        </td>
        {{/for}}
      </tr>
      {{/for}}
    </tbody>
  </table>
</div>