Skip to Content
Technical Articles
Author's profile photo Sonalika Porwal

Alternative Row Colors for Tree Table

The application link for this solution can be found here:

The code for the solution is available on GitHub at:


A tree table is a hierarchical arrangement of data that is organized in rows and columns and grouped into nodes. alternateRowColors is a UI5 table attribute that permits alternating table row colors.

Unfortunately, the tree table doesn’t support this property which is clearly stated in the screenshot below from the API Documentation.


API documentation of TreeTable

The alternateRowColors property on a table may be used to identify one row from another and to analyze data with a better user interface. One hierarchical set of data is considered as one section in treetable, which is a combination of numerous rows, resulting in a variable height of that section.

The image below depicts a treetable with four rows.


Trretable with four rows

If the first tree cell is expanded, it provides the hierarchical structure. The highlighted part below (the height can vary) can be considered as one entire section (row).


Expanded rows of a tree table

While the sap.m.Table and sap.ui.table.Table makes good use of altRowColors property, on the other hand, the treeTable doesn’t support it due to its variable row height.

Here’s a little experiment I ran to deal with this scenario.

My initial notion while beginning to implement this problem was to differentiate the rows. I looked in several areas to see if I could find out how to treat several merged rows as a single row. I noticed a property called “aria-level” in the DOM tree. I was only able to identify this as a differentiator. I, therefore, knew where to begin.

I created my own custom CSS based on “aria-level” and applied it to the table, and it worked!

* gets the table and applies background colors to the rows
applyBgColorsToTableRows() {
const body = document.getElementsByTagName('body')[0];
const table = body.getElementsByTagName('table')[1];
const tableBody = table.getElementsByTagName('tbody')[0];
const rows = tableBody.getElementsByTagName('tr');
const tableLength = rows.length;
let rowNumber = 0;

for (let i = 0; i < tableLength; i += 1) {
  if (rows[i + 1]?.ariaLevel === '1') {
    rows[i].setAttribute('rowNumber', rowNumber);
    this.setClassToTableRows(rowNumber % 2 === 0, rows[i]);
    rowNumber += 1;
  } else {
    rows[i].setAttribute('rowNumber', rowNumber);
    this.setClassToTableRows(rowNumber % 2 === 0, rows[I]);

* sets css custom class to table row
setClassToTableRows(isRowEven, row) {
if (isRowEven) {
  row.classList.remove('evenRow', 'oddRow');
 } else {
  row.classList.remove('evenRow', 'oddRow');

The actual issue now arose. My solution was unstable because ‘aria-level’ changes every time any of the aforementioned events or numerous other multiple events linked to the table screen are triggered. This includes any change in any row, any scrolling, or any change in resolution.

The “mousemove” event was used in my initial attempt. The CSS will be applied whenever the mouse is moved, whether we scroll the page, add or remove any rows, or make any other potential movement. It mostly functioned as intended, but there were a few glitches, such as the inability to move the keyboard, which is obviously quite dumb and surely not the proper way to accomplish it.

Then I experimented with setInterval, which ensures that CSS is applied every 2 seconds regardless of what is done to the table, the page, the resolution, etc. and after that, I also tried requestAnimationFrame. All of them were quite effective but again, there needed to be a better solution.

Finally, I found the answer in the API docs alone.

The table’s rowsUpdated property – The event is launched upon the updating of the table rows as a result of rendering, a model update, or user interaction, according to the API specification.

And from this, we could determine when to use our CSS.

The final application looks something like this:


TreeTable with alternative row colors

In conclusion, the alternate row colors for a tree table can be achieved through custom CSS and the use of ‘aria-level’ as a differentiator. This solution is based on the ‘rowsUpdated’ property in the API documentation. It provides a better user interface for hierarchical data.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.