Merge pull request #290 from jxn-30/main

feat: add optional `prevent-context-menu-row` prop defaulting to `true`

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.5.43",
+  "version": "1.5.44",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -133,7 +133,7 @@
                 clickRowToExpand && updateExpandingItemIndexList(index + prevPageEndIndex, item, $event);
               }"
               @dblclick="($event) => {clickRow(item, 'double', $event)}"
-              @contextmenu.prevent="($event) => {emits('contextmenuRow', item, $event)}"
+              @contextmenu="($event) => {contextMenuRow(item, $event)}"
             >
               <td
                 v-for="(column, i) in headerColumns"
@@ -369,6 +369,7 @@ const {
   themeColor,
   rowsOfPageSeparatorMessage,
   showIndexSymbol,
+  preventContextMenuRow
 } = toRefs(props);
 
 // style related computed variables
@@ -554,6 +555,11 @@ const {
   emits,
 );
 
+const contextMenuRow = (item: Item, $event: MouseEvent) => {
+  if (preventContextMenuRow.value) $event.preventDefault();
+  emits('contextmenuRow', item, $event);
+}
+
 // template style generation function
 const getColStyle = (header: HeaderForRender): string | undefined => {
   const width = header.width ?? (fixedHeaders.value.length ? 100 : null);

src/propsWithDefault.ts

@@ -194,5 +194,9 @@ export default {
   showIndexSymbol: {
     type: String,
     default: '#',
+  },
+  preventContextMenuRow: {
+    type: Boolean,
+    default: true
   }
 };