If you have data to display, do it well with Angular JS’s ng-grid
I’ve used tables quite a bit in the past. Whether it be CMS’s or other data that needs to be presented the table is usually one of the most common ways to do so.
Manipulating the data once it’s displayed can be tough
Thankfully there are some libraries out there that have built in functionality for sorting, searching, grouping data, etc. Ng-grid is one of them. Ng-grid is built as a module for Angular JS which I will get into in another post.
Ng-grid’s only other dependency besides Angular JS is jQuery. So there are a few includes in this example but I think the results are worth it.
I don’t put the example in this post itself but have a link to my ng-grid table example here.
Try dragging a table header into the row above it and see what happens…
My head nearly exploded.. I felt like Dale and Brennan on Stepbrothers when they made their beds into bunk beds. So much room for activities!
Anywho, take a look at that table, it looks so good, don’t mind the buttons. Try clicking the column headers to sort the table data.
This is not a clone of the given homepage examples
It’s similar but I tried to be a bit more helpful by turning it into a likely case with buttons that use the tables hidden ‘id’ variable.
If you look in the main.js file you can see the table data contains an ‘id’ field but is not show in the table. Instead, the id is used for functionality purposes which is most likely the case for ‘id’ columns in tables.
Any questions, please ask away.