Use hierarchical tables in SlickGrid

Question

We have a request from our designers to build tables something like this, with rows that expand to show essentially another sub-table underneath. In KendoUI documentation, this is called "Hierarchy."

We use SlickGrid v2.3 with a few additional plugins. We currently have tables with a similar row expand/collapse like this: https://mleibman.github.io/SlickGrid/examples/example5-collapsing.html . That does not allow for a completely different set of columns in the sub-table.

The question is, can this be done in SlickGrid or not?

Answer 1

At the moment, it can't be done. In order to achieve its speed, Slickgrid enforces a fixed row height and a single scrolling canvas. It's just a different approach than used by HTML display grids.

You could put together a workaround using mutiple slickgrids or an embedded slickgrid in a group row, I suppose, but it would be messy. One thing I have done is develop a SlickCombo, which is essentially a grid presented as a multi-column dropdown. It's a full grid and can offer editing. That's probably as close as you'd get.

A comment: the MLeibman repo is long dead - you should be using: https://github.com/6pac/SlickGrid

Answer 2

It might be hard to do with current SlickGrid, there's no code that handles the hierarchical part itself so that would be lot of work to implement in SlickGrid. However it is implemented in Slickgrid-Universal , which is a wrapper on top of SlickGrid. You can see Example 5 and Example 6 which shows 2 types of Tree Data grids (hierarchical or parentId refs). We use it in production for a project that we have. Also note that this is not a grid within a grid, it's rather an expand/collapse the same as what you found in example5-collapsing.html , the only differences with SlickGrid is that Slickgrid-Universal has the code to deal with hierarchical data (filtering/sorting) while SlickGrid itself doesn't and also another nice to know thing is that expand/collapse is actually using data filtering behind the scene and you can see that when you have the footer displayed.

Please note that I'm the author of Slickgrid-Universal and also a major contributor to SlickGrid as well