Je crée une application avec AngularJS et Bootstrap 3. Je veux afficher un tableau/grille avec des milliers de lignes. Quel est le meilleur contrôle disponible pour AngularJS & Bootstrap avec des fonctionnalités telles que le tri, la recherche, la pagination, etc.
Réponses
Trop de publicités?
Ricky Helgesson
Points
798
Après avoir essayé ngGrid, ngTable, trNgGrid et Smart Table, j'en suis arrivé à la conclusion que Smart Table est de loin la meilleure implémentation en termes d'AngularJS et de Bootstrap. Il est construit exactement de la même manière que vous construiriez votre propre table naïve en utilisant Angular standard. En plus de cela, ils ont ajouté quelques directives qui vous aident à faire du tri, du filtrage, etc. Leur approche rend également assez simple son extension par vous-même. Le fait qu'ils utilisent les balises HTML régulières pour les tableaux, la directive ng-repeat standard pour les lignes et Bootstrap standard pour la mise en forme en fait mon grand gagnant.
Leur code JS dépend d'Angular et votre HTML peut dépendre de Bootstrap si vous le souhaitez. Le code JS fait 4 ko au total et vous pouvez même facilement en extraire des éléments si vous souhaitez réduire encore plus sa taille.
Là où les autres grilles vous donneront de la claustrophobie à différents niveaux, Smart Table semble juste ouvert et direct.
Si vous comptez fortement sur l'édition en ligne et d'autres fonctionnalités avancées, vous pourriez démarrer plus rapidement avec ngTable par exemple. Cependant, vous êtes libre d'ajouter assez facilement de telles fonctionnalités à Smart Table.
Ne manquez pas Smart Table !!!
Je n'ai aucun lien avec Smart Table, à part l'utiliser moi-même.
J'avais la même exigence et je l'ai résolue en utilisant ces composants :
- AngularJS 1.0.8
- AngularUI Boostrap 0.10.0 : Compatible avec AngularJS 1.0.8 et Boostrap CSS 3.x.
- ng-grid 2.0.7 : Compatible avec AngularJS 1.0.8
- Bootstrap CSS 3.0
Le composant de tableau ng-grid est capable d'afficher des centaines de lignes dans une grille défilante. Si vous avez à traiter des milliers d'entrées, il est préférable d'utiliser le paginateur de ng-grid. La documentation de ng-grid est excellente et contient de nombreux exemples. Le tri et la recherche sont pris en charge même en combinaison avec la pagination.
Voici une capture d'écran d'un projet en cours pour vous donner une idée de son apparence :
Beyers
Points
4111
Avec "des milliers de lignes", votre meilleure option serait évidemment de faire du pagination côté serveur. Lorsque j'ai examiné les différentes options de tableaux/grilles AngularJs il y a quelque temps, il y avait trois favoris clairs :
Les trois sont bons, mais implémentés différemment. Celui que vous choisirez sera probablement basé davantage sur vos préférences personnelles que sur autre chose.
ng-grid est probablement le plus connu en raison de son association avec angular-ui, mais personnellement, je préfère ng-table, j'aime vraiment leur implémentation et comment l'utiliser, en plus ils disposent d'une documentation et d'exemples excellents et sont continuellement améliorés.
MoonStom
Points
523
Une grille Angular riche en fonctionnalités est celle-ci :
Certaines de ses fonctionnalités :
- A été construit en gardant à l'esprit la simplicité.
- Utilise des tables HTML simples, permettant aux navigateurs d'optimiser le rendu.
- Totalement déclaratif, préservant la séparation des préoccupations, vous permettant ainsi de le décrire entièrement en HTML, sans perturber vos contrôleurs.
- Est entièrement personnalisable via des modèles et des attributs liés aux données à double sens.
- Facile à maintenir, le code étant écrit en TypeScript.
- A une très courte liste de dépendances : AngularJs et Bootstrap CSS, avec des thèmes Bootswatch optionnels.
Profitez. Oui, je suis l'auteur. J'en ai eu assez de toutes les grilles Angular disponibles.
agusluc
Points
216
Pour toute personne lisant ce post : Faites-vous une faveur et restez loin de ng-grid. Il est plein de bugs (vraiment... presque chaque partie de la lib est cassée d'une manière ou d'une autre), les développeurs ont abandonné le support de la branche 2.0.x pour travailler sur la version 3.0 qui est très loin d'être prête. Réparer les problèmes par vous-même n'est pas une tâche facile, le code ng-grid n'est pas petit et n'est pas simple, à moins d'avoir beaucoup de temps et une connaissance approfondie d'Angular et de JS en général, cela va être une tâche difficile.
En fin de compte : est plein de bugs, et la dernière version stable a été abandonnée.
Le github est plein de PR, mais ils sont ignorés. Et si vous signalez un bug dans la branche 2.x, il est fermé.
Je sais que c'est un projet open source et que les plaintes peuvent sembler un peu déplacées, mais du point de vue d'un développeur cherchant une bibliothèque, c'est mon opinion. J'ai passé de nombreuses heures à travailler avec ng-grid dans un grand projet et les maux de tête ne finissent jamais.
