Amazing HTML Tables with Angular JS and ng-grid

Awesome sortable, groupable, searchable table data!

Awesome sortable, groupable, searchable table data!

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.

So check out the demo for the ng-grid table I’ve done and download the source for the ng-grid table if you like what you see.

Any questions, please ask away.

 

Ng-grid Homepage

I’m your typical 24 year old guy who loves technology. I have a Computer Programmer Analyst diploma and am in my 3rd year of a Bachelor of Computer Science degree while working full-time as a programmer. I have experience in multiple programming languages, content management systems, frameworks, and markup languages including but not limited to; Javascript, CSS, HTML, Coldfusion, PHP, C, C++, C#, Java, Pythin, Codeigniter, Laravel, Sharepoint 2010, WordPress, Drupal, and I’m sure there’s a few more I’m forgetting to mention.

Tagged with: , , , , ,
Posted in HTML/CSS, Javascript, Tips, Web Development
6 comments on “Amazing HTML Tables with Angular JS and ng-grid
  1. Junaid says:

    Hi Kyle,

    Its Recently we started using angular js in our project. its really amazing framework, ng-grid is just like “life made easy library”, we have all features in ng-grid but I’m missing just one feature which is “Nested Grids”.

    I know ng-grid has grouping which is good , but it doesn’t work for complex collections. It will be even more appreciative if ng-grid team will add this feature to their list and i tried lot of work around but it didn’t work. and if you have any hack kindly reply with the solution, it will be great help and It will be much appreciated.

    Thanks in advance

    • You’re right it doesn’t work as well with complex collections. An option perhaps would be to have a link in the field where it becomes complex and have it open a model with it’s associated information. Unfortunately the information within the modal would not be able to be searched like the basic table contents.

      • Junaid says:

        Thank you for the reply, First I thought of the same hack as you said Kyle but i want hierarchical grid in which user can expand two rows and compare those two sub grids with in them.
        and i have almost developed my own gird using angular directives.:-)

  2. Thomas says:

    Hi Kyle,

    Many thanks for the example and the descriptions.

    I have 2 questions: 1) which version of ng-grid is included in your ZIP file?

    In your example of the celltemplate, you are using “onclick” instead of “ng-click”.

    If I use the ng-grid version 2.0.7, then I get the following error message:

    Error: [$compile:nodomevents] Interpolations for HTML DOM event attributes are disallowed. Please use the ng- versions (such as ng-click instead of onclick) instead.

    However, changing the onclick to ng-click breaks the example. There are no more alerts poping up.

    Even when going to your original example and changing the “onclick” to an “ng-click”, the example breaks and there are no more alerts poping up.

    So my second questions is: 2) Do you have by any chance an idea why?

    Many thanks in advance for your answers.

    Kind regards,
    Thomas

  3. @vilje_no says:

    Here is the tweet i wrote: The options #AngularJS gives you, secures a positive change in web UX for the future: http://www.jimsider.com/demos/nggrid/ <— the potencial of this!

    And it is true. Thank you for sharing the sourcecode.

1 Pings/Trackbacks for "Amazing HTML Tables with Angular JS and ng-grid"
  1. [...] Sider created a good start for a crud example which you can find here. I’m going to build on this and do the following things to it in my next few [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

%d bloggers like this: