Best way to represent a Grid or Table in AngularJS with Bootstrap 3

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  amp  Bootstrap with features like Sorting  Searching  Pagination etc

User · Answer

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

Example:

_x000D_

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

_x000D_

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
_x000D_
<div ng-app="App">_x000D_
  <div ng-controller="ctrl">_x000D_
    _x000D_
    _x000D_
    <table class="table table-bordered">_x000D_
      <thead>_x000D_
        <tr>_x000D_
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>_x000D_
        </tr>_x000D_
      </thead>_x000D_
      <tbody>_x000D_
        <tr>_x000D_
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>_x000D_
        </tr>_x000D_
      </tbody>_x000D_
    </table>_x000D_
    _x000D_
    _x000D_
  </div>_x000D_
</div>

_x000D_

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.

User · Answer

A feature rich Angular grid is this one   trNgGrid  Some of its features    Was built with simplicity in mind  Is using plain HTML tables  allowing the browsers to optimize the rendering  Fully declarative  preserving the separation of concerns  thus allowing you to fully describe it in HTML  without messing up your controllers  Is fully customizable via templates and two-way data bound attributes  Easy to maintain  having the code written in TypeScript  Has a very short list of dependencies  AngularJs and Bootstrap CSS  with optional Bootswatch themes      Enjoy  Yes  I m the author  I got fed up with all the Angular grids out there

User · Answer

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

User · Answer

Adapt-Strap  Here is the fiddle   It is extremely lightweight and has dynamic row heights    lt ad-table-lite table-name  carsForSale                 column-definition  carsTableColumnDefinition                 local-data-source  models carsForSale                 page-sizes   7  20   gt   lt  ad-table-lite gt

User · Answer

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

User · Answer

At the end of the this answer to the question of how to think in Angular if you have a jQuery background  the top post from Josh David Miller summarizes       Don t even use jQuery  Don t even include it  It will hold you back    And when you come to a problem that you think you know how to solve in   jQuery already  before you reach for the    try to think about how to   do it within the confines the AngularJS  If you don t know  ask  19   times out of 20  the best way to do it doesn t need jQuery and to try   to solve it with jQuery results in more work for you    Now if you want a grid with tons of features and options for customization   jQuery DataTables is one of the best  The Angular-only grids I have seen don t come close to what jQuery DataTables can do    However  jQuery DataTables does not integrate well with AngularJS    There have been various efforts  but none offer seamless integration    Perhaps that leaves a person with two options    The first is to go with a pure Angular grid that is not as feature rich as DataTables  I agree with  Moonstom about getting fed up with the other Angular grids out  there  and trNgGrid does look nice   The second option is to say  this is one of those rare 1 out of 20 cases where you should use jQuery and go with the jQuery DataTables plug-in   because the efforts to re-invent the wheel with the pure Angular grids have  yielded a less robust wheel than DataTables   It would be nice if it were otherwise  but I just have not seen  the Angular ecosystem come up with as strong a grid as jQuery DataTables   and it is not as if a good data grid is a nice-to-have in a web app   a good grid is an essential

User · Answer

With  thousands of rows  your best bet would obviously be to do server side paging  When I looked into the different AngularJs table grid options a while back there were three clear favourites    ng-grid ng-table Smart-Table   All three are good  but implemented differently  Which one you pick will probably be more based on personal preference than anything else   ng-grid is probably the most known due to its association with angular-ui  but I personally prefer ng-table  I really like their implementation and how you use it  and they have great documentation and examples available and actively being improved

User · Answer

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    http   www json-generator com  to generate JSON data  Its a pretty cool tool to get your   sample data set to make development faster  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

User · Answer

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

User · Answer

I had the same requirement and solved it using these components    AngularJS 1 0 8 AngularUI Boostrap 0 10 0  Compatible with AngularJS 1 0 8 and Boostrap CSS 3 x  ng-grid 2 0 7  Compatible with AngularJS 1 0 8 Bootstrap CSS 3 0   The table component ng-grid is capable of displaying hundreds of rows in a scrollable grid  If you have to deal with thousands of entries you are better off using ng-grid s paginator  The documentation of ng-grid is excellent and contains many examples  Sorting and searching are supported even in combination with pagination   Here is a screenshot from a current project to give you an impression how it looks like       UPDATE July 2017   After having ng-grid in production for a couple of years  I can still tell that there are no major issues with this component  Yes  plenty of minor bugs  but no show stoppers  at least in my use cases   Having said that  I would strongly advice against using this component if you start a project from the scratch  This component is a good option only if you are bound to AngularJS 1 0 x  If you are free to choose the Angular version  go for a newer component  A list of table components for Angular 4 was compiled by Sam Deering in this blog

User · Answer

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

[angularjs] Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

Examples related to angularjs

Examples related to twitter-bootstrap-3

Examples related to ng-grid

Examples related to angular-ui-grid

Examples related to smart-table