Cómo paginar y ordenar una tabla en Angular fácilmente

Hace unas semanas me surgió la duda de cual sería la mejor forma de implementar una tabla con paginación y ordenación en Angular 6.

Después de leer documentación, lo que me quedó claro es que desarrollarlo específicamente para mi proyecto iba a ser un proceso sino engorroso, si que involucrase un tiempo de desarrollo determinado que si al final solo iba a utilizar para algún Pet Project y unas pruebas de concepto no lo veía útil.

Así que me planteé el comentaros en esta publicación cual había sido la opción más rápida y efectiva que encontré.

Paginación con Bootstrap.

Aunque he de decir que no suelo utilizar componentes Bootstrap fuera del entorno laboral, sin embargo esta vez la elección se basó en la simplicidad y facilidad de uso.

Os detallo aquí los simples pasos que hay que seguir para tener una tabla con filtrado y ordenación funcionando.

En primer lugar me instalé Bootstrap:

npm install --save @ng-bootstrap/ng-bootstrap

Después lo añadí al app.module.ts:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';@NgModule({
...
imports: [NgbModule, ...],
...
})
export class AppModule{
}

Además en mi index.html tengo un enlace a los estilos de Bootstrap:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0./css/font-awesome.min.css"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

A continuación simplemente codifiqué el archivo HTML con mi tabla y la paginación de Bootstrap:

Como se puede ver es una tabla sencilla creada a partir de una lista de elementos, en la parte inferior se incluye el componente de Bootstrap al cual hay que añadir el número total de items dentro de la variable collectionSize, el número de página dentro de la variable page y un método que se dispare al cambiar de página unido al evento pageChange.

El siguiente paso es crear las variables necesarias y el método vinculado al pageChange en el archivo ts:

Es tan simple como crear las variables totalItems y page e inicializarlas. El método asociado al evento pageChange lo que hace es determinar si la página que ha desatado el evento es la misma que la que se está mostrando, en caso contrario actualiza el valor de la previousPage y llama al servicio para rellenar los valores a mostrar en la lista, pasándole la página que se quiere visualizar.

Fácil, rápido y sencillo.

Para ordenar la tabla me serví de la funcionalidad que tiene Angular para ello de forma que sólo tuve que modificar la cabecera de la tabla para añadirle esta funcionalidad y añadir una pipe al listado:

Como se puede ver en cada celda de la cabecera añado la vinculación a un evento click, que llama al método sortTable y le pasa el nombre de la propiedad seleccionada. Además en mi caso añado un icono que iré cambiando según el sentido en que esté ordenado el listado, esto se hace con la vinculación de la clase.

Además en el ngFor que recorre los elementos del listado lo vinculo con la pipe de ordenación de Angular.

El siguiente paso es crear tanto el método que ordena como el método que devuelve la clase del icono a mostrar en el archivo ts:

El método sortTable simplemente obtiene la propiedad por la que filtrar, cambia el orden de la misma y ¡listo!

El método getIcon dependiendo del orden que tenga la propiedad asociado muestra una flecha hacia arriba o hacia abajo, de forma que el icono cambie con la ordenación.

Como comentaba al inicio de este post, es un proceso simple y muy rápido de implementar.

Espero que esta publicación te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin

Software Developer at Sngular. PhD on Immunology, always learning and trying to share knowledge. Microsoft Most Value Professional on Developer Technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store