Ngx-datatable: [cellClass]/[rowClass] function does not have the scope of component class

[zualexander]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
at the moment it is not possible, to add a style-classe depending on a property from the component (in the plnkr example below you can see one property name I'm checking against in the getClass-fucntion and one hardcoded - which does work).

is there already a way to inject some properties into the function over the template? or is it possible to change the function call internally to apply the scope from the class?

Expected behavior
possibility to change the scope of the function to the scope of the component where the function belongs to, or the possiblity to inject parameters for some checks

Reproduction of the problem

http://plnkr.co/edit/iQWBqGpJwt0o9sB0BzOk

What is the motivation / use case for changing the behavior?

my special need for it is to highlight rows when they match on a property which is set in the component class

Please tell us about your environment:

• Table version:
  9.1.0
  

• Angular version: 4.1.1
  

• Browser: [all]
  

• Language: [all]

[eppsilon]

Possible workaround:

Instead of this:

@Component({
  ...,
  template: `<ngx-datatable [rowClass]="getRowClass"></ngx-datatable>`
})
class SomeComponent {
  otherFunc() {
    return true;
  }

  getRowClass(row) {
    return {
      'some-class': this.otherFunc()
    };
  }
}

Do this:

@Component({
  ...,
  template: `<ngx-datatable [rowClass]="rowClass"></ngx-datatable>`
})
class SomeComponent {
  otherFunc() {
    return true;
  }

  rowClass = (row) => {
    return {
      'some-class': this.otherFunc()
    };
  }
}

[amcdnl]

Awesome, thanks for providing that example @eppsilon !

Would you mind PR'n this to the docs :)?

[resting]

@eppsilon thanks the solution works.
Any idea if there is any performance issue with this?
From what I understand, the fat arrow syntax creates a new function every time it is triggered, and it seems to be triggered for every row.

[GFoley83]

You can also use an anonymous arrow func to reference the component scope:

@Component({
  ...,
  template: `<ngx-datatable [rowClass]="rowClass"></ngx-datatable>`
})
class SomeComponent {
  someVariable = true;

  rowClass = (row) => {
    return {
      'some-class': (() => { return this.someVariable === row.someVariable })()
    };
  }
}

[pptyasar]

not able to add multiple classes

[spookiecookie]

not able to add multiple classes

  getRowClass(row) {
    return {
      'class1': row.isImportant,
      'class2': row.isWarning,
    };
  }