docs(table): add example with tree data

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UCheckbox = resolveComponent('UCheckbox')
+const UIcon = resolveComponent('UIcon')
+
+type Payment = {
+  id: string
+  date: string
+  email: string
+  amount: number
+  children?: Payment[]
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  email: '[email protected]',
+  amount: 594,
+  children: [
+    {
+      id: '4599',
+      date: '2024-03-11T10:10:00',
+      email: '[email protected]',
+      amount: 276
+    }, {
+      id: '4598',
+      date: '2024-03-11T08:50:00',
+      email: '[email protected]',
+      amount: 315
+    }, {
+      id: '4597',
+      date: '2024-03-10T19:45:00',
+      email: '[email protected]',
+      amount: 529,
+      children: [
+        {
+          id: '4592',
+          date: '2024-03-09T18:45:00',
+          email: '[email protected]',
+          amount: 851
+        }, {
+          id: '4591',
+          date: '2024-03-09T16:05:00',
+          email: '[email protected]',
+          amount: 762
+        }, {
+          id: '4590',
+          date: '2024-03-09T14:20:00',
+          email: '[email protected]',
+          amount: 573,
+          children: [
+            {
+              id: '4596',
+              date: '2024-03-10T15:55:00',
+              email: '[email protected]',
+              amount: 639
+            }, {
+              id: '4595',
+              date: '2024-03-10T13:40:00',
+              email: '[email protected]',
+              amount: 428
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, {
+  id: '4589',
+  date: '2024-03-09T11:35:00',
+  email: '[email protected]',
+  amount: 389
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  id: 'select',
+  header: ({ table }) => h(UCheckbox, {
+    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
+    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
+    'aria-label': 'Select all'
+  }),
+  cell: ({ row }) => h(UCheckbox, {
+    'modelValue': row.getIsSelected() ? true : row.getIsSomeSelected() ? 'indeterminate' : false,
+    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+    'aria-label': 'Select row'
+  })
+}, {
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => {
+    return h(
+      'div',
+      {
+        style: {
+          paddingLeft: `${row.depth}rem`
+        },
+        class: 'flex items-center gap-2'
+      },
+      [
+        h(UIcon, {
+          name: row.getIsExpanded() ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right',
+          onClick: row.getToggleExpandedHandler(),
+          class: row.getCanExpand() ? 'cursor-pointer' : 'invisible'
+        }),
+        row.getValue('id') as string
+      ]
+    )
+  }
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+const expanded = ref({ 0: true })
+</script>
+
+<template>
+  <UTable
+    v-model:expanded="expanded"
+    :data="data"
+    :columns="columns"
+    :get-sub-rows="row => row.children"
+    sticky
+    class="flex-1"
+    :ui="{
+      base: 'border-separate border-spacing-0',
+      tbody: '[&>tr]:last:[&>td]:border-b-0',
+      tr: 'group',
+      td: 'empty:p-0 group-has-[td:not(:empty)]:border-b border-default'
+    }"
+  />
+</template>

docs/content/3.components/table.md

@@ -580,6 +580,19 @@ class: '!p-0'
 ---
 ::
 
+### With tree data
+
+You can use `getSubRows` props to display tree data
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-tree-data-example'
+class: '!p-0'
+---
+::
+
 ### With slots
 
 You can use slots to customize the header and data cells of the table.