From 576c727b6d9ee9594180ab428809a472265123cf Mon Sep 17 00:00:00 2001
From: Ronan <crnoogle@gmail.com>
Date: Tue, 19 Aug 2025 21:59:45 +0800
Subject: [PATCH 1/2] docs(table): add example with tree data

---
 .../examples/table/TableTreeDataExample.vue   | 156 ++++++++++++++++++
 docs/content/3.components/table.md            |  13 ++
 2 files changed, 169 insertions(+)
 create mode 100644 docs/app/components/content/examples/table/TableTreeDataExample.vue

diff --git a/docs/app/components/content/examples/table/TableTreeDataExample.vue b/docs/app/components/content/examples/table/TableTreeDataExample.vue
new file mode 100644
index 0000000000..0dfaa32499
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableTreeDataExample.vue
@@ -0,0 +1,156 @@
+<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: 'james.anderson@example.com',
+  amount: 594,
+  children: [
+    {
+      id: '4599',
+      date: '2024-03-11T10:10:00',
+      email: 'mia.white@example.com',
+      amount: 276
+    }, {
+      id: '4598',
+      date: '2024-03-11T08:50:00',
+      email: 'william.brown@example.com',
+      amount: 315
+    }, {
+      id: '4597',
+      date: '2024-03-10T19:45:00',
+      email: 'emma.davis@example.com',
+      amount: 529,
+      children: [
+        {
+          id: '4592',
+          date: '2024-03-09T18:45:00',
+          email: 'benjamin.jackson@example.com',
+          amount: 851
+        }, {
+          id: '4591',
+          date: '2024-03-09T16:05:00',
+          email: 'sophia.miller@example.com',
+          amount: 762
+        }, {
+          id: '4590',
+          date: '2024-03-09T14:20:00',
+          email: 'noah.clark@example.com',
+          amount: 573,
+          children: [
+            {
+              id: '4596',
+              date: '2024-03-10T15:55:00',
+              email: 'ethan.harris@example.com',
+              amount: 639
+            }, {
+              id: '4595',
+              date: '2024-03-10T13:40:00',
+              email: 'ava.thomas@example.com',
+              amount: 428
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, {
+  id: '4589',
+  date: '2024-03-09T11:35:00',
+  email: 'isabella.lee@example.com',
+  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)
+  }
+}]
+</script>
+
+<template>
+  <UTable
+    :data="data"
+    :columns="columns"
+    :get-sub-rows="row => row.children"
+    expanded
+    sticky
+    class="flex-1 h-96"
+    :ui="{
+      base: 'border-separate border-spacing-0',
+      tr: 'group',
+      td: 'empty:p-0 group-has-[td:not(:empty)]:border-b border-default'
+    }"
+  />
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 3f40b22086..92bbd7e877 100644
--- a/docs/content/3.components/table.md
+++ b/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.

From 0086659c1725ad2578881d502f523660da4b135f Mon Sep 17 00:00:00 2001
From: Ronan <crnoogle@gmail.com>
Date: Wed, 20 Aug 2025 09:39:53 +0800
Subject: [PATCH 2/2] docs(table): only expand the first row to save room in
 tree data example

---
 .../content/examples/table/TableTreeDataExample.vue        | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/content/examples/table/TableTreeDataExample.vue b/docs/app/components/content/examples/table/TableTreeDataExample.vue
index 0dfaa32499..4050a03970 100644
--- a/docs/app/components/content/examples/table/TableTreeDataExample.vue
+++ b/docs/app/components/content/examples/table/TableTreeDataExample.vue
@@ -137,18 +137,21 @@ const columns: TableColumn<Payment>[] = [{
     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"
-    expanded
     sticky
-    class="flex-1 h-96"
+    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'
     }"