0

I have been using Primeng for a while.

I have used Primeng Datatable (p-dataTable) in my component. The component what I am trying to do is inbox. I read messages from DB to a model named 'Message' in Angular 2. There is a field in model named Read. Its used as a flag. Its Boolean. My requirement is if Read is false, entire row elements should be in one colour, say color1. If Read is true, entire row elements should be another color, say color2.

I know how to do the same using ngClass.

Can someone please suggest me how I can do the same using p-dataTable. I tried many ways I can by referring many sites & didn't find any. What I want is a functionality similar to ngClass in p-dataTable

Here is my code

In HTML

<p-dataTable [rowStyleClass]="readFlag" [value]="message" >
        <p-column [style]="{'width':'38px'}"  selectionMode="multiple"></p-column>
        <p-column field="SenderUserId"  header="From" [sortable]="true"></p-column>
        <p-column class="icon-mandatory" field="Subject" header="Message"></p-column>
        <p-column field="MessageDate" header="Time" [sortable]="true">
            <template let-col let-message="rowData" pTemplate type="body">
                <span>{{message.MessageDate | date: 'medium'}}</span>
            </template>
        </p-column>
</p-dataTable>

In Component

readFlag(rowData: Message) { return rowData.Read ? 'inbox-Read' : 'inbox-Unread' ; }

Message Model

export class Message 
{
    public Subject: string;
    public Body: string;
    public MessageDate: any;
    public Read: boolean;
}
  • 1
    Can you show us examples of what you've tried, and why they don't work? – Adam Mar 29 '17 at 19:00
  • Could you add some actual code? – Matijs Mar 29 '17 at 19:07
  • @Adam when i gave the function as **readFlag(rowData: Message) { return rowData.Read ? 'inbox-Read' : '' ; }** inbox-Read class is getting applied for all rows of the table. But I want that class to be applied only to row which satisfies the condition –  Mar 30 '17 at 06:00

2 Answers2

1

You can use rowstyle class attribute. It is there in the primeng docs. It takes a function as argument . The function should return the class to be set or try [attr.class]="condition? 'color1':'color2'"

Refer : https://www.primefaces.org/primeng/#/datatable

RemyaJ
  • 5,358
  • 4
  • 22
  • 41
  • Refer: http://stackoverflow.com/questions/40528666/how-to-add-style-class-to-p-datatable-row – RemyaJ Mar 29 '17 at 17:54
  • is that the only way to bring ngClass-like functionality in p-dataTable? –  Mar 29 '17 at 18:14
  • i read about rowstyle class. what I saw is it takes a function name as its value and inside that function value ternary operator should be used to return class name as shown below. **in HTML** **in Component** readFlag(rowData: Message) { return rowData.Read ? 'inbox-Read' : 'inbox-Unread' ; } –  Mar 30 '17 at 05:34
0

I found out the answer for my question

In HTML

<p-dataTable [rowStyleClass]="applyReadFlagStyle" [value]="message">
        <p-column [style]="{'width':'38px'}"  selectionMode="multiple"></p-column>
        <p-column field="SenderUserId"  header="From" [sortable]="true"></p-column>
        <p-column field="Subject" header="Message"></p-column>
        <p-column field="MessageDate" header="Time" [sortable]="true">
            <template let-col let-message="rowData" pTemplate type="body">
                <span>{{message.MessageDate | date: 'medium'}}</span>
            </template>
</p-dataTable>

In Component

applyReadFlagStyle(rowData: Message): string {
    return rowData.IsRead ? 'inbox-Read': 'inbox-UnRead'  ;
}