<paginate
  ng-if="sortedRows.length"
  list="sortedRows"
  per-page-prop="perPage"
  class="agg-table">
  <div class="agg-table-paginated">
    <table class="table table-condensed">
      <thead>
        <tr>
          <th
            ng-repeat="col in ::columns"
            ng-click="paginatedTable.sortColumn($index)"
            class="{{ col.class }}">
            <span ng-bind="::col.title"></span>
            <kbn-info ng-if="col.info" info="{{ col.info }}" placement="top"></kbn-info>
            <i
              ng-if="col.sortable !== false"
              class="fa"
              ng-class="{
                'fa-sort-asc': paginatedTable.sort.columnIndex === $index && paginatedTable.sort.direction === 'asc',
                'fa-sort-desc': paginatedTable.sort.columnIndex === $index && paginatedTable.sort.direction === 'desc',
                'fa-sort': paginatedTable.sort.columnIndex !== $index || paginatedTable.sort.direction === null
              }">
            </i>
            <i aria-label="Click on a cell to filter" ng-if="col.filterable" class="fa fa-search" ng-click="$event.stopPropagation()" tooltip="Click on a cell to filter"></i>
          </th>
        </tr>
      </thead>
      <tbody kbn-rows="page" kbn-rows-min="perPage"></tbody>
      <tfoot ng-if="showTotal">
        <tr>
          <th ng-repeat="col in columns" class="numeric-value">{{col.total | number}}</th>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- auto-inserted by the paginate directive... -->
  <!-- <paginate-controls></paginate-controls> -->
  <div class="pagination-container" ng-transclude></div>
</paginate>
