diff --git a/packages/primevue/src/treetable/BaseTreeTable.vue b/packages/primevue/src/treetable/BaseTreeTable.vue index 1196dfaa9..01e48f7a1 100644 --- a/packages/primevue/src/treetable/BaseTreeTable.vue +++ b/packages/primevue/src/treetable/BaseTreeTable.vue @@ -30,6 +30,14 @@ export default { type: Boolean, default: false }, + contextMenu: { + type: Boolean, + default: false + }, + contextMenuSelection: { + type: Object, + default: null + }, rows: { type: Number, default: 0 diff --git a/packages/primevue/src/treetable/TreeTable.d.ts b/packages/primevue/src/treetable/TreeTable.d.ts index 0c923f952..3e08430fb 100755 --- a/packages/primevue/src/treetable/TreeTable.d.ts +++ b/packages/primevue/src/treetable/TreeTable.d.ts @@ -173,6 +173,21 @@ export interface TreeTableFilterEvent extends TreeTableSortEvent { filteredValue: any; } +/** + * Custom row context menu event. + * @see {@link TreeTableEmitsOptions['row-contextmenu']} + */ +export interface TreeTableRowContextMenuEvent { + /** + * Browser event. + */ + originalEvent: Event; + /** + * Selected row data. + */ + node: TreeNode; +} + /** * Custom sort metadata. */ @@ -420,6 +435,15 @@ export interface TreeTableProps { * @defaultValue false */ metaKeySelection?: boolean | undefined; + /** + * Enables context menu integration. + * @defaultValue false + */ + contextMenu?: boolean | undefined; + /** + * Selected row instance with the ContextMenu. + */ + contextMenuSelection?: any | any[] | undefined; /** * Number of rows to display per page. */ @@ -730,6 +754,11 @@ export interface TreeTableEmitsOptions { * @param {TreeSelectionKeys} value - New selection keys. */ 'update:selectionKeys'(event: TreeTableSelectionKeys): void; + /** + * Emitted when the contextMenuSelection changes. + * @param {*} value - New value. + */ + 'update:contextMenuSelection'(value: any[] | any | undefined): void; /** * Emitted when the first changes. * @param {number} value - New value. @@ -795,6 +824,11 @@ export interface TreeTableEmitsOptions { * @param {Event} event - Browser event. */ 'column-resize-end'(event: Event): void; + /** + * Callback to invoke when a row is selected with a ContextMenu. + * @param {TreeTableRowContextMenuEvent} event - Custom row context menu event. + */ + 'row-contextmenu'(event: TreeTableRowContextMenuEvent): void; } export declare type TreeTableEmits = EmitFn; diff --git a/packages/primevue/src/treetable/TreeTable.vue b/packages/primevue/src/treetable/TreeTable.vue index 594d5d7c6..cd4377f52 100755 --- a/packages/primevue/src/treetable/TreeTable.vue +++ b/packages/primevue/src/treetable/TreeTable.vue @@ -97,10 +97,13 @@ :ariaPosInset="index + 1" :tabindex="setTabindex(node, index)" :loadingMode="loadingMode" + :contextMenu="contextMenu" + :contextMenuSelection="contextMenuSelection" :templates="$slots" @node-toggle="onNodeToggle" @node-click="onNodeClick" @checkbox-change="onCheckboxChange" + @row-rightclick="onRowRightClick($event)" :unstyled="unstyled" :pt="pt" > @@ -198,7 +201,9 @@ export default { 'update:multiSortMeta', 'sort', 'filter', - 'column-resize-end' + 'column-resize-end', + 'update:contextMenuSelection', + 'row-contextmenu' ], provide() { return { @@ -348,6 +353,15 @@ export default { if (event.check) this.$emit('node-select', event.node); else this.$emit('node-unselect', event.node); }, + onRowRightClick(event) { + if (this.contextMenu) { + clearSelection(); + event.originalEvent.target.focus(); + } + + this.$emit('update:contextMenuSelection', event.node); + this.$emit('row-contextmenu', event); + }, isSingleSelectionMode() { return this.selectionMode === 'single'; }, diff --git a/packages/primevue/src/treetable/TreeTableRow.vue b/packages/primevue/src/treetable/TreeTableRow.vue index 7b9d84362..3a8d93f02 100755 --- a/packages/primevue/src/treetable/TreeTableRow.vue +++ b/packages/primevue/src/treetable/TreeTableRow.vue @@ -14,8 +14,10 @@ @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" + @contextmenu="onRowRightClick" v-bind="ptm('row', ptmOptions)" :data-p-selected="selected" + :data-p-selected-contextmenu="contextMenuSelection && isSelectedWithContextMenu" >