From 1ff31531e9ee0d603d045306a49a21b34ece738b Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 9 Dec 2019 11:34:31 +0300
Subject: [PATCH] Docs for ContextMenu and DataTable

---
 src/components/datatable/DataTable.d.ts       |   2 +
 src/components/datatable/DataTable.vue        |  43 ++++---
 src/components/datatable/TableBody.vue        |  22 +++-
 src/components/tabmenu/TabMenu.vue            |   2 +-
 src/router.js                                 |   5 +
 .../datatable/DataTableContextMenuDemo.vue    | 120 ++++++++++++++++++
 src/views/datatable/DataTableDoc.vue          |  70 +++++++++-
 src/views/datatable/DataTableSubMenu.vue      |   1 +
 src/views/panelmenu/PanelMenuDemo.vue         |   2 +-
 src/views/panelmenu/PanelMenuDoc.vue          |   4 +-
 10 files changed, 249 insertions(+), 22 deletions(-)
 create mode 100644 src/views/datatable/DataTableContextMenuDemo.vue

diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index bbdf20dd8..f1dc7bc67 100644
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -28,6 +28,7 @@ export declare class DataTable extends Vue {
     selectionMode?: string;
     compareSelectionBy?: string;
     metaKeySelection?: boolean;
+    contextMenuSelection?: any;
     rowHover?: boolean;
     csvSeparator?: string;
     exportFilename?: string;
@@ -58,6 +59,7 @@ export declare class DataTable extends Vue {
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;
     $emit(eventName: 'row-click', event: Event): this;
+    $emit(eventName: 'row-contextmenu', event: Event): this;
     $emit(eventName: 'row-select', event: Event): this;
     $emit(eventName: 'row-unselect', event: Event): this;
     $emit(eventName: 'column-resize-end', event: Event): this;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index a42a3db15..b6f6c4be5 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -27,11 +27,11 @@
                         @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
                         @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                     :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
-                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                     @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                     @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
                     @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@@ -50,22 +50,22 @@
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 </template>
                 <template #body>
-                    <DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                    <DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
-                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
                         @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
                         @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
                 </template>
                 <template #frozenbody>
-                    <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                    <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
-                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
                         @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@@ -86,22 +86,22 @@
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 </template>
                 <template #body>
-                    <DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                    <DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
-                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
                         @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
                         @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
                 </template>
                 <template #frozenbody>
-                    <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                    <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
-                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
                         @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@@ -242,6 +242,10 @@ export default {
             type: Boolean,
             default: true
         },
+        contextMenuSelection: {
+            type: Object,
+            default: null
+        },
         rowHover: {
             type: Boolean,
             default: false
@@ -617,6 +621,7 @@ export default {
         onRowClick(e) {
             const event = e.originalEvent;
             const target = event.target;
+            const rowIndex = event.index;
             const targetNode = target.nodeName;
             const parentNode = target.parentElement && target.parentElement.nodeName;
 
@@ -656,7 +661,7 @@ export default {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
+                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                         else {
                             if(this.isSingleSelectionMode()) {
@@ -668,18 +673,18 @@ export default {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-select', {originalEvent: event, data: rowData, type: 'row'});
+                            this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                     }
                     else {
                         if (this.selectionMode === 'single') {
                             if (selected) {
                                 this.$emit('update:selection', null);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 this.$emit('update:selection', rowData);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                         else if (this.selectionMode === 'multiple') {
@@ -687,12 +692,12 @@ export default {
                                 const selectionIndex = this.findIndexInSelection(rowData);
                                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 const _selection = this.selection ? [...this.selection, rowData] : [rowData];
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                     }
@@ -701,6 +706,12 @@ export default {
 
             this.rowTouched = false;
         },
+        onRowRightClick(event) {
+            DomHandler.clearSelection();
+
+            this.$emit('update:contextMenuSelection', event.data);
+            this.$emit('row-contextmenu', event);
+        },
         onRowTouchEnd() {
             this.rowTouched = true;
         },
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index 1b53c6b04..30c7c569f 100644
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -12,7 +12,7 @@
                 </tr>
                 <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
                     v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                    @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
+                    @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
                     @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                     <template v-for="(col,i) of columns">
                         <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
@@ -137,6 +137,10 @@ export default {
             type: String,
             default: null
         },
+        contextMenuSelection: {
+            type: Object,
+            default: null
+        },
         rowClass: {
             type: null,
             default: null
@@ -185,6 +189,12 @@ export default {
                 });
             }
 
+            if (this.contextMenuSelection) {
+                rowStyleClass.push({
+                    'p-highlight-contextmenu': this.isSelectedWithContextMenu(rowData)
+                });
+            }
+
             if (this.rowClass) {
                 let rowClassValue = this.rowClass(rowData);
 
@@ -321,6 +331,13 @@ export default {
 
             return false;
         },
+        isSelectedWithContextMenu(rowData) {
+            if (rowData && this.contextMenuSelection) {
+                return this.equals(rowData, this.contextMenuSelection, this.dataKey);
+            }
+
+            return false;
+        },
         findIndexInSelection(rowData) {
             return this.findIndex(rowData, this.selection);
         },
@@ -346,6 +363,9 @@ export default {
         onRowClick(event, rowData, rowIndex) {
             this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
         },
+        onRowRightClick(event, rowData, rowIndex) {
+            this.$emit('row-rightclick', {originalEvent: event, data: rowData, index: rowIndex});
+        },
         onRowTouchEnd(event) {
             this.$emit('row-touchend', event);
         },
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index a24805087..516e3ecae 100644
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -31,7 +31,7 @@ export default {
                 event.preventDefault();
                 return;
             }
-            
+
             if (item.command) {
                 item.command({
                     originalEvent: event,
diff --git a/src/router.js b/src/router.js
index 3220ec262..40a9a2988 100644
--- a/src/router.js
+++ b/src/router.js
@@ -220,6 +220,11 @@ export default new Router({
 			path: '/datatable/style',
 			name: 'datatablestyle',
 			component: () => import('./views/datatable/DataTableStyleDemo.vue')
+        },
+        {
+			path: '/datatable/contextmenu',
+			name: 'datatablecontextmenu',
+			component: () => import('./views/datatable/DataTableContextMenuDemo.vue')
         },
 		{
 			path: '/dataview',
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
new file mode 100644
index 000000000..32052139e
--- /dev/null
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -0,0 +1,120 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - ContextMenu</h1>
+				<p>CDataTable has exclusive integration with ContextMenu.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+
+            <ContextMenu :model="menuModel" ref="cm" />
+		</div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+
+&lt;ContextMenu :model="menuModel" ref="cm" /&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            selectedCar: null,
+            menuModel: [
+                {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
+                {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewCar(car) {
+            this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
+        },
+        deleteCar(car) {
+            this.cars = this.cars.filter((c) => c.vin !== car.vin);
+            this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
+            this.selectedCar = null;
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            selectedCar: null,
+            menuModel: [
+                {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
+                {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewCar(car) {
+            this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
+        },
+        deleteCar(car) {
+            this.cars = this.cars.filter((c) => c.vin !== car.vin);
+            this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
+            this.selectedCar = null;
+        }
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index f30fc20bc..a977ac1fd 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -1357,6 +1357,58 @@ export default {
         this.carService.getCarsMedium().then(data => this.cars = data);
     }
 }
+</CodeHighlight>
+
+                <h3>ContextMenu</h3>
+                <p>DataTable provides exclusive integration with the ContextMenu component using <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+
+&lt;ContextMenu :model="menuModel" ref="cm" /&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            selectedCar: null,
+            menuModel: [
+                {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
+                {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        onRowContextMenu(event) {
+            this.$refs.cm.show(event.originalEvent);
+        },
+        viewCar(car) {
+            this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
+        },
+        deleteCar(car) {
+            this.cars = this.cars.filter((c) => c.vin !== car.vin);
+            this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
+            this.selectedCar = null;
+        }
+    }
+}
 </CodeHighlight>
 
                 <h3>Empty Message</h3>
@@ -1738,6 +1790,12 @@ export default {
                                     when set to false selection of each item
                                     can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
                             </tr>
+                            <tr>
+                                <td>contextMenuSelection</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Selected row instance with the ContextMenu.</td>
+                            </tr>
                             <tr>
                                 <td>rowHover</td>
                                 <td>boolean</td>
@@ -1935,13 +1993,22 @@ export default {
                             <tr>
                                 <td>row-click</td>
                                 <td>event.originalEvent: Browser event. <br />
-                                    event.data: Selected row data.</td>
+                                    event.data: Selected row data. <br />
+                                    event.index: Row index.</td>
                                 <td>Callback to invoke when a row is clicked.</td>
                             </tr>
+                            <tr>
+                                <td>row-contextmenu</td>
+                                <td>event.originalEvent: Browser event. <br />
+                                    event.data: Selected row data. <br />
+                                    event.index: Row index.</td>
+                                <td>Callback to invoke when a row is selected with a ContextMenu.</td>
+                            </tr>
                             <tr>
                                 <td>row-select</td>
                                 <td>event.originalEvent: Browser event. <br />
                                     event.data: Selected row data. <br />
+                                    event.index: Row index. <br />
                                     event.type: Type of the selection, valid values are "row", "radio" or "checkbox".</td>
                                 <td>Callback to invoke when a row is selected.</td>
                             </tr>
@@ -1949,6 +2016,7 @@ export default {
                                 <td>row-unselect</td>
                                 <td>event.originalEvent: Browser event. <br />
                                     event.data: Unselected row data. <br />
+                                    event.index: Row index. <br />
                                     event.type: Type of the selection, valid values are "row", "radio" or "checkbox".</td>
                                 <td>Callback to invoke when a row is unselected.</td>
                             </tr>
diff --git a/src/views/datatable/DataTableSubMenu.vue b/src/views/datatable/DataTableSubMenu.vue
index cc8846de7..dd10d483f 100644
--- a/src/views/datatable/DataTableSubMenu.vue
+++ b/src/views/datatable/DataTableSubMenu.vue
@@ -16,6 +16,7 @@
             <li><router-link to="/datatable/colresize">&#9679; ColResize</router-link></li>
             <li><router-link to="/datatable/reorder">&#9679; Reorder</router-link></li>
             <li><router-link to="/datatable/rowgroup">&#9679; RowGroup</router-link></li>
+            <li><router-link to="/datatable/contextmenu">&#9679; ContextMenu</router-link></li>
             <li><router-link to="/datatable/responsive">&#9679; Responsive</router-link></li>
             <li><router-link to="/datatable/export">&#9679; Export</router-link></li>
             <li><router-link to="/datatable/state">&#9679; State</router-link></li>
diff --git a/src/views/panelmenu/PanelMenuDemo.vue b/src/views/panelmenu/PanelMenuDemo.vue
index 90e1d84fc..5a78e2743 100644
--- a/src/views/panelmenu/PanelMenuDemo.vue
+++ b/src/views/panelmenu/PanelMenuDemo.vue
@@ -79,7 +79,7 @@ export default {
                       {
                          label: 'New',
                          icon:'pi pi-fw pi-user-plus',
-             
+
                       },
                       {
                          label: 'Delete',
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 5c8087364..58587991f 100644
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -78,7 +78,7 @@ export default {
                       {
                          label: 'New',
                          icon:'pi pi-fw pi-user-plus',
-             
+
                       },
                       {
                          label: 'Delete',
@@ -288,7 +288,7 @@ export default {
                       {
                          label: 'New',
                          icon:'pi pi-fw pi-user-plus',
-             
+
                       },
                       {
                          label: 'Delete',