Jak dodać klasę stylu do p-dataTable rzędu

Question

Używamy p-DataTable z PrimeNG 1.0.0-beta.16

Chcę dodać styl do wiersza, gdy wartość jest prawdą. Wymyśliłem, jak to zrobić z komórką, ale potrzebuję całego rzędu, aby zmienić jego tło.

<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"> pracuje ale rowStyleClass="missingPeriod" nie jest.

Proszę o poradę.

Zaktualizowana składnia:

Aktualizacja do 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> 

a maszynopisu:

public customRowClass(rowData, rowIndex): string { 
    console.log("In customRowClass"); 
    console.log(rowData); 
    console.log(rowIndex); 
    return ""; 
} 

Nic wewnątrz customRowClass jest rejestrowane. Wydaje mi się, że ta metoda nie jest wywoływana.

Answer 1

W wersji 1.1.3 PrimeNg jest to poprawione. Tak więc to pytanie może zostać zamknięte.

Answer 2

rowStyleClass działa nieco inaczej niż myślisz; pobiera on funkcję jako dane wejściowe, która zwraca ciąg znaków (nazwę klasy CSS). Jest on wymieniony w PrimeNG DataTable docs.

W moim HTML Mam:

<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...> 

W składniku:

lookupRowStyleClass(rowData: User) { 
    return rowData.accountDisabled ? 'disabled-account-row' : ''; 
} 

W globalnej pliku CSS:

/* 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; 
} 

Jeśli to nie pomoże, musisz zaktualizować do najnowszej wersji . PrimeNG 1.0.0 RC5 jest dostępny od listopada 2016.

Answer 3

Wygląda na to, że przyczyną jest scrollable="true". Gdy scrollable jest ustawione na true, używany jest inny szablon, który nie ma wiązania dla getRowStyleClass.

Tutaj można zobaczyć <tr> do tabeli, która jest nie przewijania jest wiążąca dla getRowStyleClass: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

ale <tr> dla przewijalnej tabeli nie mają wiążącej: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

Ty możliwe, zobacz oba przypadki w numerze this Plunkr i opublikowałem numer here.

Nie widzę powodu, dla którego metoda nie może być używana na przewijanych tabelach, dlatego wysłałem formularz PR z poprawką, która umożliwia monitorowanie here.