Skip to Content
Author's profile photo Ranjitha Kuchchangi

To color the first row of a table in SAP UI5

Each row of the table can be given a separate color according to the requirement. The way it was implemented in our case is as shown below:

Creation of UI:

A table is created with the properties as shown below. fixedRowCount is the important property when you are showing the total of the following values in the table other than the fixed one.

/wp-content/uploads/2015/03/img1_659407.png

Changes in CSS:

Add the below css in either index.html file or by adding the particular css in the customized css file by assigning the same in the index.html as show below in the second image.

/wp-content/uploads/2015/03/img2_659411.png

/wp-content/uploads/2015/03/img3_659412.png

Result:

As a result of the above implantation, the first row is fixed which indicates the sum of the values in the following rows for each column

/wp-content/uploads/2015/03/img4_659413.png

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Hi Ranjitha,

      Thanks for sharing.

      I have one question on the gape between two tables I have bound. How can I add </br> in between two tables.

      Thanks-

      Abhishek

      Author's profile photo Ranjitha Kuchchangi
      Ranjitha Kuchchangi
      Blog Post Author

      Hi Abhishek,

      Can you please elaborate a little?

      Regards,

      Ranjitha

      Author's profile photo Former Member
      Former Member

      Hi Ranjitha,

      nice idea, but I'm wondering what happens when you sort or filter the table?

      Is the first row still colored, no matter what line it actually is?

      Or does the coloring disappear completely? (happened to me once)

      Cheers,

      Klaus

      Author's profile photo Ranjitha Kuchchangi
      Ranjitha Kuchchangi
      Blog Post Author

      Hi Klaus,

      I still feel that even after sorting this would work as we have fixed the number of rows to 1. this will prevent it from row1 getting sorted is what i assume. Will have to implement it and validate my correctness 🙂

      Regards,

      Ranjitha

      Author's profile photo Seyed Ismail
      Seyed Ismail

      No. It doesn't work when you apply sort or filter.

      Without sorting : fine with fixedRowCount 1 (Total)

      /wp-content/uploads/2015/04/wsort_683693.jpg

      After sorting by Port - Descending, it becomes

      /wp-content/uploads/2015/04/sort_683694.jpg

      Thanks, Any thoughts?

      Seyed Ismail.

      Author's profile photo Ranjitha Kuchchangi
      Ranjitha Kuchchangi
      Blog Post Author

      was the row fixed in 2nd case as well?

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Yes, indeed.

      Author's profile photo Former Member
      Former Member

      That's what I thought was going to happen...

      You could move the TOTAL row to the top manually after sorting. Other than that, I don't think there is a way to force the row on top.