Best options for an AngularJS Tree Grid

Dylan Watson picture Dylan Watson · Dec 2, 2014 · Viewed 37.6k times · Source

For a while now, I've been looking for a Tree Grid that works nicely with AngularJS and haven't had a lot of luck.

My requirements are:

  1. Easy to use
  2. Looks good
  3. Supports drag and drop
  4. Can handle large amount of data 10000+ (i.e pagination/lazy scroll of 10,000+ rows)
  5. Can show hierarchical data in a table (i.e columns/sorting)
  6. Free/Cheap

Projects that come close:

  • Sencha Tree Grid
    • Doesn't appear to play nicely with AngularJS
    • Apparently a Buffered-Tree module can help handle 1000s or rows
  • angular-ui-tree
    • Close but doesn't support table functions like columns, out of the box
    • Doesn't handle large data, but Michael Bromley's dirPaginate directive can fix this
  • tree-grid-directive
    • Looks good (Fits with bootstrap)
    • Has columns
    • But doesn't easily allow for pagination/lazy loading

Ok... so given that other people must have solved this before, my question is:

What is the best way to approach this?

Is there a project out there already that covers all the bases? Or perhaps there is a simple way to adapt one of these to be a lazily-loaded tree grid...

Answer

Dylan Watson picture Dylan Watson · Jan 14, 2015

IgniteUI Tree Grid (not to be confused with the ugly Hierarchical Grid)

Whilst not perfect, this seems like a reasonable option.

Pros

  • Looks nice enough
  • Has a few plugins for sorting, filtering, paging, pinning etc.
  • Lazy loading of children can be integrated by listening to expand events (and possibly the InfragisticsLoader)

Cons

  • No out-of-the-box AngularJS integration
  • No "Infinite Scroll" out-of-the-box

Its also pretty simple to use:

$("#treegrid").igTreeGrid({
    width: "100%",
    dataSource: data,
    primaryKey: "employeeID",
    columns: [
        { headerText: "Employee ID", key: "employeeID", dataType: "number" },
        { headerText: "Name", key: "name", dataType: "string" }
    ]
});

I have created a sample jsFiddle here: http://jsfiddle.net/immersion/qggbs0s6/