Question

How to show certain columns/rows in a Table Grid Control in a different color?

Comments

If you have that table inside a CV, write css classes and Add that class for only those columns

Answer 1

The UI Toolkit Table control lets you style rows and cells from JavaScript; the hook is the Render Cell / Render Row (row-level "onRowRendered") events and the record data.

Rows by data - use the table's On row rendered (or the Table's Row style formula on newer toolkits) event:

// Table control > Events > On row rendered:  (row, record, index)
if (record.status === "OVERDUE") row.style.backgroundColor = "#f8d7da";        // light red
if (record.amount > 10000)      row.classList.add("warning");                  // Bootstrap class

Cells / columns - the column definition has a Render cell option (or use "On cell rendered" of the table):

// Column "Amount" > Render cell:  (cell, record, column)
cell.style.color = record.amount < 0 ? "red" : "green";
cell.style.fontWeight = "bold";

Whole columns can also be coloured with plain CSS on the column class the toolkit generates (.tableCol-2 on older toolkits, [data-col="Amount"] on newer ones); put the CSS in a managed asset included by the coach view.

Selected rows already get the Bootstrap "info" class; to highlight rows programmatically use ${Table}.highlightRow(index) if available, otherwise re-render with ${Table}.refresh() after changing a flag field that the row renderer looks at (for example record.__highlight).

Older heritage "Table" (Dojo) control: the only hook is the Row style expression per column, or CSS by row parity; that control is deprecated - the UI Toolkit table is the way to go.

References

• BPM UI Toolkit - Table control events (on row rendered, render cell)