We're using p-dataTable from PrimeNG 1.0.0-beta.16
I want to add a style to the row when a value is true. I figured it out how to do this with the cell, but I need the whole row the change its 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">
is working but rowStyleClass="missingPeriod"
is not.
Please advice.
Updated syntax:
Updated to 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 the typescript:
public customRowClass(rowData, rowIndex): string {
console.log("In customRowClass");
console.log(rowData);
console.log(rowIndex);
return "";
}
Nothing inside customRowClass
is logged. It seems to me this method isn't called.
rowStyleClass
works a bit differently than you'd think; it takes a function as it's input, that returns a string (the CSS class name). It's listed in the PrimeNG DataTable docs.
In my HTML I've got:
<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>
In the component:
lookupRowStyleClass(rowData: User) {
return rowData.accountDisabled ? 'disabled-account-row' : '';
}
In a global CSS file:
/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
/* TODO: first try this without '!important', but you might need it */
color: silver !important;
}
If this doesn't help, you need to upgrade to a more recent version. PrimeNG 1.0.0 RC5 is out as of November 2016.