Highlight specific row in datatable

[dav2018]

I have a use case where selecting a particular row should highlight another row based on column comparison.

e.g I have following dataTable.

Code: Select all

ProductType   SystemName        Request Time      Response Time                                Message
 Swap         test          2018-02-12                                      <xml><sampleRequest></sampleRequest></xml>
 Swap         test                                        2018-02-12        <xml><sampleResponse></sampleResponse></xml>
 Swap         test                                        2018-03-12        <xml><sampleResponse></sampleResponse></xml>

When I click requestTime row, it should highlight row which has response time equal to request time. Any help will be appreciated.

Code: Select all

<p-dataTable [value]="uiModel" resizableColumns="true" scrollWidth="2100px" selectionMode="single" [(selection)]="selectedUIModel" (onRowSelect)="onRowSelect($event)" #dt> 
  <p-column field="productType" [sortable]="true" [filter]="true" header="Product Type" [style]="{'width':'100px'}"></p-column>
  <p-column field="systemName" [sortable]="true" [filter]="true" header="System Name" [style]="{'width':'100px'}"></p-column>
  <p-column field="requestTime" [sortable]="true" [filter]="true" header="Request Time" [style]="{'width':'150px'}"></p-column> 
 <p-column field="responseTime" [sortable]="true" [filter]="true" header="Request Time" [style]="{'width':'150px'}"></p-column>   
 <p-column field="message" header="Message" styleClass="content">
      <ng-template let-lookup="rowData" pTemplate="body">
          <span [style.color]="requestStyleclass" (click)="openModal(lookup.message)">{{lookup.message}}</span>
      </ng-template>
  </p-column>
</p-datatable>

[Ctrl-C]

You can try to use multiselect mode and add both of these rows to the selection array.

[dav2018]

Thanks for responding. But I don't want to select both rows. if I click on particular row, it should automatically find another corresponding row with same timestamp. So onrowClick, I can get request time (one of the column) of row1 but
how would I compare with response time of another row ?
Is it possible to get rowID and change style of that row ?

[Ctrl-C]

You have an array with your row data, correct? Just search through it.
About changing the style of any particular row I don't think that datatable has such functionality.
You can try to create your custom class/styles and apply it using plain angular/dom methods.
You can also use custom cell templates but it might be overkill for big datasets.