Row formatting

[Yaw]

In typescript or Angular, how can I change the style or color of an entire table row based on a column value?

All examples of conditional formating are for columns and cell, but not entire rows.

[Steven Peterson]

Hi,

You may use the onCellRender callback to style each row.
The onCellRender accepts: (row: any, dataField: string, value: any, cellElement: HTMLTableCellElement)
Here is an example: https://stackblitz.com/edit/github-qf1sqv?file=src/app/app.component.ts

I hope this helps

Best Regards,
Steven Peterson

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 1 year, 1 month ago by Steven Peterson.

[uterere]

Dear Steven,

Very peculiar this solution to pass a function as a binding property.

Anyway it does not solve an important  problem:  What to do when the information of which row must be highlighted  is external to the component.

How to do that in Angular?

Example: suppose you have an ajax table,

(i) you click in a row => onClick

(ii) save the id of the row => this.selectedId = data.id

(iii)=> ???? =>  highlighted the entire row where row.id === this.selectedId.

Thank you so much

Ute

 

 

 

 

 

 

[svetoslav_borislavov]

Hi,

What you are saying is different to the one in the original question

To do the desired thing please see here: https://stackblitz.com/edit/github-qf1sqv-bdtga8?file=src/app/app.component.ts

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[uterere]

OK, the trick was binding “this” in the template.

“[onCellRender]=”onCellRender.bind(this)”

Best regards
Ute

[Author]

Posts