Tagged: Table row
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.
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
Smart UI Team
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
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
OK, the trick was binding “this” in the template.