feat(VDataTable): add 'body.prepend', 'body.append' slots (#18472)

resolves #17128 Co-authored-by: Kael <[email protected]>
vuetifyjs · Nov 3, 2023 · f28ef5b · f28ef5b
1 parent f533a0e
commit f28ef5b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
@@ -62,6 +62,8 @@ export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & {
   thead: VDataTableSlotProps
   tfoot: VDataTableSlotProps
   bottom: VDataTableSlotProps
+  'body.prepend': VDataTableSlotProps
+  'body.append': VDataTableSlotProps
   'footer.prepend': never
 }
 
@@ -214,6 +216,7 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
                 </thead>
                 { slots.thead?.(slotProps.value) }
                 <tbody>
+                  { slots['body.prepend']?.(slotProps.value) }
                   { slots.body ? slots.body(slotProps.value) : (
                     <VDataTableRows
                       { ...attrs }
@@ -222,6 +225,7 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
                       v-slots={ slots }
                     />
                   )}
+                  { slots['body.append']?.(slotProps.value) }
                 </tbody>
                 { slots.tbody?.(slotProps.value) }
                 { slots.tfoot?.(slotProps.value) }

diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
@@ -157,13 +157,15 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
                 </thead>
                 { slots.thead?.(slotProps.value) }
                 <tbody class="v-data-table__tbody" role="rowgroup">
+                  { slots['body.prepend']?.(slotProps.value) }
                   { slots.body ? slots.body(slotProps.value) : (
                     <VDataTableRows
                       { ...dataTableRowsProps }
                       items={ flatItems.value }
                       v-slots={ slots }
                     />
                   )}
+                  { slots['body.append']?.(slotProps.value) }
                 </tbody>
                 { slots.tbody?.(slotProps.value) }
                 { slots.tfoot?.(slotProps.value) }

diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
@@ -35,6 +35,8 @@ export type VDataTableVirtualSlots = VDataTableRowsSlots & VDataTableHeadersSlot
   top: VDataTableVirtualSlotProps
   headers: VDataTableHeadersSlots['headers']
   bottom: VDataTableVirtualSlotProps
+  'body.prepend': VDataTableVirtualSlotProps
+  'body.append': VDataTableVirtualSlotProps
   item: {
     itemRef: Ref<HTMLElement | undefined>
   }
@@ -178,6 +180,8 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
                       <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
                     </tr>
 
+                    { slots['body.prepend']?.(slotProps.value) }
+
                     <VDataTableRows
                       { ...dataTableRowsProps }
                       items={ displayItems.value }
@@ -205,6 +209,8 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
                       }}
                     </VDataTableRows>
 
+                    { slots['body.append']?.(slotProps.value) }
+
                     <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
                       <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
                     </tr>