Visualising a data tree

I’m attempting to visualise my database entries in a tree-like format like a file explorer. I could probably design it from scratch but this feels like the kind of process that would be much much easier and faster to implement with a pre-designed package.

I found https://www.jstree.com/ which does look perfect but it doesn’t say it’s accessable with meteor so I assume straight out of the box that it’s not?

Although I did find a couple of meteor packages that appear to convert jstree into something that works with meteor (sujith3g:jstree and jss:jstree) but I’m not sure how to tell which is the better version of the two because I can find so little documentation on either.

If you think I’m going down the wrong rabbit hole for this problem please let me know. I’m not devoted to jstree particularly, I’m just looking for a package to do the job.

I like writing my file trees in CSS directly in Blaze as it automatically gives me the reactivity

  • Generate the tree in a template helper
  • Recursive template to draw tree
  • Hidden checkbox used to save the node open / close state
  • JQuery and meteor events to manage the hide / show of the tree branch

If you use jstree instead you can install it from npm. You will need to use an autorun function to reload the data when it’s changed

To piggyback on @diegooliver’s comment, after quite a bit of research, I just didn’t find anything that worked well and looked good out-of-the-box. I also toyed with jstree, and a slew of jquery plugins, but none really fit the bill.

I ended up using a recursive template as well, with nested uls and lis.

@diegoolivier @vigorwebsolutions

hmm there is a market for a new package to be created here I think!

And I love that you both said “recursive template” as if it was nothing, can you give me some tips? I’m still trying to mentally work my way around the logic.

Check out this Meteorpedia article.

1 Like