DataTable integration

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...