Hierarchical tables with vuejs

Question

I need to display some tree structures on an application I'm working on. The sample data would be something like this:

Category 1
       - Subcategory 1.1
                - Subcategory 1.1.1:     5 items
                - Subcategory 1.1.2:     6 items
       - Subcategory 1.2
                - Subcategory 1.2.1:     2 items
Category 2
       - Subcategory 2.1
                - Subcategory 2.2.1:     5 items
                - Subcategory 2.2.2:     6 items
                - Subcategory 2.2.3:     5 items
                - Subcategory 2.2.4:     6 items

So I need to put this on a table for which i need to alter the rowspan on the parent groups. The thing is that I have no idea how to do that with Vuejs. I tried with v-for structures on the three levels, but I'm seriously lost. Has anyone done something similar with Vue?

It's not clear how you would draw such a table. Can you make a sample table in ASCII? Using something like Monodraw or ASCIIflow? — gurghet
– gurghet, Commented Apr 26, 2016 at 10:25
You can check out this example: vuejs.org/examples/tree-view.html — Nora
– Nora, Commented Apr 27, 2016 at 15:14
On a table, even with nested data, I encountered problems with opening and closing of the tags and the v-for. So it might not be possible to do this with a table. Other structures might be possible (where each level uses a different tag, div, span, etc). — Nelson Rodriguez
– Nelson Rodriguez, Commented Jan 18, 2017 at 18:15

Trevor Goodchild · Accepted Answer · 2017-08-30 01:52:36Z

2

Consider using CSS Grid to build the table. You could conditionally assign CSS rules ( :class ) to progressively indent. For example .level__2 { margin-left: 24px;}

answered Aug 30, 2017 at 1:52

Trevor Goodchild

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hierarchical tables with vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related