¿La mejor manera de representar una cuadrícula o tabla en AngularJS con Bootstrap 3? [cerrado]


284

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 & Bootstrap con características como Ordenar, Buscar, Paginar, etc.


66
Usted definitivamente debe tener una mirada en ng de la red aquí: angular-ui.github.io/ng-grid
Mainguy

1
¿Por qué no usar UI Bootstrap? Que recientemente se ha actualizado para utilizar Bootstrap 3: angular-ui.github.io/bootstrap
CallumVass

3
Esos miles de filas no deberían enviarse todas al cliente. Por lo tanto, una solución de JavaScript pura no funcionará tan bien. El servidor deberá hacer la paginación y / o buscarlo.
flup

La próxima vez intente darle una oportunidad a ngTasty table zizzamia.com/ng-tasty/directive/table se basa en bootstrap css table :)
zizzamia

3
angular se está moviendo a " ui-grid " que tendría las características de la tabla incorporadas. una buena alternativa a las "tablas de datos jquery"
diaryfolio

Respuestas:


223

Después de probar ngGrid, ngTable, trNgGrid y Smart Table , he llegado a la conclusión de que Smart Table es, con mucho, la mejor implementación de AngularJS-wise y Bootstrap-wise. Está construido exactamente de la misma manera que construirías tu propia mesa ingenua usando angular 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 extenderse. El hecho de que usen las etiquetas html regulares para las tablas y el ng-repeat estándar para las filas y el bootstrap estándar para el formato hace que este sea mi claro ganador.

Su código JS depende de angular y su html puede depender de bootstrap si lo desea. El código JS es de 4 kb en total e incluso puede seleccionar fácilmente cosas de allí si desea alcanzar una huella aún más pequeña.

Donde las otras redes le darán claustrofobia en diferentes áreas, Smart Table simplemente se siente abierto y al grano.

Si confía en gran medida en la edición en línea y otras características avanzadas, puede comenzar a trabajar más rápido con ngTable, por ejemplo. Sin embargo, puede agregar tales funciones fácilmente en Smart Table.

¡No te pierdas Smart Table !

No tengo ninguna relación con Smart Table, excepto por usarlo yo mismo.


12
Acabo de encontrar un pequeño error en Smart Table, lo informé y se solucionó en unas horas. Estoy sorprendido de que no todos estén usando Smart Table, es mucho mejor que todos los demás.
Ricky Helgesson

1
Smart Table es definitivamente la mejor opción para AngularJS. Hay más funciones en ngGrid, pero es fácil agregar esas funciones extendiendo Smart Table.
Toilal

1
ng-grid 3.0.7 ahora se lanzó, y funcionó bien para mí (ahora llamado ui-grid)
Kimball Robinson

1
El problema es: la paginación en la tabla inteligente es realmente fea, no hay primera página, no hay última página, la paginación ng-table es realmente más ergonómica. Lo mismo para la clasificación, en la mesa inteligente, simplemente no sabemos que podemos ordenar antes de hacer clic, no es ergonómico en absoluto ...
amdev

1
Tabla inteligente para escenarios triviales de solo lectura, ui-grid para todo lo demás, o solo ui-grid :)
RandomUs1r

116

Tenía el mismo requisito y lo resolví usando estos componentes:

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 use 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 impresión de cómo se ve:

ingrese la descripción de la imagen aquí

[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 se muestran obstáculos (al menos en mis casos de uso). Dicho esto, recomendaría encarecidamente no usar este componente si comienzas un proyecto desde cero. Este componente es una buena opción si usted está obligado a AngularJS 1.0.x . Si es libre de elegir la versión angular, busque un componente más nuevo. Sam Deering compiló una lista de componentes de la tabla para Angular 4 en este blog .


2
Wijmo también proporciona directivas angulares junto con características como agrupación, clasificación, etc. También puede consultar la muestra de referencia para ngGrid y Wijmo Grid con AngularJS: demos.componentone.com/wijmo/Angular/GridBenchmark/…
Ashish

@Lars Behnke ¿Cómo aplicar el estilo de tabla Bootstrap a ng-grid? Por lo que he visto, ng-grid no usa etiquetas de tabla tr con las que cuenta Bootstrap css.
elpddev

La implementación del componente ng-grid no se basa en Bootstrap. Así que personalicé ng-grid.less para obtener una apariencia lo más cercana posible a los elementos de la GUI de bootstrap.
Lars Behnke

1
El proyecto ng-grid se ha reescrito como UI Grid, que está disponible en ui-grid.info
mostar

2
Las estadísticas de 2016 muestran que el complemento ng-tables todavía está en demanda: GitHub: A. ng-grid: ~ 3500 commits, ~ 800 cuestiones. B. tabla inteligente: ~ 300 commits, ~ 40 números. C. ng-table: ~ 500 confirmaciones, ~ 200 números. Las tendencias de Google simplemente prueban la misma idea al comparar: "tabla inteligente angular", "cuadrícula angular ui", "tabla angular ng". google.com/trends/…
Anton Lyhin

87

Con "miles de filas" su mejor apuesta obviamente sería hacer paginación del lado del servidor. Cuando examiné las diferentes opciones de tabla / cuadrícula de AngularJs hace un tiempo, había tres favoritos claros:

Los tres son buenos, pero implementados de manera diferente. El que elija probablemente se basará más en las preferencias personales que en cualquier otra cosa.

ng-grid es probablemente el más conocido debido a su asociación con angular-ui, pero personalmente prefiero ng-table , realmente me gusta su implementación y cómo lo usas, y tienen una excelente documentación y ejemplos disponibles y mejorados activamente.


77
Me alegré de ver a alguien mencionar ng-table. Yo también prefiero ng-table sobre ng-grid ya que tiene un mejor estilo, especialmente en el modo de edición.
Rob J

2
Saltando en el carro ngTable aquí. Fui con ng-grid para un proyecto y ha sido bastante terrible. Fui con ng-grid simplemente por su asociación con angular-ui y parece ser un poco más activo en github. Creo que voy a cambiar a ngTable. Esperemos que no sea demasiado difícil.
Brett

10
Hola, novato con ecosistema angular, inicialmente intenté usar ng-grid debido a un sitio web "mejor", pero rápidamente tuve problemas de estilo, debido a su estructura div profundamente anidada. Hasta ahora me gusta más ng-table, porque en realidad usa a table. Solo puedo aplicar la clase de tabla bootstrap y funciona ...
Pierre Henry

1
Anote el código y el enfoque de Smart-mesa ha cambiado radicalmente con su versión v1.0.0 (agosto de 2014) por lo que los comentarios realizados antes de esta fecha no son relevantes más
Laurent

44
ng-table se ha quedado inactivo en su mayoría, ya que lo mantiene una sola persona en Ucrania y ha habido muchos otros problemas allí. ng-grid se está reescribiendo como ui-grid para la versión 3.0 pero no está listo para la producción. Por lo tanto, ahora generalmente no es un buen momento para elegir o cambiar implementaciones de tablas angulares. Smart-Table también es mantenido por más o menos una sola persona. Actualmente estamos usando ng-table, pero planeamos cambiar a ui-grid a medida que madure.
Splaktar

77

Una cuadrícula angular rica en características es esta:

trNgGrid

Algunas de sus características:

  • Fue construido con la simplicidad en mente.
  • Está utilizando tablas HTML simples, lo que permite a los navegadores optimizar la representación.
  • Totalmente declarativo, preservando la separación de preocupaciones, lo que le permite describirlo completamente en HTML, sin desordenar sus controladores.
  • Es totalmente personalizable a través de plantillas y atributos de datos bidireccionales.
  • Fácil de mantener, con el código escrito en TypeScript.
  • Tiene una lista muy corta de dependencias: AngularJs y Bootstrap CSS, con temas opcionales de Bootswatch.

trNgGrid

Disfrutar. Si, soy el autor. Me harté de todas las cuadrículas angulares que hay.


55
Este necesita un poco más de reconocimiento. Empecé con ngGrid. No pude averiguar qué versión se suponía que debía usar, ya que creo que comencé a buscar entre su transición de 2.xa 3.x ni pude hacer que la mesa funcionara. Luego me mudé a ngTablequé tipo de trabajo. No pude hacer que la clasificación o la paginación funcionaran correctamente, pero eso se debe a la forma en que cargaba los datos $http. Entonces vi esto trNgGridy una mierda sagrada ... tan fácil de poner en marcha. Ojalá pudiera escribir más aquí, ¡pero sugiero que todos lo prueben primero!
Ronnie

2
Estoy completamente de acuerdo con @Ronnie. Esto debería ser la atención más dada. Después de todo un día 'peleando' con ng-grid / ui-grid para hacer algo un poco más complejo, probé trNgGrid y trabajé en el primer intento.
Johnny Everson

44
se ve bien, aunque no puede encontrar elementos cruciales como encabezado fijo, columnas redimensionables, columnas arrastrables, etc.
iLemming

¿bootstrap es una dependencia difícil? Me gustaría que mi grilla use CSS personalizado. ¿posible?
Jasdeep Singh

Esto necesita más reconocimiento. Estuve tan cerca de usar ng-grid hasta que me di cuenta de que ni siquiera está usando tablas html.
ryanwinchester

39

Para cualquiera que lea esta publicación: Hazte un favor y mantente alejado de ng-grid. Está lleno de errores (realmente ... casi todas las partes de la biblioteca están rotas de alguna manera), los desarrolladores han abandonado el soporte de la rama 2.0.x para trabajar en 3.0, que está muy lejos de estar listo. Solucionar los problemas usted mismo no es una tarea fácil, el código ng-grid no es pequeño y no es simple, a menos que tenga mucho tiempo y un conocimiento profundo de angular y js en general, será una tarea difícil.

En pocas palabras: está lleno de errores, y la última versión estable ha sido abandonada.

El github está lleno de relaciones públicas, pero se están ignorando. Y si informa un error en la rama 2.x, se cerrará.

Sé que es un proyecto de código abierto y las quejas pueden parecer un poco fuera de lugar, pero desde la perspectiva de un desarrollador que busca una biblioteca, esa es mi opinión. Pasé muchas horas trabajando con ng-grid en un proyecto grande y los headcaches nunca terminan


¿Puede contarnos un par de ejemplos de estos errores / escenarios que le causaron dolores de cabeza? Estoy interesado porque al elegir una de las opciones bien conocidas (ng-grid, trNgGrid, ng-table, SmartTable) estoy empezando con ng-grid y después de leer su publicación y ver los 10 votos a favor, ¡me asusté!
deportes

1
Bueno, creo que algunos de ellos se arreglaron, se fusionaron como 20 solicitudes de extracción que estuvieron allí durante meses. Los problemas que tuve? muchos de ellos se debieron a que usan divs en lugar de la tabla para el maquillaje de la cuadrícula. Además, los eventos que expone la cuadrícula son defectuosos, eso me da muchos problemas porque estaba implementando un comportamiento de desplazamiento infinito, el evento de desplazamiento se disparaba al azar en algunas situaciones que no deberían. El ancho automático de las columnas no funciona en absoluto.
agusluc

Al final, dependerá de cómo desee utilizar la cuadrícula y el nivel de personalización requerido en su proyecto. Verifique el github, lea los problemas abiertos, cree una demostración que cubra todos sus casos de uso y vea cómo funciona. Pero recuerde, 2.x branch dev ha sido abandonado, por lo que tendrá cero soporte en el futuro.
agusluc

15

TrNgGrid está funcionando muy bien hasta ahora. Estas son las razones por las que lo prefiero a ng-grid y me mudé a este componente

  • Crea elementos de tabla para que se pueda ver con arranque y usar todo el poder de bootstrap .css (ng-grid usa temas de jQuery UI).

  • Opciones de cuadrícula simples y bien documentadas.

  • La paginación del tamaño del servidor funciona


10

Al final de esta respuesta a la pregunta de cómo pensar en Angular si tienes antecedentes de jQuery, la publicación principal de Josh David Miller resume:

Ni siquiera uses jQuery. Ni siquiera lo incluyas. Te detendrá. Y cuando se encuentre con un problema que cree que ya sabe cómo resolver en jQuery, antes de alcanzar el $, intente pensar en cómo hacerlo dentro de los límites del AngularJS. Si no lo sabes, ¡pregunta! 19 de cada 20 veces, la mejor manera de hacerlo no necesita jQuery y tratar de resolverlo con jQuery resulta en más trabajo para usted.

Ahora, si desea una cuadrícula con toneladas de características y opciones de personalización, jQuery DataTables es una de las mejores. Las cuadrículas de solo angular que he visto no se acercan a lo que jQuery DataTables puede hacer.

Sin embargo , jQuery DataTables no se integra bien con AngularJS. (Se han realizado varios esfuerzos, pero ninguno ofrece una integración perfecta).

Quizás eso deja a una persona con dos opciones.

El primero es ir con una cuadrícula angular pura que no tenga tantas funciones como DataTables. Estoy de acuerdo con @Moonstom acerca de estar harto de las otras cuadrículas angulares, y trNgGrid se ve bien.

La segunda opción es decir: este es uno de esos raros 1 de cada 20 casos en los que debe usar jQuery e ir con el complemento jQuery DataTables, porque los esfuerzos para reinventar la rueda con las rejillas angulares puras han producido un rueda menos robusta que DataTables.

Sería bueno si fuera de otro modo, pero simplemente no he visto que el ecosistema Angular tenga una cuadrícula tan fuerte como jQuery DataTables, y no es como si una buena cuadrícula de datos fuera agradable en una aplicación web : una buena cuadrícula es esencial.


+1 Tan cierto. Una pena que DataTables aún no se haya integrado; tal vez demasiado estrechamente acoplado al DOM.
CSSian


9

Puede usar las clases de bootstrap 3 y construir una tabla usando la directiva ng-repeat

Ejemplo:

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

ejemplo en vivo: http://jsfiddle.net/choroshin/5YDJW/5/

Actualizar:

o siempre puede probar el popular ng-grid , ng-grid es bueno para ordenar, buscar, agrupar, etc., pero aún no lo he probado en datos a gran escala.


77
Sí, esa es la forma estándar de crear una tabla sin ordenar, paginar, filtrar, cargar ajax, etc. en Angular. Pero con miles de filas, esto detendrá cualquier aplicación.
mainguy

Esto dará como resultado una IU muy lenta.
boi_echos

8

Adapt-Strap . Aquí está el violín .

Es extremadamente liviano y tiene alturas de fila dinámicas.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

¿Es posible cambiar el ancho de las columnas?
Tomasz Waszczyk

4

Como se menciona en otras respuestas: para una tabla con búsqueda, seleccionar y paginar " ng-grid " es la mejor opción. Mencionaré un par de cosas que mencionaré que podrían ser útiles durante la implementación:

Para configurar env:

  1. http://www.json-generator.com/ para generar datos JSON. Es una herramienta genial para obtener su conjunto de datos de muestra para acelerar el desarrollo.

  2. Puede consultar este plunker para su implementación. He modificado para incluir: búsqueda, selección y paginación http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Puede consultar este tutorial sobre Smart table, le brinda toda la información que necesita: http://lorenzofox3.github.io/smart-table-website/

Entonces la siguiente pregunta es bootstrap 3: no es exactamente, pero esta plantilla se ve bien. - Puede usar https://github.com/angular-ui/bootstrap/tree/master/template, todas las plantillas están bien escritas.

Puedo continuar sobre cómo convertir bootstrap 3 a angularjs pero ya se menciona en los siguientes enlaces:

tenga en cuenta que con respecto a la mesa inteligente, debe verificar si está lista para su versión angular


3

Kendo grid es bueno, así como Wijmo. Sé que Kendo viene con enlaces angulares para su fuente de datos y creo que Wijmo tiene un complemento angular. Sin embargo, ninguno de los dos es gratis.


3
He tenido una experiencia terrible con KendoUI. Está tan hinchado que funciona como un perro y parece estar tan pirateado por los componentes más complejos que es difícil, si no imposible, que las funciones funcionen y que no estén disponibles "por defecto". También está muy orientado a trabajar con los componentes de su servidor y está muy mal documentado para casos extremos. ¡Me quedaría lejos de ellos!
Precastic
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.