docs: add vue example for grouping

[HarshilPatel007]

I was looking for an example or guide on how to implement row grouping in a Vue.js table using Tanstack Table. Unfortunately, I didn't receive any answers in the community, and there aren't any working examples available on the official website either. Frustrated by the lack of resources, I decided to take matters into my own hands and figure it out myself. And here we're.

Happy to put my cent! 😄

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 324dccc.

Command	Status	Duration	Result
nx affected --targets=test:format,test:sherif,t...	✅ Succeeded	1m 52s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	35s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-04 06:55:27 UTC

[riccardoperra]

Hey @HarshilPatel007, seems like the lock-file is outdated

[HarshilPatel007]

Hey @HarshilPatel007, seems like the lock-file is outdated

Hi, currently I'm on bed for sleeping. Will push update tomorrow morning.

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-table-example-angular-basic
• tanstack-table-example-angular-column-ordering
• tanstack-table-example-angular-column-pinning
• tanstack-table-example-angular-column-pinning-sticky
• tanstack-table-example-angular-column-resizing-performant
• tanstack-table-example-angular-column-visibility
• tanstack-table-example-angular-editable
• tanstack-table-example-angular-expanding
• tanstack-table-example-angular-filters
• tanstack-table-example-angular-grouping
• tanstack-table-example-angular-row-dnd
• tanstack-table-example-angular-row-selection
• tanstack-table-example-angular-row-selection-signal
• tanstack-table-example-angular-signal-input
• tanstack-table-example-angular-sub-components
• tanstack-lit-table-example-basic
• tanstack-lit-table-example-column-sizing
• tanstack-lit-table-example-filters
• tanstack-lit-table-example-row-selection
• tanstack-lit-table-example-sorting
• tanstack-lit-table-example-sorting-dynamic-data
• tanstack-lit-table-virtualized-rows
• tanstack-table-example-qwik-basic
• tanstack-table-example-qwik-filters
• tanstack-table-example-qwik-row-selection
• tanstack-table-example-qwik-sorting
• tanstack-table-example-basic
• tanstack-table-example-bootstrap
• tanstack-table-example-column-dnd
• tanstack-table-example-column-groups
• tanstack-table-example-column-ordering
• tanstack-table-example-column-pinning
• tanstack-table-example-column-pinning-sticky
• tanstack-table-example-column-resizing-performant
• tanstack-table-example-column-sizing
• tanstack-table-example-column-visibility
• tanstack-table-example-custom-features
• tanstack-table-example-editable-data
• tanstack-table-example-expanding
• tanstack-table-example-filters
• tanstack-table-example-filters-faceted
• tanstack-table-example-filters-fuzzy
• tanstack-table-example-full-width-resizable-table
• tanstack-table-example-full-width
• tanstack-table-example-fully-controlled
• tanstack-table-example-grouping
• tanstack-table-example-kitchen-sink
• tanstack-table-example-material-ui-pagination
• tanstack-table-example-pagination
• tanstack-table-example-pagination-controlled
• tanstack-table-example-query-router-search-params
• tanstack-table-example-row-dnd
• tanstack-table-example-row-pinning
• tanstack-table-example-row-selection
• tanstack-table-example-sorting
• tanstack-table-example-sub-components
• tanstack-table-example-virtualized-columns
• tanstack-table-example-virtualized-columns-experimental
• tanstack-table-example-virtualized-infinite-scrolling
• tanstack-table-example-virtualized-rows
• tanstack-table-example-virtualized-rows-experimental
• tanstack-table-example-solid-basic
• tanstack-table-example-solid-bootstrap
• tanstack-table-example-solid-column-groups
• tanstack-table-example-solid-column-ordering
• tanstack-table-example-solid-column-visibility
• tanstack-table-example-solid-filters
• tanstack-table-example-solid-sorting
• tanstack-table-example-svelte-basic
• tanstack-table-example-svelte-column-groups
• tanstack-table-example-svelte-column-ordering
• tanstack-table-example-svelte-column-pinning
• tanstack-table-example-svelte-column-visibility
• tanstack-table-example-svelte-filtering
• tanstack-table-example-svelte-sorting
• tanstack-table-example-vanilla-basic
• tanstack-table-example-vanilla-pagination
• tanstack-table-example-vanilla-sorting
• tanstack-table-example-vue-basic
• tanstack-table-example-vue-column-ordering
• tanstack-table-example-vue-column-pinning
• tanstack-table-example-vue-filters
• tanstack-table-example-vue-grouping-rows
• tanstack-table-example-vue-pagination
• tanstack-table-example-vue-pagination-controlled
• tanstack-table-example-vue-row-selection
• tanstack-table-example-vue-sorting
• tanstack-table-example-vue-subcomponents
• tanstack-table-example-vue-virtualized-rows

@tanstack/angular-table

npm i https://pkg.pr.new/@tanstack/angular-table@5941

@tanstack/lit-table

npm i https://pkg.pr.new/@tanstack/lit-table@5941

@tanstack/qwik-table

npm i https://pkg.pr.new/@tanstack/qwik-table@5941

@tanstack/match-sorter-utils

npm i https://pkg.pr.new/@tanstack/match-sorter-utils@5941

@tanstack/react-table

npm i https://pkg.pr.new/@tanstack/react-table@5941

@tanstack/react-table-devtools

npm i https://pkg.pr.new/@tanstack/react-table-devtools@5941

@tanstack/solid-table

npm i https://pkg.pr.new/@tanstack/solid-table@5941

@tanstack/svelte-table

npm i https://pkg.pr.new/@tanstack/svelte-table@5941

@tanstack/table-core

npm i https://pkg.pr.new/@tanstack/table-core@5941

@tanstack/vue-table

npm i https://pkg.pr.new/@tanstack/vue-table@5941

commit: 324dccc

[HarshilPatel007]

@tannerlinsley, @KevinVandy, @riccardoperra, I think this is ready for review now.

[riccardoperra]

Seems ok to me, but I’m currently in a business travel until tomorrow, so I can look on it afterwards