How to add hyperlink to Primeng datatable column,angular 2 way

Question

I am using Primeng datatable in my project setup.But i want the first column of all rows to be hyperlink,so that i can link those to the next pages using [routerLink] (angular 2 way).I am quite unable to achieve that...

Is there any way to work around this one in primeng..?

Thanks in advance!

@HKumar No buddy,i didn't get.still waiting for some maseeha to arrive!;) — Rajesh Choudhary, Jun 09 '17 at 12:44

score 8 · Accepted Answer · answered Aug 09 '17 at 07:41

I am your real maseeaha try this it is working:

<p-dataTable [value]="cars">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header">
        <template let-row="rowData" pTemplate>
              <span *ngIf="col.header==='Vin'"><a style="color:blue;" routerLink="/prbDetails/{{row.vin}}">{{row[col.field]}}</a></span>
              <span *ngIf="col.header!=='Vin'">{{row[col.field]}}</span>
        </template>
    </p-column>
</p-dataTable>

user5390 · Answer 2 · 2017-06-13T17:12:17.990

Your Maseeha is back :)

Hope this solution might help you :)

<p-dataTable [value]="data" [rows]="50" [rowsPerPageOptions]="[500,1000,2000]" [paginator]="true" [pageLinks]="5"  sortMode="single" reorderableColumns="true" scrollable="true" scrollHeight="200px" [globalFilter]="gb" #dt exportFilename="search" styleClass="styles">
    <p-column field="name" header="Name" [sortable]="true">
                    <ng-template let-col let-data="rowData" pTemplate="body">
                        <span><a [routerLink]='["pageName"]' [queryParams]='{key1:data["Your Value"],key2:data["Your Value"]}' style="color: blue;">{{data["Your Value"]}}</a></span>

                    </ng-template>
                </p-column>

</p-dataTable>

Hi User5390,thanks for the prompt reply:) If i am populating table columns from an array of objects calles as col. Then how can i achieve the same hyperlink in first column. any idea? — Rajesh Choudhary, Jun 20 '17 at 06:44

score 0 · Answer 3 · answered Jul 25 '19 at 17:27

You have to do something like this:

<td *ngFor="let col of columns">
        <span *ngIf="col.header==='Opportunity'"><a routerLink="/prbDetails/{{rowData.opportunityId}}">{{rowData[col.field]}}</a></span>
        <span *ngIf="col.field==='dcn'"><a routerLink="/prbDetails/{{rowData.dcn}}">{{rowData[col.field]}}</a></span>
        <span *ngIf="col.header!=='Opportunity' && col.field!=='dcn'">{{rowData[col.field]}}</span>
      </td>

Hope this helps!!!

Cheers, Nitin

How to add hyperlink to Primeng datatable column,angular 2 way

3 Answers3