Best way to represent a Grid or Table in AngularJS

Question

I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.

Answer 1

For anyone reading this post: Do yourself a favor and stay away of ng-grid. Is full of bugs (really..almost every part of the lib is broken somehow), the devs has abandoned the support of 2.0.x branch in order to work in 3.0 which is very far of being ready. Fixing the problems by yourself is not an easy task, ng-grid code is not small and is not simple, unless you have a lot of time and a deep knowledge of angular and js in general, its going to be a hard task.

Bottom Line: is full of bugs, and the last stable version has been abandoned.

The github is full of PRs, but they are being ignored. And if you report a bug in the 2.x branch, it's get closed.

I know is an open source proyect and the complains may sound a little bit out of place, but from the perspective of a developer looking for a library, that's my opinion. I spent many hours working with ng-grid in a large proyect and the headcaches are never ending

Answer 2

TrNgGrid is working great so far. Here are the reasons I prefer it to ng-grid and moved to this component

• It makes table elements so it can be bootswatched and use all the power of bootstrap .css (ng-grid uses jQuery UI themes).

• Simple, well documented grid options.

• Server size paging works

Answer 3

Kendo grid is good as well as Wijmo. I know Kendo comes with Angular bindings for their datasource and I think Wijmo has an Angular plugin. Neither are free though.

Answer 4

You can use bootstrap 3 classes and build a table using the ng-repeat directive

Example:

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>

live example: http://jsfiddle.net/choroshin/5YDJW/5/

Update:

or you can always try the popular ng-grid , ng-grid is good for sorting, searching, grouping etc, but I haven't tested it yet on a large scale data.

Answer 5

After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.

Their JS code depends on angular and your html can depend on bootstrap if you want to. The JS code is 4 kb in total and you can even easily pick stuff out of there if you want to reach an even smaller footprint.

Where the other grids will give you claustrophobia in different areas, Smart Table just feels open and to the point.

If you rely heavily on inline editing and other advanced features, you might get up and running quicker with ngTable for instance. However, you are free to add such features quite easily in Smart Table.

Don't miss Smart Table!!!

I have no relation to Smart Table, except from using it myself.

Answer 6

As mentioned in other answers: For a table with search, select and pagination "ng-grid" is the best options. A couple of things I have come across I will mention which might be useful while implementing:

To set env:

1. http://www.json-generator.com/ to generate JSON data. Its a pretty cool tool to get your sample data set to make development faster.

2. You can check this plunker for your implementation. I have modified to include: search, select and pagination http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

You can check this tutorial about Smart table, Gives all the info you need: http://lorenzofox3.github.io/smart-table-website/

Then the next question is bootstrap 3 : Its not exactly but this templates looks good. - You can just use https://github.com/angular-ui/bootstrap/tree/master/template all the templates are well written.

I can go on about how to convert bootstrap 3 to angularjs but its already mentioned in following links:

• Bootstrap 3 compatible with current AngularJS bootstrap directives?
• https://github.com/angular-ui/bootstrap/issues/331

please note that regarding smart-table you have to check if it ready for your angular version