diff --git a/src/components/VnTable/VnContextMenu.vue b/src/components/VnTable/VnContextMenu.vue
new file mode 100644
index 000000000..f9922538e
--- /dev/null
+++ b/src/components/VnTable/VnContextMenu.vue
@@ -0,0 +1,90 @@
+
+
+
+ {{ $t('Filter by selection') }}
+
+ {{ $t('Remove filter') }}
+ {{ $t('Remove all filters') }}
+ {{ $t('Copy value') }}
+
+
+
+es:
+ Filter by selection: Filtro por selección
+ Exclude selection: Excluir selección
+ Remove filter: Quitar filtro por selección
+ Remove all filters: Eliminar todos los filtros
+ Copy value: Copiar valor
+
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 29a9200f0..7353c3726 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -33,6 +33,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
import VnTableFilter from './VnTableFilter.vue';
import { getColAlign } from 'src/composables/getColAlign';
import RightMenu from '../common/RightMenu.vue';
+import VnContextMenu from './VnContextMenu.vue';
const arrayData = useArrayData(useAttrs()['data-key']);
const $props = defineProps({
@@ -169,8 +170,9 @@ const orders = ref(useFilterParams($attrs['data-key']).orders);
const app = inject('app');
const tableHeight = useTableHeight();
-const editingRow = ref(null);
-const editingField = ref(null);
+const editingRow = ref();
+const editingField = ref();
+const contextMenuRef = ref({});
const isTableMode = computed(() => mode.value == TABLE_MODE);
const selectRegex = /select/;
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@@ -195,6 +197,10 @@ onBeforeMount(() => {
});
onMounted(async () => {
+ document.addEventListener('contextmenu', (event) => {
+ event.preventDefault();
+ contextMenuRef.value.handler(event);
+ });
if ($props.isEditable) document.addEventListener('click', clickHandler);
mode.value =
quasar.platform.is.mobile && !$props.disableOption?.card
@@ -777,6 +783,7 @@ const rowCtrlClickFunction = computed(() => {
]"
:data-row-index="rowIndex"
:data-col-field="col?.name"
+ :data-col-value="row?.[col?.name]"
>
{
+
en: