Brian Emil Hartz

let me = enjoy ( pondering ( javascript ( reactjs ) ) )

Tablefy with ngTable

I'm working on creating an interactive table that displays thousands of records that needs to be capable of both filtering by specific parameters and sortable. So here is a short and sweet chat about my adventure.

AngularJS offers great modularity with directives, so I knew there had to be a powerful and customizable table directive out there somewhere.

I found three amazing angular 'table' directives:

ng-grid, now ui-grid

ng-grid ng-grid

Note ng-grid is now ui-grid and I would definitely reevalute using it!*

I first looked at ng-grid since it was backed by the angular-ui team. It seems to have slowed down its development sadly and I also needed strong pagination and ‘items per page’. View example plnkr.

Another thing that was interesting about ng-grid is that it doesn't use the base html tags for a table. No table, tbody, tr, or td's; everything is constructed with div's. Which means css frameworks like bootstrap won't play nice right out of the box.


trNgGrid trNgGrid

trNgGrid didn’t quite have the backing and support I was looking for either, and its current release didn’t have the strong stable features of its next release. The creator also forgot to include a way to quickly demo and explore the directive using plnkr/jsfiddle or any of those.

<table tr-ng-grid="" items="myItems"></table>

It is amazing self contained meaning you only need the html line above to create a dynamic table.


ngTable ngTable

I decided on ngTable. This directive has great pagination, customization, and strong filter/sorting capabilities. I've also been able to find a lot of answers and support for questions online. View example plnkr.

Final thoughts

As always I am having a great time with how declarative AngularJS is and the fun that is directives. I highly recommend ngTable for all your data table needs. Let me know if you have any questions or need help with ngTable.