feat(Table): add v-model:sort prop

docs/content/4.data/1.table.md

@@ -66,7 +66,7 @@ componentProps:
 ---
 ::
 
-You can specify the default direction of each column through the `direction` property. It can be either `asc` or `desc` and defaults to `asc`.
+You may specify the default direction of each column through the `direction` property. It can be either `asc` or `desc`, but it will default to `asc`.
 
 You can specify a default sort for the table through the `sort` prop. It's an object with the following properties:
 
@@ -156,6 +156,36 @@ Use the `sort-desc-icon` prop to set a different icon or change it globally in `
 You can also customize the entire header cell, read more in the [Slots](#slots) section.
 ::
 
+You can hear any changes on sorting using the `onSort` event, which fires with the `column` and `direction` of the sorting. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+For example, we can take advantage of `useLazyRefresh` computed URL to automatically refresh the sorting column and direction every time the `order` reactive element changes. 
+
+```vue
+<script setup>
+const order = reactive({
+  column: null,
+  direction: 'asc'
+})
+
+const columns = [
+    // ...
+]
+
+const { data, pending } = useLazyFetch(() => {
+    return `/api/users?orderBy=${order.column}&order=${order.direction}`
+})
+</script>
+
+<template>
+  <UTable 
+    :loading="pending"
+    :columns="columns"
+    :rows="data" 
+    @onSort="value => Object.assign(order, value)"
+  />
+</template>
+```
+
 ### Selectable
 
 Use a `v-model` to make the table selectable. The `v-model` will be an array of the selected rows.

src/runtime/components/data/Table.vue

@@ -152,7 +152,7 @@ export default defineComponent({
       default: undefined
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'onSort'],
   setup (props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -232,6 +232,8 @@ export default defineComponent({
       } else {
         sort.value = { column: column.key, direction: column.direction || 'asc' }
       }
+
+      emit('onSort', sort.value)
     }
 
     function onSelect (row) {