feat(Table): customize header and cell through slots (#2457)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+type User = {
+  id: number
+  name: string
+  position: string
+  email: string
+  role: string
+}
+
+const data = ref<User[]>([{
+  id: 1,
+  name: 'Lindsay Walton',
+  position: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  position: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  position: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  position: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  position: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  position: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}])
+
+const columns: TableColumn<User>[] = [{
+  accessorKey: 'id',
+  header: 'ID'
+}, {
+  accessorKey: 'name',
+  header: 'Name'
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'role',
+  header: 'Role'
+}]
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" class="flex-1">
+    <template #name-cell="{ row }">
+      <div class="flex items-center gap-3">
+        <UAvatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" />
+        <div>
+          <p class="font-medium text-[var(--ui-text-highlighted)]">
+            {{ row.original.name }}
+          </p>
+          <p>
+            {{ row.original.position }}
+          </p>
+        </div>
+      </div>
+    </template>
+  </UTable>
+</template>

docs/content/3.components/table.md

@@ -80,6 +80,10 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat
 
 In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.
 
+::tip{to="#with-slots"}
+You can also use slots to customize the header and data cells of the table.
+::
+
 ::component-example
 ---
 prettier: true
@@ -92,8 +96,8 @@ highlights:
 ---
 ::
 
-::tip
-When rendering components with the `h` function, you can utilize the `resolveComponent` function to dynamically resolve and reference components.
+::note
+When rendering components with `h`, you can either use the `resolveComponent` function or import from `#components`.
 ::
 
 ### Loading
@@ -396,6 +400,23 @@ class: '!p-0'
 ---
 ::
 
+### With slots
+
+You can use slots to customize the header and data cells of the table.
+
+Use the `#<column>-header` slot to customize the header of a column. You will have access to the `column`, `header` and `table` properties in the slot scope.
+
+Use the `#<column>-cell` slot to customize the cell of a column. You will have access to the `cell`, `column`, `getValue`, `renderValue`, `row`, and `table` properties in the slot scope.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-slots-example'
+class: '!p-0'
+---
+::
+
 ## API
 
 ### Props