¿La mejor manera de representar una cuadrícula o tabla en AngularJS con Bootstrap 3? [cerrado]
Estoy creando una aplicación con AngularJS y Bootstrap 3. Quiero mostrar una tabla/cuadrícula con miles de filas. ¿Cuál es el mejor control disponible para AngularJS y Bootstrap con funciones como clasificación, búsqueda, paginación, etc.?
Después de probar ngGrid, ngTable, trNgGrid y Smart Table , llegué a la conclusión de que Smart Table es, con diferencia, la mejor implementación en cuanto a AngularJS y Bootstrap. Está construido exactamente de la misma manera que construirías tu propia mesa ingenua usando angulares estándar. Además de eso, han agregado algunas directivas que lo ayudan a ordenar, filtrar, etc. Su enfoque también hace que sea bastante sencillo ampliarlo. El hecho de que utilicen las etiquetas html habituales para las tablas y el ng-repeat estándar para las filas y el bootstrap estándar para el formato lo convierten en mi claro ganador.
Su código JS depende de angular y su html puede depender de bootstrap si así lo desea. El código JS tiene un total de 4 kb e incluso puedes seleccionar cosas fácilmente de allí si quieres ocupar un espacio aún más pequeño.
Mientras que las otras rejillas te darán claustrofobia en diferentes áreas, Smart Table simplemente se siente abierto y va al grano.
Si depende en gran medida de la edición en línea y otras funciones avanzadas, es posible que comience a utilizar ngTable más rápido, por ejemplo. Sin embargo, puede agregar dichas funciones con bastante facilidad en Smart Table.
¡¡¡No te pierdas Smart Table !!!
No tengo ninguna relación con Smart Table, excepto por usarlo yo mismo.
Tenía el mismo requisito y lo resolví usando estos componentes:
- AngularJS 1.0.8
- AngularUI Boostrap 0.10.0 : Compatible con AngularJS 1.0.8 y Boostrap CSS 3.x.
- ng-grid 2.0.7 : Compatible con AngularJS 1.0.8
- Arranque CSS 3.0
El componente de tabla ng-grid es capaz de mostrar cientos de filas en una cuadrícula desplazable. Si tiene que lidiar con miles de entradas, es mejor que utilice el paginador de ng-grid. La documentación de ng-grid es excelente y contiene muchos ejemplos. La clasificación y la búsqueda son compatibles incluso en combinación con la paginación.
Aquí hay una captura de pantalla de un proyecto actual para darle una idea de cómo se ve:
[ACTUALIZACIÓN julio 2017]
Después de tener ng-grid en producción durante un par de años, todavía puedo decir que no hay problemas importantes con este componente. Sí, muchos errores menores, pero no hay obstáculos (al menos en mis casos de uso). Dicho esto, desaconsejaría encarecidamente el uso de este componente si comienza un proyecto desde cero. Este componente es una buena opción solo si está vinculado a AngularJS 1.0.x. Si puede elegir la versión Angular, opte por un componente más nuevo. Sam Deering compiló una lista de componentes de tabla para Angular 4 en este blog .
Con "miles de filas", su mejor opción sería obviamente realizar paginación del lado del servidor. Cuando miré las diferentes opciones de tabla/cuadrícula de AngularJs hace un tiempo, había tres favoritos claros:
- ng-cuadrícula
- ng-mesa
- Mesa inteligente
Los tres son buenos, pero se implementan de manera diferente. El que elija probablemente dependerá más de sus preferencias personales que de cualquier otra cosa.
ng-grid es probablemente el más conocido debido a su asociación con angular-ui, pero personalmente prefiero ng-table , me gusta mucho su implementación y cómo se usa, y tienen excelente documentación y ejemplos disponibles y se están mejorando activamente.
Una cuadrícula angular rica en funciones es esta:
trNgGrid
Algunas de sus características:
- Fue construido pensando en la simplicidad.
- Utiliza tablas HTML simples, lo que permite a los navegadores optimizar la representación.
- Totalmente declarativo, preservando la separación de preocupaciones, permitiéndole así describirlo completamente en HTML, sin estropear sus controladores.
- Es totalmente personalizable mediante plantillas y atributos vinculados a datos bidireccionales.
- Fácil de mantener, teniendo el código escrito en TypeScript.
- Tiene una lista muy corta de dependencias: AngularJs y Bootstrap CSS, con temas Bootswatch opcionales.
Disfrutar. Sí, soy el autor. Me harté de todas las cuadrículas angulares que existen.
