fix(Table): types in undeclared slots (#2544)

Co-authored-by: Benjamin Canac <[email protected]>

docs/app/components/content/examples/table/TableSlotsExample.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
+import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
 
-type User = {
+interface User {
   id: number
   name: string
   position: string
   email: string
   role: string
 }
 
+const toast = useToast()
+
 const data = ref<User[]>([{
   id: 1,
   name: 'Lindsay Walton',
@@ -59,7 +61,34 @@ const columns: TableColumn<User>[] = [{
 }, {
   accessorKey: 'role',
   header: 'Role'
+}, {
+  id: 'action'
 }]
+
+function getDropdownActions(user: User): DropdownMenuItem[][] {
+  return [
+    [{
+      label: 'Copy user Id',
+      icon: 'i-lucide-copy',
+      onSelect: () => {
+        navigator.clipboard.writeText(user.id.toString())
+        toast.add({
+          title: 'User ID copied to clipboard!',
+          color: 'success',
+          icon: 'i-lucide-circle-check'
+        })
+      }
+    }],
+    [{
+      label: 'Edit',
+      icon: 'i-lucide-edit'
+    }, {
+      label: 'Delete',
+      icon: 'i-lucide-trash',
+      color: 'error'
+    }]
+  ]
+}
 </script>
 
 <template>
@@ -77,5 +106,10 @@ const columns: TableColumn<User>[] = [{
         </div>
       </div>
     </template>
+    <template #action-cell="{ row }">
+      <UDropdownMenu :items="getDropdownActions(row.original)">
+        <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
+      </UDropdownMenu>
+    </template>
   </UTable>
 </template>

src/runtime/components/Table.vue

@@ -89,8 +89,8 @@ export interface TableProps<T> {
   ui?: Partial<typeof table.slots>
 }
 
-type DynamicHeaderSlots<T, K = keyof T> = Record<string, T> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
-type DynamicCellSlots<T, K = keyof T> = Record<string, T> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
+type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
+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> = {
   expanded: (props: { row: Row<T> }) => any