feat(Table): add select event (#2822)

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

src/runtime/components/Table.vue

@@ -56,8 +56,8 @@ const table = tv({ extend: tv(theme), ...(appConfigTable.ui?.table || {}) })
 
 type TableVariants = VariantProps<typeof table>
 
+export type TableRow<T> = Row<T>
 export type TableData = RowData
-
 export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
 
 export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
@@ -144,6 +144,7 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
    */
   facetedOptions?: FacetedOptions<T>
+  onSelect?: (row: TableRow<T>, e?: Event) => void
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -276,6 +277,22 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
+function handleRowSelect(row: TableRow<T>, e: Event) {
+  if (!props.onSelect) {
+    return
+  }
+  const target = e.target as HTMLElement
+  const isInteractive = target.closest('button')
+  if (isInteractive) {
+    return
+  }
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  props.onSelect(row, e)
+}
+
 defineExpose({
   tableApi
 })
@@ -308,7 +325,15 @@ defineExpose({
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+            <tr
+              :data-selected="row.getIsSelected()"
+              :data-selectable="!!props.onSelect"
+              :data-expanded="row.getIsExpanded()"
+              :role="props.onSelect ? 'button' : undefined"
+              :tabindex="props.onSelect ? 0 : undefined"
+              :class="ui.tr({ class: [props.ui?.tr] })"
+              @click="handleRowSelect(row, $event)"
+            >
               <td
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"