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

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.

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
• Bootstrap 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 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:

[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 .

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:

• ng-grid
• ng-table
• Mesa inteligente

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.

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.

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

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

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

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.

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.

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>

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:

• ¿Bootstrap 3 es compatible con las directivas actuales de bootstrap de AngularJS?
• https://github.com/angular-ui/bootstrap/issues/331

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

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.