TreeTable and ContextMenu

[nneekkiitt]

Is there a way to use ContextMenu with TreeTable like with DataTable? I mean to select nodes with context-menu event and get the selection in handler?

[georgeblanchard]

Yes, it's possible to use the ContextMenu component with the TreeTable component in PrimeVue. You can use the onContextMenu event of the TreeTable to trigger the display of the ContextMenu, and then use the selection property of the TreeTable to get the selected nodes.

Here's an example of how you can achieve this:

Code: Select all

xml
<template>
  <div>
    <p-contextMenu :model="menuModel" :appendTo="body"></p-contextMenu>

    <p-tree-table :value="nodes" :columns="columns" :selectionMode="'multiple'"
      :selectionKeys.sync="selectedNodes" @onContextMenu="showMenu">
    </p-tree-table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      nodes: [...], // your tree nodes
      columns: [...], // your tree columns
      menuModel: [...], // your context menu model
      selectedNodes: [] // array to store selected nodes
    }
  },
  methods: {
    showMenu(event) {
      event.preventDefault();
      this.selectedNodes = event.selection;
      this.$refs.contextMenu.show(event.originalEvent);
    }
  }
}
</script>

In this example, I'm using the @onContextMenu event to trigger the showMenu method, which sets the selectedNodes array to the selected nodes and then displays the ContextMenu using the $refs property.

Note that I'm using the .sync modifier to bind the selectedKeys property of the TreeTable component to the selectedNodes array, so that changes to the selection are immediately reflected in the array.