ref: remove the custom toggle row expansion function

HarshilPatel007 · HarshilPatel007 · commit 324dccc83d85 · 2025-03-04T11:55:35.000+05:30
diff --git a/examples/vue/grouping/index.html b/examples/vue/grouping/index.html
@@ -5,7 +5,6 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue
@@ -131,15 +131,6 @@ const table = useVueTable({
   },
 })
 
-// Toggle row expanded state
-const toggleRowExpanded = (id: string): void => {
-  const currentExpanded = expanded.value as Record<string, boolean>
-  expanded.value = {
-    ...currentExpanded,
-    [id]: !currentExpanded[id],
-  }
-}
-
 // Group by status
 const groupByStatus = (): void => {
   grouping.value = ['status']
@@ -211,7 +202,7 @@ const clearGrouping = (): void => {
               <div v-if="cell.getIsGrouped()" class="grouped-cell">
                 <button
                   class="expand-button"
-                  @click="toggleRowExpanded(row.id)"
+                  @click="row.getToggleExpandedHandler()()"
                 >
                   <span v-if="row.getIsExpanded()" class="icon">👇</span>
                   <span v-else class="icon">👉</span>
