<table class="md-table">
  <thead>
    <tr class="md-table-headers-row">
      <th class="md-table-header" ng-repeat="h in headers">
        <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span><span  class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span></a>
        <span ng-if="!handleSort(h.field)">{{h.name}}</span>
      </th>
      <th class="md-table-header" ng-show="showMore()"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="md-table-content-row" ng-repeat="c in content | filter:filters | startFrom:currentPage*count | limitTo: count">
      <td ng-repeat="h in headers" ng-if="h.field == thumbs" class="md-table-thumbs">
        <div ng-if="h.field == thumbs" style="background-image:url({{c.thumb}})"></div>
      </td>
      <td class="md-table-content" ng-click="doSelect({data:c})" ng-repeat="h in headers" ng-class="customClass[h.field]" ng-if="h.field != thumbs">
        {{c[h.field]}}
      </td>
      <td class="md-table-td-more" ng-show="showMore()">
        <md-button aria-label="More" ng-click="moreClick(c, $event)">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
          </svg>
        </md-button>
      </td>
    </tr>
  </tbody>
</table>
<div class="md-table-footer" layout="row">
  <span class="md-table-count-info">Rows count per page : <a href ng-click="goToPage(0); count=1">1</a>, <a href ng-click="goToPage(0); count=10">10</a>, <a href ng-click="goToPage(0); count=25">25</a>, <a href ng-click="goToPage(0); count=50">50</a>, <a href ng-click="goToPage(0); count=100">100</a> (current is <strong>{{count}}</strong>)</span>
  <span flex></span>
  <span ng-show="nbOfPages() > 1">
    <md-button aria-label="Back" class="md-table-footer-item" ng-disabled="currentPage==0" ng-click="currentPage=currentPage-1">
      <img src="assets/img/ic_keyboard_arrow_left_24px.svg">
    </md-button>
    <a href ng-repeat="i in getNumber(nbOfPages()) track by $index" >
      <md-button aria-label="Next" class="md-primary md-table-footer-item" ng-click="goToPage($index)">
        <span ng-class="{ 'md-table-active-page': currentPage==$index}">{{$index+1}}</span>
      </md-button>
    </a>
    <md-button aria-label="Jump" class="md-table-footer-item" ng-disabled="currentPage==nbOfPages()-1" ng-click="currentPage=currentPage+1">
      <img src="assets/img/ic_keyboard_arrow_right_24px.svg">
    </md-button>
  </span>
</div>
