docs(TableExampleAdvanced): improve sorting with v-model:sort and sort-mode props

Resolves #1177

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"

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.