angular - How to add style class to p-dataTable row -

we're using p-datatable primeng 1.0.0-beta.16

i want add style row when value true. figured out how cell, need whole row change background.

<p-datatable [hidden]="loading" [value]="timeperiods" scrollable="true" scrollheight="400px" rowstyleclass="missingperiod">     <p-column field="startdate" header="begindatum" sortable="false">         <template let-col let-timeperiod="rowdata" ptemplate type="body">             <span [class.missingperiod]="!timeperiod.isnext">{{timeperiod.startdate | date: 'dd-mm yyyy'}}</span>         </template>     </p-column>     <p-column field="enddate" header="einddatum" sortable="false">         <template let-col let-timeperiod="rowdata" ptemplate type="body">             <span>{{timeperiod.enddate | date: 'dd-mm yyyy'}}</span>          </template>     </p-column> </p-datatable> 

<span [class.missingperiod]="!timeperiod.isnext"> working rowstyleclass="missingperiod" not.

please advice.

updated syntax:

updated v1.0.1

<p-datatable [hidden]="loading" [rowstyleclass]="customrowclass" [value]="timeperiods" scrollable="true" scrollheight="400px">     <p-column field="startdate" header="begindatum" sortable="false">         <template let-col let-timeperiod="rowdata" ptemplate type="body">             <span [class.missingperiod]="!timeperiod.isnext">{{timeperiod.startdate | date: 'dd-mm yyyy'}}</span>         </template>     </p-column>     <p-column field="enddate" header="einddatum" sortable="false">         <template let-col let-timeperiod="rowdata" ptemplate type="body">             <span>{{timeperiod.enddate | date: 'dd-mm yyyy'}}</span>         </template>     </p-column> </p-datatable> 

and typescript:

public customrowclass(rowdata, rowindex): string {     console.log("in customrowclass");     console.log(rowdata);     console.log(rowindex);     return ""; } 

nothing inside customrowclass logged. seems me method isn't called.

rowstyleclass works bit differently you'd think; takes function it's input, returns string (the css class name). it's listed in primeng datatable docs.

in html i've got:

<p-datatable [rowstyleclass]="lookuprowstyleclass" ...> 

in component:

lookuprowstyleclass(rowdata: user) {     return rowdata.accountdisabled ? 'disabled-account-row' : ''; } 

in global css file:

/* todo: should in component's css file, doesn't seem apply primeng data table there */ .disabled-account-row {     /* todo: first try without '!important', might need */     color: silver !important; } 

if doesn't help, need upgrade more recent version. primeng 1.0.0 rc5 out of november 2016.