Représenter une grille ou un tableau en AngularJS avec Bootstrap
Tout comme le framework AngularJS, Bootstrap propose différentes possibilités pour implémenter une grille ou un tableau.
Les frameworks AngularJS et Bootstrap offrent différentes possibilités pour implémenter une grille ou un tableau. Il n'y a pas vraiment de meilleur composant par rapport à un autre, cela dépend de votre affinité avec l'utilisation du module et le code à écrire. Chacun des composants cités dans cet article permet de mettre en place une pagination, d'effectuer une recherche, ou encore de trier les lignes.
Le composant ngGrid utilise la balise <div> pour afficher un tableau contenant les éléments à afficher. Il utilise AngularJS et Jquery, et s'intègre bien avec la librairie AngularUI. La documentation de cette librairie est très complète, et contient des exemples pour apprendre à l'utiliser. Le composant est téléchargeable à cette adresse.
NgTable est un autre composant qui utilise uniquement AngularJS. Contrairement à ngGrid, il fonctionne en utilisant la balise <table>, ce qui lui permet notamment d'être compatible avec les thèmes de Bootstrap. Vous pouvez installer le composant depuis ce site.
Smart-Table est un autre composant possible. Il utilise la balise <table> pour afficher les tableaux, l'attribut standard ng-repeat d'Angular pour les lignes, et les propriétés de Bootstrap pour formater l'affichage. Ces éléments rendent l'écriture d'une table avec ce plugin très similaire à une écriture avec le framework AngularJS nativement. Smart-Table est disponible ici.
Le composant trNgGrid utilise également des tables HTML comme base. Il est très simple d'utilisation, et respecte les mêmes principes qu'AngularJS dans son écriture. Le composant trNgGrid peut être récupéré à partir de moonstorm.github.io.