From e48b61b5df368b2ea8708a67654c54f77f51ccfb Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 9 Jan 2024 15:13:29 +0100
Subject: [PATCH] docs(TableExampleAdvanced): improve sorting with
 `v-model:sort` and `sort-mode` props

Resolves #1177
---
 .../components/content/examples/TableExampleAdvanced.vue | 9 +++++++--
 docs/content/4.data/1.table.md                           | 4 ++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/components/content/examples/TableExampleAdvanced.vue b/docs/components/content/examples/TableExampleAdvanced.vue
index b5758963..a99b501f 100644
--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ b/docs/components/content/examples/TableExampleAdvanced.vue
@@ -77,6 +77,7 @@ const resetFilters = () => {
 }
 
 // Pagination
+const sort = ref({ column: 'id', direction: 'asc' as const })
 const page = ref(1)
 const pageCount = ref(10)
 const pageTotal = ref(200) // This value should be dynamic coming from the API
@@ -92,11 +93,13 @@ const { data: todos, pending } = await useLazyAsyncData<{
   query: {
     q: search.value,
     '_page': page.value,
-    '_limit': pageCount.value
+    '_limit': pageCount.value,
+    '_sort': sort.value.column,
+    '_order': sort.value.direction
   }
 }), {
   default: () => [],
-  watch: [page, search, searchStatus, pageCount]
+  watch: [page, search, searchStatus, pageCount, sort]
 })
 </script>
 
@@ -175,11 +178,13 @@ const { data: todos, pending } = await useLazyAsyncData<{
     <!-- Table -->
     <UTable
       v-model="selectedRows"
+      v-model:sort="sort"
       :rows="todos"
       :columns="columnsTable"
       :loading="pending"
       sort-asc-icon="i-heroicons-arrow-up"
       sort-desc-icon="i-heroicons-arrow-down"
+      sort-mode="manual"
       class="w-full"
       :ui="{ td: { base: 'max-w-[0] truncate' } }"
       @select="select"
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 7d7ec9d1..eac7fc5d 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -6,6 +6,10 @@ links:
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
 ---
 
+::callout{icon="i-heroicons-puzzle-piece" to="/getting-started/examples#table"}
+Check out an example of a Table with advanced features like sorting, pagination, search, etc.
+::
+
 ## Usage
 
 Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.