Search code examples
sapui5

How to highlight entire row in sap.ui.table.Table

I have been doing the below to highlight an entire row in a table:

this.byId("sampleTable").getRows()[i].addStyleClass("someClass");

.someClass{
  background: #b0c4de !important;
}

Result: Screenshot of my UI5 table with custom CSS

It works but I learnt from other questions that doing this way and using oRow.addStyleClass is not recommended since it's not a public method.

Any links, recommendations or an answer are much appreciated.

Solution

  • Highlighting the entire row with custom colors is not supported by design. At the same time, SAP recommends to avoid custom CSS:

    SAP Fiori launchpad apps should not override styles. (source)

    UI5 instead provides row indication with semantic colors as well as alternate row colors which are all theme-dependent. In Quartz Light (Fiori 3 default theme) for example:

    enter image description here
    From: https://openui5.hana.ondemand.com/entity/sap.ui.table.Table/sample/sap.ui.table.sample.RowHighlights

    Adding semantic color to the row:

    <Table xmlns="sap.ui.table">
  <rowSettingsTemplate>
    <RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : null}" />
  </rowSettingsTemplate>
  <columns> <!-- ... -->

    Enabling alternate row colors:

    <Table xmlns="sap.ui.table" alternateRowColors="true">
  <!-- ... -->

    Sample https://jsbin.com/toxehec/edit?js,output