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

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.

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.

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.

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.