From 758351d3ba5369c635893607291250521cfd7491 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Tue, 20 Aug 2024 11:26:03 +0200
Subject: [PATCH] feat(table): Emit `expand` event

---
 docs/content/2.components/table.md    | 23 +++++++++++++++++++++++
 src/runtime/components/data/Table.vue | 13 +++++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index 48318d32e..1af5a7211 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -314,6 +314,29 @@ componentProps:
 ---
 ::
 
+#### Custom `expand` event
+
+The `@update:expand` event is emitted when a row is expanded. This event provides the current state of expanded rows and the data of the row that triggered the event.
+
+To use the `@update:expand` event, add it to your `UTable` component. The event handler will receive an object with the following properties:
+- `expandedRows`: An array of indices of the currently expanded rows.
+- `row`: The row data that triggered the expand/collapse action.
+
+```vue
+<script setup lang="ts">
+const { data, pending } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
+
+const handleExpand = ({ expandedRows, row }) => {
+  console.log('Expanded Rows:', expandedRows);
+  console.log('Row Data:', row);
+};
+</script>
+
+<template>
+  <UTable :loading="pending" :rows="data" @update:expand="handleExpand" />
+</template>
+```
+
 ### Loading
 
 Use the `loading` prop to indicate that data is currently loading with an indeterminate [Progress](/components/progress#indeterminate) bar.
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index c36b679f7..fb28868a7 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -83,7 +83,7 @@
                 <UButton
                   v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
                   :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'] } }"
-                  @click="toggleOpened(index)"
+                  @click="toggleOpened({ index, row })"
                 />
               </td>
 
@@ -154,6 +154,10 @@ interface Column {
   [key: string]: any
 }
 
+interface Row {
+  [key: string]: any
+}
+
 export default defineComponent({
   components: {
     UIcon,
@@ -172,7 +176,7 @@ export default defineComponent({
       default: () => defaultComparator
     },
     rows: {
-      type: Array as PropType<{ [key: string]: any }[]>,
+      type: Array as PropType<Row[]>,
       default: () => []
     },
     columns: {
@@ -236,7 +240,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'update:sort'],
+  emits: ['update:modelValue', 'update:sort', 'update:expand'],
   setup (props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -349,11 +353,12 @@ export default defineComponent({
       return get(row, rowKey, defaultValue)
     }
 
-    function toggleOpened (index: number) {
+    function toggleOpened ({ index, row }: { index: number, row: Row }) {
       if (openedRows.value.includes(index)) {
         openedRows.value = openedRows.value.filter((i) => i !== index)
       } else {
         openedRows.value.push(index)
+        emit('update:expand', { expandedRows: openedRows.value, row })
       }
     }