feat(ngrid): allow adding custom css classes for rows

[JD Francis]

Apologies if this exists and I just couldn't find it in the docs, but it would be very helpful to have the ability to add a CSS class to a specific row.
This way you can add styling per row.
Some possible methods to do this could be through passing in a function that returns a class (how it is in mat-table), or could be an attribute on the row data itself.

[Shlomi Assaf]

Each row has 2 identity attributes, row-id and row-key

<pbl-ngrid-row class="pbl-ngrid-row ng-star-inserted" role="row" row-id="211" row-key="211">

The row-id will show the position (index) of the row within the datasource.
The row-key will show the value of the identity field for that row, if an identity field is defined.

The identity field is like a primary index for the rows, you set it using the input identityProp

<pbl-ngrid identityProp="email"></pbl-ngrid>

If identityProp is not set, the position (index) is used as the key.

---

Now, using attribute selector you can apply special css

[Shlomi Assaf]

I guess that this will not help, cause the css classes are static...

Can you refer me to the place in mat-table that this can be done?

I'll figure something out

[JD Francis]

Actually I was thinking of ngx-datatable when I referred to passing in a function.(http://swimlane.github.io/ngx-datatable/#css)
For material, you can just add it to the mat-row directly.

<tr mat-row
          *matRowDef="let row; columns: cols; let index = index"
          [ngClass]="{ 'conditionalCSS': cssCheckFunction(row)}"
></tr>

[Shlomi Assaf]

I have to say that ngrid's row template model is a bit different, if I expose such function it will only run when the row's data-item change and not on every change detection cycle... it might cause performance issues.

[Shlomi Assaf]

Back when I used ngx-datatable it was a big problem for me, because they mutated the data-items, each row had metadata stored on the row item which is a very bad thing...

The simplest solution is to add a function for that, but again, performance will degrade when virtual scroll is not used.

I'll think about it, now its css class, tomorrow someone will request controlling the style.

A solution should be in-place but it has to be controlled somehow.

[JD Francis]

Yeah, I had similar issues with ngx-datatable as well.

Going off an attribute in the row data would be a good approach, I think. Maybe have a parameter to pass in a key, which the rows can read class or style info out of the row data using that key (in order to avoid reserving a special keyword).

Like

<pbl-ngrid
[classKey]="'_class'" 
[dataSource]="{data:'somedata', _class:'myClass'}"
...etc
>

resulting in

<pbl-ngrid-row [ngClass]="row[classKey]">

I will hack up a workaround in the meantime, though.

[Shlomi Assaf]

@DejayJD

Hi, This should be available now, with version 1.0.0-rc.2

See this documentation page for more details