From a8b4a3a036e2ce4a275e9d60ec443ea2c38a56f6 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Mon, 16 Jun 2025 12:01:11 +0200
Subject: [PATCH] feat(table): add body top and bottom slots

---
 playground/app/pages/components/table.vue | 12 ++++++++++++
 src/runtime/components/Table.vue          | 14 ++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 46c3799b8b..b83692ff50 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -362,6 +362,18 @@ onMounted(() => {
       <template #expanded="{ row }">
         <pre>{{ row.original }}</pre>
       </template>
+
+      <template #body-top>
+        <tr>
+          body top
+        </tr>
+      </template>
+
+      <template #body-bottom>
+        <tr>
+          body bottom
+        </tr>
+      </template>
     </UTable>
 
     <div class="flex items-center justify-between gap-3">
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index f66a68c1ff..8daf87db64 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -173,10 +173,12 @@ type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
 export type TableSlots<T extends TableData = TableData> = {
-  expanded: (props: { row: Row<T> }) => any
-  empty: (props?: {}) => any
-  loading: (props?: {}) => any
-  caption: (props?: {}) => any
+  'expanded': (props: { row: Row<T> }) => any
+  'empty': (props?: {}) => any
+  'loading': (props?: {}) => any
+  'caption': (props?: {}) => any
+  'body-top': (props?: {}) => any
+  'body-bottom': (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 </script>
@@ -369,6 +371,8 @@ defineExpose({
       </thead>
 
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <slot name="body-top" />
+
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
             <tr
@@ -423,6 +427,8 @@ defineExpose({
             </slot>
           </td>
         </tr>
+
+        <slot name="body-bottom" />
       </tbody>
     </table>
   </Primitive>