How to set row class dynamically in NGX datatable?

Question

I am basically implementing a search functionality which is outside of the table, and want to highlight the rows if the search content matches something in the table row. Also there are multiple tables on the page.

Here's my panel component.

<app-mystuff-dashboard-panel *ngFor="let group of initialGroupedSearchResults | objectFilter: { MyContentSetScope: 'Private', MyContentSetType : 'System', contentSetName: 'Clipboard' } | orderBy: 'contentSetName'"
                                   [contentSet]="group"
                                   [searchText]="searchText"></app-mystuff-dashboard-panel>

And in this above component I am running ngOnChanges, to get the searchText changes(which is a string)

I have tried using [rowClass]="getRowClass" in the ngx-dtatable input, but that function doesn't fire always, like how ngClass function changes everytime anything changes.

getRowClass(row) {
    return _includes(row.DynamicProperties.myContentItemKey, this.searchText) ? 'yellowbackground' : 'bluebackground';
  }

The row parameter in this function is undefined mostly. Also I have around 100 rows on around 3 tables, and this getRowClass funciton fires only around 5 times for 3 tables combined when the searchText changes..

I have tried re-rendering the table all over again onChange, that doesn't work as well.

if ((changes.searchText && (changes.searchText.currentValue !== changes.searchText.previousValue))) {
      console.log(this.searchText);
      this.items = this.items.slice();
      this.items = [...this.items];
      this.items.push({});
      this.items.splice(-1, 1);1

      this.items = [...this.items];
      this.changeDetector.detectChanges();
    }

Can you try calling `this.rows = this.rows.slice();` method. This will set the rows variable as its own copy. So ngx-datatable might re-render. — Midhun Darvin, Aug 07 '18 at 07:19
Okay. Can you try this : https://stackoverflow.com/questions/40829951/angular2-ngfor-onpush-change-detection-with-array-mutations `this.items.push({}); this.items = [...this.items]; this.items.splice(-1, 1); this.items = [...this.items]; ` — Midhun Darvin, Aug 07 '18 at 08:33

How to set row class dynamically in NGX datatable?

0 Answers0