How can I use HTML Templates with primeng DataTables?

Pradeep,

PrimeNG Beta-11 released on 26-July which supports selection mode as 'single' and 'multiple' options for radio and checkbox.

RadioButton:

<p-column [style]="{'width':'38px'}" selectionMode="single"></p-column>

Checkbox:

<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>

You can find detail information here - http://www.primefaces.org/primeng/#/datatableselection

PrimeNG Beta.14 supports templates at header and footer section.

Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where the implicit variable passed to the template is the column definition and data of current row is the rowData property. In addition index of the current can be accessed using the optional rowIndex variable. Similarly, custom content can be placed at the header and footer of a column with templating.

A template inside a column must be decorated with pTemplate directive along with the type property to indicate where the template belongs to. Possible values are "header", "body" and "footer".

<p-column field="color" header="Color">
    <template let-col #car="rowData" #ri="rowIndex" pTemplate type="body">
        <span">{{car[col.field]}}</span>
    </template>
</p-column>
<p-column>
    <template pTemplate type="header">
        <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button>
    </template>
    <template let-car="rowData" pTemplate type="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
    </template>
</p-column>

As of Angular 4 and PrimeNG 4, template has been deprecated in favor of ng-template.

The following code demonstrates how to add links using ng-template to the PrimeNG p-dataTable component.

<p-dataTable [value]="myStore.myList | async">
<p-column field="name" header="Name">
  <ng-template let-col let-myItem="rowData" pTemplate="body">
    <a href="#" (click)="selectItem(myItem);">
      {{myItem[col.field]}}
    </a>
  </ng-template>
</p-column>
...

The tag "let-col" makes a Column object available for use within the template via the context variable $implicit. See Column from within the PrimeNG common shared.d.ts source file to see all the possible fields. There are quite a few.

The tag

let-myItem="rowData"

makes entire rowData field available to the template.

Another tag let-i makes the current row index available for use:

let-ri="rowIndex"

The pTemplate directive is required by the PrimeNG DataTable when templates are used to determine how to associate each template. Potential values are "header", "body" and "footer". PrimeNG DataTable Documentation