<div class="horizontal-scroll">
  <div class="form-group select-page-size-wrap ">
    <label>Rows on page
      <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker
              ng-model="smartTablePageSize" ng-options="i for i in [5,10,15,20,25]">
      </select>
    </label>
  </div>
  <table class="table" st-table="smartTableData">
    <thead>
    <tr class="sortable ">
      <th class="table-id" st-sort="id" st-sort-default="true">#</th>
      <th st-sort="firstName">First Name</th>
      <th st-sort="lastName">Last Name</th>
      <th st-sort="username">Username</th>
      <th st-sort="email">Email</th>
      <th st-sort="age">Age</th>
    </tr>
    <tr>
      <th></th>
      <th><input st-search="firstName" placeholder="Search First Name" class="input-sm form-control search-input"
                 type="search"/></th>
      <th><input st-search="lastName" placeholder="Search Last Name" class="input-sm form-control search-input"
                 type="search"/></th>
      <th><input st-search="username" placeholder="Search Username" class="input-sm form-control search-input"
                 type="search"/></th>
      <th><input st-search="email" placeholder="Search Email" class="input-sm form-control search-input" type="search"/>
      </th>
      <th><input st-search="age" placeholder="Search Age" class="input-sm form-control search-input" type="search"/>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in smartTableData">
      <td class="table-id">{{item.id}}</td>
      <td>{{item.firstName}}</td>
      <td>{{item.lastName}}</td>
      <td>{{item.username}}</td>
      <td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
      <td>{{item.age}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="6" class="text-center">
        <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="5"></div>
      </td>
    </tr>
    </tfoot>
  </table>
</div>