Cómo añadir unas flechas que ordenen los registros en una tabla de Bootstrap

Bootstrap te ayuda a personalizar tus tablas en menos de lo que canta un gallo. Es decir, puedes crear una tabla HTML con un aspecto súper profesional en un minuto utilizando el framework Bootstrap. Pero, aún así, se puede mejorar dicho aspecto con muy poco código CSS.

El hecho de poder ordenar columnas es una característica comúnmente utilizada en aplicaciones web. Para agregar la funcionalidad de poder ordenar columnas, debes cambiar el estilo de las tablas HTML. Si utilizas la estructura de tablas de Bootstrap, puedes agregar unas flechas para ordenar los registros que componen la tabla. En este tutorial, te mostraremos cómo agregar dichas flechas para ordenar columnas de una tabla en Bootstrap utilizando CSS.

En el siguiente fragmento de código de ejemplo agregaremos unos iconos de unas flecha de arriba/abajo a las columnas de la tabla para ayudar a ordenar los registros por orden ascendente y/o descendente.

Código HTML:

<div class="container">
    <h2 class="page-header">Tabla Bootstrap con selectores de ordenacion</h2>

    <table class="table table-bordered table-sortable">
        <caption>
            <code>table.table-sortable</code>
        </caption>
        <thead>
            <tr>
                <th class="asc">#</th>
                <th class="desc">Campo 1</th>
                <th>Campo 2</th>
                <th>Campo 3</th>
            </tr>
        </thead>
        <tbody>
            <tr><th scope="row">1</th><td>Data 1</td><td>Pedro</td><td>2020-01-24</td></tr>
            <tr><th scope="row">2</th><td>Data 2</td><td>Angela</td><td>2020-01-22</td></tr>
            <tr><th scope="row">3</th><td>Data 3</td><td >Laura</td><td>2020-01-20</td></tr>
        </tbody>
    </table>
</div>

Código CSS:

h2.page-header {
    margin-top: 0px;
    padding-top: 0px;
    line-height: 15px;
    vertical-align: middle;
}

.table-sortable > thead > tr > th {
    cursor: pointer;
    position: relative;
}

.table-sortable > thead > tr > th:after,
.table-sortable > thead > tr > th:after,
.table-sortable > thead > tr > th:after {
    content: ' ';
    position: absolute;
    height: 0;
    width: 0;
    right: 10px;
    top: 16px;
}

.table-sortable > thead > tr > th:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ccc;
    border-bottom: 0px solid transparent;
}

.table-sortable > thead > tr > th:hover:after {
    border-top: 5px solid #888;
}

.table-sortable > thead > tr > th.asc:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #333;
}
.table-sortable > thead > tr > th.asc:hover:after {
    border-bottom: 5px solid #888;
}

.table-sortable > thead > tr > th.desc:after {    
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    border-bottom: 5px solid transparent;
}