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

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.

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.

Eu tinha o mesmo requisito e o resolvi usando estes 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 AngularJS 1.0.8
• Bootstrap CSS 3.0

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 é:

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

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:

• grade de ng
• tabela de ng
• Smart-Table

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.

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.

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

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

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

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.

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.

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>

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:

• O Bootstrap 3 é compatível com as diretrizes atuais do AngularJS bootstrap?
• https://github.com/angular-ui/bootstrap/issues/331

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

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.