Dynamic CSS Styling for UI5 Tables: A Simple Solution for the Limitations of getRows()

[leonikussmaul]

If you have ever attempted to dynamically apply custom CSS to a UI5 table control, you may have encountered some challenges. In this article, we will explore a simple approach that can be helpful for some UI5 tables bound to a JSON model and using a relatively small dataset.

Limitations of getRows()

Suppose you want to use a Grid Table control (sap.ui.table.Table) and retrieve the rows of your table. In that case, you would usually use the getRows() method. However, this method has a limitation: it only returns the rows that are currently rendered in the table, which is also known as the visible row count. This is a well-known behavior documented in this SAP Knowledge Base Article.

What about getContextByIndex()?

The above article suggests using the getContextByIndex() method as an alternative if needed. However, this method returns the context, and you cannot add a CSS style class to the Table context itself, making it less useful for dynamic CSS styling.

Error when trying to apply CSS to the Table Context

On the other hand, applying CSS to a specific row using the getRows() method is effortless. For example, you can add a background color to a specified table row:

this.getView().byId("sTableId").getRows()[i].addStyleClass("backgroundColor");

.backgroundColor {

  background: #4cba6b; width: 100%; height: 100%;

}

How to manipulate the getRows() API

However, a problem arises when the colored row moves as you scroll down the table. This is because getRows() has returned only the visible row count, where we applied the style class. So, how can we dynamically manipulate the number of visible rows shown in the table rather than the standard count of 10?

The Grid Table control provides the visibleRowCount property, which can be bound to the length of Rows via expression binding. When you bind the visibleRowCount property to a JSON model with the rows property inside, which holds all the data for the rows, the getRows() method returns all the rows of the table, enabling you to apply CSS to all rows of the table.

Here's an example of how to bind the visibleRowCount property to a JSON model:

<table:Table

id="sTableId"

rowsUpdated="onRowsUpdated"

visibleRowCount="{= ${tablemodel>/rows}.length }">

 

In this example, we have bound the visibleRowCount property to a JSON model named 'tablemodel' with the rows property inside, which holds all the data for the rows. Expression binding is used to calculate the length of the rows property.

Rows vs. Cells

Similarly, you can apply your CSS to a specific cell aggregation rather than the entire row.

oTable.getRows()[i].mAggregations.cells[j].addStyleClass("backgroundColor");

In conclusion, using the visibleRowCount property and expression binding to dynamically manipulate the number of visible rows shown in the table enables you to apply CSS dynamically to all rows of the table. You can also apply CSS to specific cell aggregations, enabling you to customize the table to meet your needs.

Happy CSSing!