feat(Table): Add contextmenu handling to table rows

docs/components/content/examples/TableExampleContextmenu.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const people = [{
+ id: 1,
+ name: 'Lindsay Walton',
+ title: 'Front-end Developer',
+ email: '[email protected]',
+ role: 'Member'
+}, {
+ id: 2,
+ name: 'Courtney Henry',
+ title: 'Designer',
+ email: '[email protected]',
+ role: 'Admin'
+}, {
+ id: 3,
+ name: 'Tom Cook',
+ title: 'Director of Product',
+ email: '[email protected]',
+ role: 'Member'
+}, {
+ id: 4,
+ name: 'Whitney Francis',
+ title: 'Copywriter',
+ email: '[email protected]',
+ role: 'Admin'
+}, {
+ id: 5,
+ name: 'Leonard Krasner',
+ title: 'Senior Designer',
+ email: '[email protected]',
+ role: 'Owner'
+}]
+
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+const contextMenuRow = ref()
+
+function contextmenu (event: MouseEvent, row: any) {
+ // Prevent the default context menu
+ event.preventDefault()
+
+ virtualElement.value.getBoundingClientRect = () => ({
+ width: 0,
+ height: 0,
+ top: event.clientY,
+ left: event.clientX
+ })
+
+ contextMenuRow.value = row
+}
+
+</script>
+
+<template>
+ <div>
+ <UTable :rows="people" @contextmenu.stop="contextmenu" />
+
+ <UContextMenu
+ :virtual-element="virtualElement"
+ :model-value="!!contextMenuRow"
+ @update:model-value="contextMenuRow = null"
+ >
+ <div class="p-4">
+ {{ contextMenuRow.id }} - {{ contextMenuRow.name }}
+ </div>
+ </UContextMenu>
+ </div>
+</template>

docs/content/2.components/table.md

@@ -285,6 +285,22 @@ componentProps:
 ---
 ::
 
+### Contextmenu
+
+Use the `contextmenu` listener on your Table to make the rows righ-clickable. The function will receive the original event as the first argument and the row as the second argument.
+
+You can use this to open a [ContextMenu](/components/context-menu) for that row.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-contextmenu'
+componentProps:
+ class: 'flex-1 flex-col overflow-hidden'
+---
+::
+
 ### Searchable
 
 You can easily use the [Input](/components/input) component to filter the rows.

src/runtime/components/data/Table.vue

@@ -71,7 +71,7 @@
 
  <template v-else>
  <template v-for="(row, index) in rows" :key="index">
- <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
+ <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, ($attrs.onSelect || $attrs.onContextmenu) && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
  <td v-if="modelValue" :class="ui.checkbox.padding">
  <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.capture.stop="() => onSelect(row)" />
  </td>
@@ -325,6 +325,15 @@ export default defineComponent({
  $attrs.onSelect(row)
  }
 
+ function onContextmenu (event, row) {
+ if (!$attrs.onContextmenu) {
+ return
+ }
+
+ // @ts-ignore
+ $attrs.onContextmenu(event, row)
+ }
+
  function selectAllRows () {
  // Create a new array to ensure reactivity
  const newSelected = [...selected.value]
@@ -400,6 +409,7 @@ export default defineComponent({
  isSelected,
  onSort,
  onSelect,
+ onContextmenu,
  onChange,
  getRowData,
  toggleOpened,