Highlighting Rows and Columns

You can use CSS to achieve striping of table rows as you might do in other web-based applications.

For example, to highlight alternative rows in the table above, like this:

You just need to note the id of the sap.m.List or sap.m.Table control (in this case it is "salesdata") and then apply some appropriate CSS such as:

 

#salesarea tbody tr:nth-child(even) {
	background: rgb(245, 245, 245);
}

Note Use <even>, rather than <odd>, for the sibling specification. This way, the pop-in highlighting will be correct.

Highlighting of table columns is also possible by means of the styleClass property of the sap.m.Column control. The value of this property is applied as a class to the whole column (header, cells and footer) and can be used like this: Specify a class name for the styleClass property of your Column, and set the style as you wish:

 

new sap.m.Column({
    header: new sap.m.Label({ text: "Sales (GBP)" }),
    hAlign: "Right",
    minScreenWidth: sap.m.ScreenSize.Tablet,
    demandPopin: true,
    popinDisplay: "Block",
    styleClass: "salesamount" // <-- for highlighting 
}),

This results in the following: