Melhor maneira de representar uma grade ou tabela no AngularJS com Bootstrap 3?

Eu estou criando um aplicativo com AngularJS e Bootstrap 3. Eu quero mostrar uma tabela / grade com milhares de linhas. Qual é o melhor controle disponível para AngularJS & Bootstrap com resources como sorting, pesquisa, paginação etc.

Depois de testar o ngGrid, o ngTable, o trNgGrid e o Smart Table , cheguei à conclusão de que o Smart Table é de longe a melhor implementação do AngularJS e do Bootstrap. Ele é construído exatamente da mesma maneira que você criaria sua própria tabela ingênua usando o padrão angular. Além disso, eles adicionaram algumas diretrizes que ajudam você a classificar, filtrar etc. Sua abordagem também facilita bastante a sua extensão. O fato de eles usarem as tags html regulares para tabelas e o padrão ng-repeat para as linhas e bootstrap padrão para formatação torna isso meu vencedor claro.

Seu código JS depende do angular e seu html pode depender do bootstrap se você quiser. O código JS é de 4 kb no total e você pode até escolher coisas facilmente de lá, se você quiser alcançar um tamanho ainda menor.

Onde as outras grades lhe dão claustrofobia em diferentes áreas, o Smart Table parece aberto e direto ao ponto.

Se você depender muito da edição inline e de outros resources avançados, poderá começar a trabalhar mais rapidamente com o ngTable, por exemplo. No entanto, você é livre para adicionar esses resources facilmente no Smart Table.

Não perca a Smart Table !!!

Eu não tenho relação com o Smart Table, exceto por usá-lo sozinho.

Eu tive o mesmo requisito e resolvi usando esses componentes:

  • AngularJS 1.0.8
  • AngularUI Boostrap 0.10.0 : Compatível com AngularJS 1.0.8 e Boostrap CSS 3.x.
  • ng-grid 2.0.7 : Compatível com o AngularJS 1.0.8
  • Bootstrap CSS 3.0

O componente de tabela ng-grid é capaz de exibir centenas de linhas em uma grade rolável. Se você tem que lidar com milhares de inputs, é melhor usar o paginator do ng-grid. A documentação do ng-grid é excelente e contém muitos exemplos. A sorting e pesquisa são suportadas mesmo em combinação com a paginação.

Aqui está uma captura de canvas de um projeto atual para lhe dar uma impressão de como ela se parece:

insira a descrição da imagem aqui

[ATUALIZAÇÃO julho de 2017]

Depois de ter ng-grid em produção por um par de anos, eu ainda posso dizer que não há grandes problemas com este componente. Sim, muitos pequenos bugs, mas não show stoppers (pelo menos nos meus casos de uso). Tendo dito isso, eu aconselharia fortemente contra o uso deste componente se você iniciar um projeto a partir do zero. Este componente é uma boa opção apenas se você estiver vinculado ao AngularJS 1.0.x. Se você é livre para escolher a versão Angular, escolha um componente mais novo. Uma lista de componentes de tabela para o Angular 4 foi compilada por Sam Deering neste blog .

Com “milhares de linhas”, sua melhor aposta seria, obviamente, fazer paginação no servidor. Quando eu olhei para as diferentes opções de tabela / grade AngularJs há um tempo atrás, havia três favoritos claros:

  • ng-grid
  • ng-table
  • Smart Table

Todos os três são bons, mas implementados de forma diferente. Qual deles você escolhe provavelmente será mais baseado na preferência pessoal do que qualquer outra coisa.

O ng-grid é provavelmente o mais conhecido devido a sua associação com o angular-ui, mas eu pessoalmente prefiro ng-table , eu gosto muito da implementação deles e de como você os usa, e eles têm uma ótima documentação e exemplos disponíveis e sendo ativamente melhorados.

Uma grade angular rica em resources é esta:

trNgGrid

Algumas de suas características:

  • Foi construído com simplicidade em mente.
  • Está usando tabelas HTML simples, permitindo que os navegadores otimizem a renderização.
  • Totalmente declarativo, preservando a separação de interesses, permitindo que você o descreva totalmente em HTML, sem atrapalhar seus controladores.
  • É totalmente personalizável por meio de modelos e atributos ligados a dados bidirecionais.
  • Fácil de manter, com o código escrito em TypeScript.
  • Tem uma lista muito pequena de dependencies: AngularJs e Bootstrap CSS, com temas opcionais do Bootswatch.

trNgGrid

Apreciar. Sim eu sou o autor. Eu fiquei farto de todas as grades angulares lá fora.

Para quem estiver lendo este post: Faça um favor a si mesmo e fique longe do ng-grid. Está cheio de bugs (na verdade … quase todas as partes da biblioteca estão quebradas de alguma forma), os desenvolvedores abandonaram o suporte da ramificação 2.0.x para trabalhar na versão 3.0, que está muito longe de estar pronta. Consertar os problemas sozinho não é uma tarefa fácil, o código ng-grid não é pequeno e não é simples, a menos que você tenha muito tempo e um profundo conhecimento de angular e js em geral, será uma tarefa difícil.

Bottom Line: está cheio de bugs, e a última versão estável foi abandonada.

O github está cheio de PRs, mas eles estão sendo ignorados. E se você relatar um bug na ramificação 2.x, ele será fechado.

Eu sei que é um projeto de código aberto e as reclamações podem soar um pouco fora de lugar, mas da perspectiva de um desenvolvedor procurando por uma biblioteca, essa é minha opinião. Passei muitas horas trabalhando com ng-grid em um grande projeto e as headcaches nunca terminam

O TrNgGrid está funcionando muito bem até agora. Aqui estão as razões que eu prefiro para ng-grade e movido para este componente

  • Ele cria elementos de tabela para que ele possa ser inicializado e use todo o poder do bootstrap .css (ng-grid usa temas da interface do usuário do jQuery).

  • Opções de grade simples e bem documentadas.

  • Trabalhos de paginação de tamanho de servidor

No final desta resposta à questão de como pensar em Angular, se você tem um fundo jQuery, o principal post de Josh David Miller resume:

Nem use jQuery. Nem inclua isso. Ele vai te segurar de volta. E quando você chegar a um problema que você acha que já sabe como resolver em jQuery, antes de pegar o $ , tente pensar em como fazê-lo dentro dos limites do AngularJS. Se você não sabe, pergunte! 19 vezes em 20, a melhor maneira de fazer isso não precisa do jQuery e tentar resolvê-lo com o jQuery resulta em mais trabalho para você.

Agora, se você quiser uma grade com vários resources e opções para personalização, o jQuery DataTables é um dos melhores. As grades Angular somente que eu vi não chegam perto do que o jQuery DataTables pode fazer.

No entanto , o jQuery DataTables não se integra bem ao AngularJS. (Houve vários esforços, mas nenhum oferece continuous integration).

Talvez isso deixe uma pessoa com duas opções.

A primeira é usar uma grade Angular pura que não seja tão rica quanto DataTables. Eu concordo com o @Moonstom sobre se cansar das outras grades Angular, e o trNgGrid parece legal.

A segunda opção é dizer: este é um dos raros casos em que você deve usar o jQuery e usar o plug-in jQuery DataTables, porque os esforços para reinventar a roda com as grades Angular puras renderam um roda menos robusta do que DataTables.

Seria bom se fosse de outra forma, mas eu simplesmente não vi o ecossistema Angular criar uma grade tão forte quanto o jQuery DataTables, e não é como se uma boa grade de dados fosse uma boa para ter em um aplicativo da web : uma boa grade é essencial.

Você pode usar classs bootstrap 3 e construir uma tabela usando a diretiva ng-repeat

Exemplo:

 angular.module('App', []); function ctrl($scope) { $scope.items = [ ['A', 'B', 'C'], ['item1', 'item2', 'item3'], ['item4', 'item5', 'item6'] ]; } 
   
{{itemA}}
{{itemB}}
{{itemC}}

Adapt-Strap . Aqui está o violino .

É extremamente leve e tem alturas dinâmicas de linha.

   

Como mencionado em outras respostas: Para uma tabela com pesquisa, selecione e paginação ” ng-grid ” é as melhores opções. Algumas coisas que encontrei mencionarei quais podem ser úteis ao implementar:

Para definir env:

  1. http://www.json-generator.com/ para gerar dados JSON. É uma ferramenta muito legal para obter seu dataset de amostra para tornar o desenvolvimento mais rápido.

  2. Você pode verificar este plunker para sua implementação. Eu modifiquei para include: pesquisa, seleção e paginação http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Você pode verificar este tutorial sobre a tabela Smart, Dá toda a informação que você precisa: http://lorenzofox3.github.io/smart-table-website/

Então a próxima pergunta é o bootstrap 3 : Não é exatamente, mas esses modelos parecem bons. – Você pode usar apenas https://github.com/angular-ui/bootstrap/tree/master/template todos os modelos estão bem escritos.

Eu posso ir sobre como converter bootstrap 3 para angularjs, mas já mencionado nos seguintes links:

por favor, note que em relação a mesa inteligente você tem que verificar se está pronto para a sua versão angular

A grade de Kendo é boa, assim como o Wijmo. Eu sei que o Kendo vem com ligações angulares para sua fonte de dados e eu acho que o Wijmo tem um plugin Angular. Nem estão livres embora.