feat(Table): add click event for the entire row (#353)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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

@@ -327,6 +327,44 @@ const selected = ref([people[1]])
 You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
 ::
 
+### Clickable
+
+Add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument.
+
+You can use this to navigate to a page, open a modal or even to select the row manually.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-clickable{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+function select (row) {
+  const index = selected.value.findIndex((item) => item.id === row.id)
+  if (index === -1) {
+    selected.value.push(row)
+  } else {
+    selected.value.splice(index, 1)
+  }
+}
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" @select="select" />
+</template>
+```
+::
+
 ### Searchable
 
 You can easily use the [Input](/forms/input) component to filter the rows.