chore(Table): handle default sort and default column direction

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

@@ -70,6 +70,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `label` - The label to display in the table header. Can be changed through the `column-attribute` prop.
 - `key` - The field to display from the row data.
 - `sortable` - Whether the column is sortable. Defaults to `false`.
+- `direction` - The sort direction to use on first click. Defaults to `asc`.
 
 ::component-example
 ---
@@ -181,7 +182,8 @@ const columns = [{
 }, {
   key: 'email',
   label: 'Email',
-  sortable: true
+  sortable: true,
+  direction: 'desc'
 }, {
   key: 'role',
   label: 'Role'
@@ -191,11 +193,18 @@ const people = [...]
 </script>
 
 <template>
-  <UTable :columns="columns" :rows="people" />
+  <UTable :columns="columns" :rows="people" :sort="{ column: 'title' }" />
 </template>
 ```
 ::
 
+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 can specify a default sort for the table through the `sort` prop. It's an object with the following properties:
+
+- `column` - The column to sort by.
+- `direction` - The sort direction. Can be either `asc` or `desc` and defaults to `asc`.
+
 Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/elements/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
 
 ::component-card
@@ -358,7 +367,7 @@ The `sort` property is an object with the following properties:
 - `field` - The field to sort by.
 - `direction` - The direction to sort by. Can be `asc` or `desc`.
 
-The `on-sort` property is a function that you can call to sort the table. It accepts a string with the field to sort by and an optional string with the direction to sort by. If the direction is not provided, it will toggle between `asc` and `desc`.
+The `on-sort` property is a function that you can call to sort the table and accepts the column as parameter.
 
 ::alert{icon="i-heroicons-light-bulb"}
 Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.