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