JSFiddle - React, Tailwind, and code Playground

by Grégor González

HTML

<div class="container" ng-app="miApp" ng-controller="mainController">

  <div class="alert alert-info">
    <p>Ordenado Por: {{ sortType }}</p>
    <p>Ordenado Reversa: {{ sortReverse }}</p>
    <p>Buscando por: {{ buscar }}</p>
  </div>

  <form>
    <input type="text" class="form-control" placeholder="Busqueda" ng-model="buscar">
  </form>

  <table class="table table-bordered table-striped">

    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse">
          Id 
            <span ng-class="sortType == 'id' && !sortReverse ? 'arrow arrow-down' : sortType == 'id' && sortReverse ? 'arrow arrow-up': ''"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'nombre'; sortReverse = !sortReverse">
            Nombre
            <span ng-class="sortType == 'nombre' && !sortReverse ? 'arrow arrow-down' : sortType == 'nombre' && sortReverse ? 'arrow arrow-up': ''"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'apellido'; sortReverse = !sortReverse">
          Apellido 
            <span ng-class="sortType == 'apellido' && !sortReverse ? 'arrow arrow-down' : sortType == 'apellido' && sortReverse ? 'arrow arrow-up': ''"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fecha'; sortReverse = !sortReverse">
          Fecha
            <span ng-class="sortType == 'fecha' && !sortReverse ? 'arrow arrow-down' : sortType == 'fecha' && sortReverse ? 'arrow arrow-up': ''"></span>
          </a>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="cliente in clientes | orderBy:sortType:sortReverse | filter:buscar">
        <td>{{ cliente.id }}</td>
        <td>{{ cliente.nombre }}</td>
        <td>{{ cliente.apellido }}</td>
        <td>{{ cliente.fecha }}</td>
      </tr>
    </tbody>

  </table>
</div>

CSS

.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
}

.arrow-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

JavaScript

angular.module('miApp', [])
  .controller('mainController', function($scope) {
    $scope.sortType = 'nombre';
    $scope.sortReverse = false;
    $scope.buscar = '';

    $scope.clientes = [{
        id: 1,
        nombre: 'Grégor',
        apellido: 'Gozález',
        fecha: '22/05/2019'
      },
      {
        id: 2,
        nombre: 'Maria',
        apellido: 'Sulbaran',
        fecha: '20/05/2019'
      },
      {
        id: 3,
        nombre: 'Juan',
        apellido: 'Cedeño',
        fecha: '30/05/2019'
      },
      {
        id: 4,
        nombre: 'Carlos',
        apellido: 'Perez',
        fecha: '31/05/2019'
      }
    ];

  });