Angular Smart Table Like DataTables

SmartTable.html

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-bordered table-striped no-border-top">
  <thead>
  <tr class="search-header">
      <th colspan="6">
          <span>Buscar:</span> <input st-search="" class="form-control input-sm" type="text"/>
      </th>
  </tr>
  <tr>
    <th st-sort="codigo" class="sortable">Código</th>
    <th st-sort="nombre" class="sortable">Nombre</th>
    <th st-sort="email" class="sortable">Email</th>
    <th st-sort="rol" class="sortable">Rol</th>
    <th st-sort="estado" class="sortable">Estatus</th>
    <th width="100">Acciones</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="row in displayedCollection">
    <td>{{ row.codigo }}</td>
    <td>{{ row.nombre }} {{ row.apellido }}</td>
    <td>{{ row.email }}</td>
    <td>{{ row.rol.descripcion }}</td>
    <td><span class="label {{ statusClassOf(row.estatus) }}">{{ statusTextOf(row.estatus) }}</span></td>
    <td>
      <button type="button" ui-sref="app.usuarios.editar({codigo: row.codigo})" ng-show="permisos.puedeEditar('usuarios')" class="btn btn-xs btn-default btn-action" data-toggle="tooltip" data-placement="top" title="Editar">
          <i class="fa fa-pencil text-dark-lter"></i>
      </button>
    </td>
  </tr>
  </tbody>
</table>

Style.css

.search-header th {
    border-left-color: #fff !important;
    border-right-color: #fff !important;
    border-bottom: 1px !important;
    text-align: right !important;
    padding: 0 !important;
}

.search-header input {
    display: inline-block;
    margin: 0 0 10px 0;
    width: 170px;
}

.search-header span, .search-header input{
    font-weight: normal;
}

.no-border-top {
    border-top: 0;
}

.sortable {
  cursor: pointer;
}
.sortable:after {
  font-family: FontAwesome;
  content: "\f0ec";
  float: right;
  opacity: 0.2;;
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.st-sort-ascent:after,
.st-sort-descent:after {
    opacity: 0.4;
    -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
}

.st-sort-ascent:after {
  font-family: FontAwesome;
  content: "\f160";
}
.st-sort-descent:after {
  font-family: FontAwesome;
  content: "\f161";
}