Customizing the cell content with templating

By default, the value of the field attribute of each column is used to display the table content. The content can also be customized in every possible way with the help of the ng-template template tag, which can be applied on header, body, and footer levels. The template variable passed to the ng-template template is used for column definition and row data is used by the rowData property. There is also an optional row index available through the rowIndex variable.

The ng-template template will have the pTemplate directive, which holds the type of customization with the possible values of header, body, and footer. The customized browser content is displayed with various text colors and row data information with a button selection as follows:

<p-dataTable [value]="basicBrowsers">
  <p-column field="engine" header="Engine"></p-column>
  <p-column field="browser" header="Browser"></p-column>
  <p-column field="platform...