La mejor manera de representar una Cuadrícula o Tabla en AngularJS con Bootstrap 3? [cerrado]

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 tienes que lidiar con miles de entradas, estás mejor usando 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 de 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í, un montón de errores menores, pero no mostrar tapones (al menos en mis casos de uso). Dicho esto, yo recomendaría encarecidamente no usar 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 es libre de elegir la versión Angular, opte por un componente más nuevo. Una lista de componentes de tabla para Angular 4 fue compilada por Sam Deering en este blog.

Con "miles de filas" su mejor apuesta sería obviamente hacer paginación del lado del servidor. Cuando miré en las diferentes opciones de mesa/cuadrícula AngularJS un tiempo atrás había tres claros favoritos:

• ng-grid
• ng-cuadro
• Smart-Table

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 la usa, y tienen una gran documentación y ejemplos disponibles y se están mejorando activamente.

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

TrNgGrid

Algunas de sus características:

• Fue construido con la simplicidad en mente.
• Utiliza tablas HTML simples, lo que permite a los navegadores optimizar el renderizado.
• Totalmente declarativo, preservando la separación de preocupaciones, permitiéndote así describirlo completamente en HTML, sin estropear tus controladores.
• Es totalmente personalizable a través de plantillas y enlaces de datos bidireccionales atributo.
• Fácil de mantener, teniendo el código escrito en TypeScript.
• Tiene una lista muy corta de dependencias: AngularJS y Bootstrap CSS, con temas opcionales de Bootswatch.

Disfruta. Sí, soy el autor. Me harté de todas las rejillas angulares.

Para cualquiera que lea este post: Hágase un favor y manténgase alejado de ng-grid. Está lleno de errores (realmente..casi cada parte de la lib está rota de alguna manera), los desarrolladores han abandonado el soporte de 2.0.x branch para trabajar en 3.0 que está muy lejos de estar listo. Solucionar los problemas por sí mismo no es una tarea fácil, ng-grid code no es pequeño y no es simple, a menos que tenga mucho tiempo y un profundo conocimiento de angular y js en general, va a ser un difícil tarea.

Línea de Fondo: está lleno de errores, y la última versión estable ha sido abandonado.

El github está lleno de PRs, pero están siendo ignorados. Y si reportas un error en el 2.x branch, está cerrado.

Sé que es un proyecto de código abierto y las quejas pueden sonar 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 gran proyecto y el los dolores de cabeza nunca terminan

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

• Hace elementos de tabla para que pueda ser bootswatched y utilizar toda la potencia de bootstrap .css (ng-grid utiliza temas de interfaz de usuario de jQuery).

• 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 un fondo jQuery, el post superior de Josh David Miller resume:

Ni siquiera use jQuery. Ni siquiera lo incluyas. Te detendrá. Y cuando llegas a un problema que crees que sabes cómo resolver en jQuery ya, antes de llegar a la $, tratar de pensar en cómo hazlo dentro de los confines de los AngularJS. ¡Si no lo sabes, pregunta! 19 tiempos de 20, la mejor manera de hacerlo no necesita jQuery y probar para resolverlo con jQuery resultados en más trabajo para usted.

Ahora si desea una cuadrícula con toneladas de características y opciones para la personalización, jQuery DataTables es uno de los mejores. Las rejillas angulares que he visto no te acerques a lo que pueden hacer los DataTables de jQuery.

Sin embargo , jQuery DataTables no se integra bien con AngularJS. (Ha habido varios esfuerzos, pero ninguno ofrece sin problemas integración.)

Tal vez eso deja a una persona con dos opciones.

La primera es ir con una cuadrícula angular pura que no es tan rica en características como las tablas de datos. Estoy de acuerdo con @Moonstom sobre hartarse de las otras rejillas angulares allí, y trNgGrid se ve bien.

La segunda opción es decir: este es uno de esos raros 1 de 20 casos donde debería usar jQuery e ir con el complemento jQuery DataTables, porque los esfuerzos para reinventar la rueda con las rejillas angulares puras tiene produjo una rueda menos robusta que las DataTables.

Sería bueno si fuera de otra manera, pero simplemente no he visto el ecosistema Angular viene con una cuadrícula tan fuerte como las tablas de datos jQuery, y no es como si una buena cuadrícula de datos fuera agradable de tener en una aplicación web: una buena red es esencial.

Puede usar clases 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 /

Actualización:

O siempre puedes 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 ligero 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 mencionó en otras respuestas: Para una tabla con búsqueda, seleccione y paginación "ng-grid" es la mejor opción. Un par de cosas que he encontrado voy a mencionar que podrían ser útiles durante la implementación:

Para establecer env:

1. Http://www.json-generator.com / para generar datos JSON. Es una herramienta bastante genial para obtener su conjunto de datos de muestra para hacer que el desarrollo sea más rápido.

2. Usted puede comprobar este émbolo para su implementación. Tengo modificado para incluir: búsqueda, selección y paginación http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Usted puede comprobar este tutorial sobre Smart table, Da toda la información que necesita: http://lorenzofox3.github.io/smart-table-website /

Entonces la siguiente pregunta es bootstrap 3 : No es exactamente, pero estas plantillas se ve bien. - Solo puedes usar https://github.com/angular-ui/bootstrap/tree/master/template todas las plantillas están bien escribir.

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

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

Tenga en cuenta que con respecto a smart-table debe verificar si está lista para su versión angular

Kendo grid es tan bueno como Wijmo. Sé que Kendo viene con enlaces Angulares para su fuente de datos y creo que Wijmo tiene un plugin Angular. Sin embargo, ninguno es libre.