In the previous section, you have seen how to integrate the context menu with other elements using the target property. But integration with the DataTable component is a different case which needs a special treatment. This combination is one of the frequently used use cases in web development.

The DataTable provides reference to a Context menu using the contextMenu property (that is, the template reference variable of the Context menu should be assigned to DataTable's contextMenu attribute). The Context menu integration with DataTable would be written as follows:

<p-contextMenu #contextmenu [model]="tableItems"></p-contextMenu>
<p-dataTable [value]="employees" selectionMode="single" [(selection)]="selectedEmployee" [contextMenu]="contextmenu">
  <p-header>Employee Information</p-header>
  <p-column field="id" header="Employee ID"></p-column>
  <p-column field="name" header="Name"></p-column>
  <p-column field="email" header="Email"></p-column>
  <p-column field="contact" header="Telephone"></p-column>
</p-dataTable>

The Context menu model is bounded to an array of menu items such as View and Delete options as follows:

this.tableItems = [
 {label: 'View', icon: 'fa-search', command: (event) => 
   this.viewEmployee(this.selectedEmployee)},
 {label: 'Delete', icon: 'fa-close', command: (event) => 
   this.deleteEmployee(this.selectedEmployee)},
 {label: 'Help', icon: 'fa-close',
   url: 'https://www.opm.gov/policy-data-oversight/worklife/
   employee-assistance-programs/'}
];

In the preceding example, we performed command actions which notify the user with messages. But in real time, all CRUD operations are in sync with the database. The following screenshot shows a snapshot result of the Context menu integration with DataTable component as an example:

As per the preceding snapshot, the table row is selected on a right-click and Overlay appears on the row. The menu item selection can either do business logic or navigation to various web pages.