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..aff31401a1
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableTreeDataExample.vue
@@ -0,0 +1,166 @@
+
+
+
+
+
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index c0bcc732d0..118db4e30b 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -574,7 +574,7 @@ class: '!p-0'
### With drag and drop
-Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Table. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
+You can use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Table. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
::note
Since the table ref doesn't expose the tbody element, add a unique class to it via the `:ui` prop to target it with `useSortable` (e.g. `:ui="{ tbody: 'my-table-tbody' }"`).
@@ -589,6 +589,22 @@ class: '!p-0'
---
::
+### With tree data
+
+You can use the `get-sub-rows` prop to display hierarchical (tree) data in the table.
+For example, if your data objects have a `children` array, set `:get-sub-rows="row => row.children"` to enable expandable rows.
+
+::component-example
+---
+prettier: true
+collapse: true
+highlights:
+ - 168
+name: 'table-tree-data-example'
+class: '!p-0'
+---
+::
+
### With slots
You can use slots to customize the header and data cells of the table.