Seeking Help with Row Grouping in Vue.js Table Implementation

[HarshilPatel007]

Hello everyone,

I’ve been working on implementing a table in Vue.js using shadcn-vue, and I’ve successfully added features like filtering, sorting, and pagination. However, I’m currently stuck on implementing row grouping.

Use Case:

I need to group table rows by task status, such as:

• Todo tasks
• In Progress tasks
• Completed tasks

Each group should display its respective rows underneath.

What I’ve Tried:

I’ve explored various approaches, including using @tanstack/vue-table, but I haven’t been able to get row grouping to work as expected. Due to a lack of resources available online. means, an example showcasing the grouping.

Request:

Could anyone share a working example or guide for implementing row grouping in a Vue.js table? It doesn’t need to use shadcn-vue—any working example would be incredibly helpful!

Additionally, I’d like to gently suggest that the official Vue examples for @tanstack/vue-table could benefit from matching the breadth of examples available for React. This would make it easier for Vue developers to adopt and implement these features.

Thank you so much in advance for your time and assistance! I’m looking forward to learning from your expertise.