Grouping Data - Table, List, or Other Option?

[CynthiaBlue]

I have a bunch of data I need to display grouped. Example...

Date
  trial 1
    dog 1
    dog 2 
    dog 3
 trial 2
   dog 1
   dog 3
   dog 4
Date
 trial 3
   dog 1
   dog 3
   dog 5

What is the best way to display this? I like the q-table and would prefer to do so in the table. But I'm wondering if a q-list would be better. Or if there is another option I don't know about. I would actually also like to display this grouped data in a PDF and have it available for export to csv, if possible, which I think a table can do.

If I use a table. would I need to nest rows? Or is there a different way to do it I don't know about? I haven't done nested rows before. I'm pulling my data in from an array I populate from an IndexedDB database (via Dexie). I'll also need to do counts and totals in this too.

I tried to get vue-good-table to work, but I wasn't able to get it to work in my quasar project. it appears that the app extension quasar-grouped-table doesn't work with my version of Quasar (the most recent version).

Thanks in advance for input!

[MilosPaunovic]

Perhaps QTree is what you're looking for?
https://quasar.dev/vue-components/tree

[CynthiaBlue]

That looks pretty cool! I didn't know about that component, I'll check it out! There are so many components :)

[mikadev]

no it's not the same because we also need to sort paginate....