p-table hyperlinks

UI Components for Angular
Post Reply
jcdillard
Posts: 2
Joined: 22 Mar 2018, 10:44

22 Mar 2018, 10:50

Does anyone know how I could template a field in my table (turbotable) to use the value in the cell to create a link to an outside URL?

Code: Select all

    
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns" [ngClass]="rowData[col.field] == 'Emplaced' ? 'green' : rowData[col.field] == 'Emplacing' ? 'yellow' :
            rowData[col.field] == 'Prepositioned' ? 'orchid' : rowData[col.field] == 'Prepositioning' ? 'gold' : rowData[col.field] == 'Planned' ? 'lightgray' : null">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    

User avatar
Ctrl-C
Posts: 97
Joined: 29 Sep 2016, 04:21

22 Mar 2018, 18:02

Code: Select all

<td *ngFor="let col of columns"><a href="http://web.site/{{rowData[col.field]}}">{{rowData[col.field]}}</a></td>

jcdillard
Posts: 2
Joined: 22 Mar 2018, 10:44

22 Mar 2018, 18:48

Ctrl-C wrote:
22 Mar 2018, 18:02

Code: Select all

<td *ngFor="let col of columns"><a href="http://web.site/{{rowData[col.field]}}">{{rowData[col.field]}}</a></td>
Thanks for the reply, this work but it makes every field a hyperlink. How would I specify a specific field for the link?

User avatar
Ctrl-C
Posts: 97
Joined: 29 Sep 2016, 04:21

22 Mar 2018, 19:10

You can add some flag to your field marking it as a link or check if it starts from http or something like that and than use it to render appropriately.

JACrazy
Posts: 20
Joined: 19 Mar 2018, 17:48

26 Mar 2018, 22:34

jcdillard wrote:
22 Mar 2018, 18:48
Ctrl-C wrote:
22 Mar 2018, 18:02

Code: Select all

<td *ngFor="let col of columns"><a href="http://web.site/{{rowData[col.field]}}">{{rowData[col.field]}}</a></td>
Thanks for the reply, this work but it makes every field a hyperlink. How would I specify a specific field for the link?
You can use an *ngIf statement. Use *ngSwitchCase if you want multiple columns with links, or you can use several ngIf statements (with or without an else template) but the final != statement becomes really long.
Here's an example of what I do:

Code: Select all

 <td *ngFor="let col of columns">
    <span *ngIf="col.header==='website link'"><a href="http://web.site/{{rowData[col.field]}}">{{rowData[col.field]}}</a></span>
    <span *ngIf="col.header!=='website link'">{{rowData[col.field]}}</span>
 </td>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests