Melhor maneira de representar uma grade ou tabela no AngularJS com o Bootstrap 3? [fechadas]


284

Estou criando um aplicativo com AngularJS e Bootstrap 3. Quero mostrar uma tabela / grade com milhares de linhas. Qual é o melhor controle disponível para o AngularJS e o Bootstrap com recursos como Classificação, Pesquisa, Paginação etc.


6
Você definitivamente deve ter um olhar para ng-grid aqui: angular-ui.github.io/ng-grid
Mainguy

1
Por que não usar o UI Bootstrap? Foi atualizado recentemente para usar o Bootstrap 3: angular-ui.github.io/bootstrap #
CallumVass

3
Esses milhares de linhas não devem ser todos enviados para o cliente. Portanto, uma solução JavaScript pura não funcionará tão bem. O servidor precisará fazer a paginação e / ou procurar por você.
Flup

Próxima tentativa hora de dar um tiro à mesa ngTasty zizzamia.com/ng-tasty/directive/table é baseado na tabela de bootstrap css :)
zizzamia

3
O angular está se movendo para a " interface do usuário ", que teria os recursos da tabela embutidos. uma boa alternativa para "jquery datatables"
diaryfolio 19/15

Respostas:


223

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

O código JS deles 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 facilmente escolher coisas de lá se quiser alcançar uma área ainda menor.

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

Se você confiar muito na edição em linha e em outros recursos avançados, poderá começar a operar mais rapidamente com o ngTable, por exemplo. No entanto, você pode adicionar esses recursos facilmente no Smart Table.

Não perca a Smart Table !!!

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


12
Apenas encontrei um pequeno bug no Smart Table, o relatei e ele foi corrigido em poucas horas. Estou surpreso que nem todo mundo esteja usando o Smart Table - é muito melhor do que todos os outros.
Ricky Helgesson

1
O Smart Table é definitivamente a melhor escolha para o AngularJS. Há mais recursos no ngGrid, mas é fácil adicionar esses recursos estendendo o Smart Table.
Toilal

1
ng-grid 3.0.7 é agora lançado, e ele funcionou bem para mim (agora chamado ui-grid)
Kimball Robinson

1
O problema é: a paginação na tabela inteligente é realmente feia, sem primeira página, sem última página, a paginação da tabela ng é realmente mais ergonômica. Mesma coisa para a classificação, em smart-mesa nós apenas d'ont sei que nós podemos tipo antes clicado, não é ergonômico em tudo ...
amdev

1
SMART Table para leitura trivial apenas cenários, ui-grade para tudo o resto, ou apenas ui-grid :)
RandomUs1r

116

Eu tinha o mesmo requisito e o resolvi usando estes componentes:

A grade ng do componente da tabela é capaz de exibir centenas de linhas em uma grade rolável. Se você precisar lidar com milhares de entradas, será melhor usar o paginador do ng-grid. A documentação do ng-grid é excelente e contém muitos exemplos. A classificação e a pesquisa são suportadas mesmo em combinação com a paginação.

Aqui está uma captura de tela de um projeto atual para dar uma impressão de como é:

insira a descrição da imagem aqui

[ATUALIZAÇÃO julho de 2017]

Depois de ter o ng-grid em produção por alguns anos, ainda posso dizer que não há grandes problemas com esse componente. Sim, existem muitos bugs menores, mas não há rolhas de show (pelo menos nos meus casos de uso). Dito isto, eu recomendaria fortemente contra o uso desse componente se você iniciar um projeto do zero. Este componente é uma boa opção se você é obrigado a AngularJS 1.0.x . Se você pode 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 .


2
O Wijmo também fornece diretivas angulares, além de recursos como agrupamento, classificação etc. Você também pode verificar a amostra de benchmark para ngGrid e Wijmo Grid com AngularJS: demos.componentone.com/wijmo/Angular/GridBenchmark/…
Ashish

@Lars Behnke Como aplicar o estilo da tabela Bootstrap ao ng-grid? Até onde eu olhei, o ng-grid não usa tags de tabela tr nas quais o css do Bootstrap conta.
Elpddev 19/12/2014

A implementação do componente ng-grid não se baseia no Bootstrap. Então, eu personalizei o ng-grid.less para obter uma aparência o mais próxima possível dos elementos da GUI de inicialização.
Lars Behnke

1
O ng-grid do projeto está sendo reescrito como UI Grid, disponível em ui-grid.info
mostar

2
As estatísticas de 2016 mostram que o plug-in ng-tables ainda está em demanda: GitHub: A. ng-grid: ~ 3500 confirma, ~ 800 problemas. B. mesa inteligente: ~ 300 confirmações, ~ 40 edições. C. ng-table: ~ 500 confirmações, ~ 200 edições. As tendências do Google apenas comprovam a mesma idéia comparando: "tabela inteligente angular", "grade angular da interface do usuário", "tabela angular angular". google.com/trends/…
Anton Lyhin

87

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

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

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


7
Fiquei feliz em ver alguém mencionar ng-table. Eu também prefiro a tabela de ng do que a grade de ng, pois possui um estilo melhor, especialmente no modo de edição.
Rob J

2
Saltando sobre o movimento de ngTable aqui. Eu fui com ng-grid para um projeto e tem sido bastante terrível. Eu fui com o ng-grid puramente por causa de sua associação com o angular-ui e parece ser um pouco mais ativo no github. Eu acho que vou trocar para ngTable. Espero que não seja muito difícil.
Brett

10
Ei, novato com ecossistema angular, eu inicialmente tentei usar o ng-grid devido ao site "melhor", mas rapidamente encontrei problemas de estilo, devido à sua estrutura div profundamente aninhada. Até agora, eu gosto mais de ng-table, porque na verdade usa a table. Posso apenas aplicar classe mesa bootstrap e ele funciona ...
Pierre Henry

1
Observe que o código e a abordagem da tabela inteligente mudaram radicalmente com sua versão v1.0.0 (agosto de 2014), portanto, os comentários feitos antes desta data não são mais relevantes #
laurent

4
O ng-table ficou praticamente inativo, pois é mantido por uma única pessoa na Ucrânia e existem muitos outros problemas por lá. O ng-grid está sendo reescrito como ui-grid para a versão 3.0, mas não está pronto para produção. Portanto, agora geralmente não é um bom momento para escolher ou alternar implementações de tabela angular. A Smart-Table também é mantida por mais ou menos uma única pessoa. Atualmente, estamos usando a tabela de ng, mas planejamos mudar para a interface do usuário à medida que ela amadurece.
Splaktar 4/11/2014

77

Uma grade angular rica em recursos é esta:

trNgGrid

Algumas de suas características:

  • Foi construído com a simplicidade em mente.
  • Está usando tabelas HTML simples, permitindo que os navegadores otimizem a renderização.
  • Totalmente declarativo, preservando a separação de preocupações, permitindo assim descrevê-lo completamente em HTML, sem atrapalhar seus controladores.
  • É totalmente personalizável por meio de modelos e atributos ligados a dados bidirecionais.
  • Fácil de manter, tendo o código escrito em TypeScript.
  • Possui uma lista muito curta de dependências: AngularJs e CSS de Bootstrap, com temas opcionais do Bootswatch.

trNgGrid

Aproveitar. Sim, sou o autor. Fiquei farto de todas as grades angulares por aí.


5
Este precisa de mais reconhecimento. Eu comecei com ngGrid. Eu não conseguia descobrir qual versão eu deveria usar, pois acho que comecei a procurar entre a transição 2.x para 3.x nem fui capaz de fazer a tabela funcionar. Então mudei para ngTablequal tipo de trabalho. Não consegui que a classificação ou a paginação funcionassem corretamente, mas isso deve-se ao modo como estava carregando os dados $http. Então eu vi essa trNgGridmerda sagrada ... tão fácil de pôr em funcionamento. Gostaria de poder escrever mais aqui, mas sugiro que todos experimentem este primeiro!
Ronnie

2
Concordo plenamente com @Ronnie. Deve ser dada mais atenção. Depois de um dia inteiro 'lutando' com ng-grid / ui-grid para fazer algo um pouco mais complexo, experimentei o trNgGrid e trabalhei na primeira tentativa.
Johnny Everson

4
parece bom, mas não pode encontrar itens cruciais como cabeçalho fixo, colunas redimensionáveis, colunas arrastáveis, etc.
iLemming

o bootstrap é uma dependência difícil? Gostaria que minha grade usasse CSS personalizado. possível?
Jasdeep Singh

Isso precisa de mais reconhecimento. Eu estava tão perto de usar o ng-grid até perceber que ele nem sequer está usando tabelas html.
Ryanwinchester

39

Para quem está lendo este post: Faça um favor a si mesmo e fique longe do ng-grid. Está cheio de bugs (realmente ... quase todas as partes da lib estão quebradas de alguma forma), os desenvolvedores abandonaram o suporte ao ramo 2.0.x para trabalhar no 3.0, o que está muito longe de estar pronto. Corrigir os problemas sozinho não é uma tarefa fácil, o código da grade de ng não é pequeno e não é simples, a menos que você tenha muito tempo e tenha 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ê reportar um bug no ramo 2.x, ele será fechado.

Eu sei que é um projeto de código aberto e as queixas podem parecer um pouco fora de lugar, mas da perspectiva de um desenvolvedor que procura uma biblioteca, essa é minha opinião. Passei muitas horas trabalhando com ng-grid em um grande projeto e os headcaches nunca terminam


Você pode nos contar alguns exemplos desses bugs / cenários que causaram dores de cabeça? Estou interessado porque, ao escolher uma das opções mais conhecidas (ng-grid, trNgGrid, ng-table, SmartTable), estou apenas começando com ng-grid e depois de ler sua postagem e ver os 10 upvotes que fiquei assustado!
sports

1
Bem, alguns deles foram consertados, acredito, eles se fundiram como um pedido de 20 pull que ficava lá por meses. Os problemas que tive? muitos deles foram porque eles usam divs em vez de tabela para a composição da grade. Também os eventos que a grade expõe são de bugs, que me causam muitos problemas porque eu estava implementando um comportamento de rolagem infinita, o evento de rolagem disparava aleatoriamente em algumas situações que não deveriam. A largura automática das colunas não funciona.
agusluc

No final, isso dependerá de como você deseja usar a grade e o nível de personalização necessário em seu projeto. Verifique o github, leia os problemas em aberto, crie uma demonstração que cubra todos os seus casos de uso e veja como ele funciona. Mas lembre-se, o 2.x branch dev foi abandonado, portanto você não terá suporte no futuro.
precisa saber é o seguinte

15

O TrNgGrid está funcionando muito bem até agora. Aqui estão as razões pelas quais eu prefiro o ng-grid e movi-me para este componente

  • Ele cria elementos de tabela para poder ser monitorado por botas e usar todo o poder do bootstrap .css (o ng-grid usa os temas da interface do usuário do jQuery).

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

  • A paginação do tamanho do servidor funciona


10

No final desta resposta à pergunta de como pensar em Angular, se você tem um histórico de jQuery, o post principal de Josh David Miller resume:

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

Agora, se você deseja uma grade com muitos recursos e opções para personalização, o jQuery DataTables é um dos melhores. As grades somente angulares que eu vi não se aproximam 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 integração perfeita.)

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

O primeiro é usar uma grade Angular pura que não seja tão rica em recursos quanto as DataTables. Eu concordo com a @ Moonoonom em me cansar das outras grades angulares por aí, e o trNgGrid parece bom.

A segunda opção é dizer: esse é um daqueles casos raros de 1 em 20 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 angulares puras produziram um roda menos robusta que o DataTables.

Seria bom se fosse o contrário, mas simplesmente não vi o ecossistema Angular ter uma grade tão forte quanto o jQuery DataTables, e não é como se uma boa grade de dados fosse interessante em um aplicativo Web : uma boa grade é essencial.


+1 Tão verdadeiro. Uma pena que o DataTables ainda não tenha sido integrado; talvez muito acoplado ao DOM.
CSSian


9

Você pode usar o bootstrap 3 classes e criar 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']
    ];
}
<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>

exemplo ao vivo: http://jsfiddle.net/choroshin/5YDJW/5/

Atualizar:

ou você pode sempre tentar a popular grade de níques , a grade de níques é boa para classificar, pesquisar, agrupar etc., mas ainda não testei em dados de larga escala.


7
Sim, essa é a maneira padrão de criar uma tabela sem classificar, paginar, filtrar, ajax raloading etc. no Angular. Mas com milhares de linhas, isso fará com que qualquer aplicativo seja interrompido.
mainguy 27/01

Isso resultará em uma interface muito lenta.
27715 Boi_echos

8

Adapt-Strap . Aqui está o violino .

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

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

É possível alterar a largura das colunas?
Tomasz Waszczyk

4

Conforme mencionado em outras respostas: Para uma tabela com pesquisa, selecione e paginação " ng-grid " são as melhores opções. Algumas das coisas que me deparei mencionarei que podem ser úteis durante a implementação:

Para definir env:

  1. http://www.json-generator.com/ para gerar dados JSON. É uma ferramenta muito legal para obter o conjunto de dados de amostra para acelerar o desenvolvimento.

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

Você pode verificar este tutorial sobre a tabela inteligente, fornece todas as informações necessárias: http://lorenzofox3.github.io/smart-table-website/

Então a próxima pergunta é bootstrap 3: não é exatamente, mas esse modelo parece bom. - Você pode usar https://github.com/angular-ui/bootstrap/tree/master/template todos os modelos estão bem escritos.

Eu posso continuar sobre como converter o bootstrap 3 em angularjs, mas ele já foi mencionado nos seguintes links:

Observe que, em relação à mesa inteligente, você deve verificar se está pronta para a sua versão angular


3

A grade do Kendo é boa, assim como o Wijmo. Eu sei que o Kendo vem com ligações Angular para sua fonte de dados e acho que o Wijmo possui um plug-in Angular. Nem são livres embora.


3
Eu tive uma experiência terrível com o KendoUI. É tão inchado que funciona como um cachorro e parece ser tão hackeado para os componentes mais complexos que é difícil, senão impossível, obter recursos funcionando que não estão disponíveis "prontos para uso", por assim dizer. Também é muito voltado para trabalhar com os componentes do servidor e muito pouco documentado para casos extremos. Eu ficaria longe deles!
Precastic
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.