SAPUI5 smooth table scrolling

[#1]

I have a sap.ui.table.Table table which scrolls by adding and removing rows like usual. Then I added different alternating row colors to the table which seems to make the scrolling very unsmooth, because of not visible moving row. So far so good. Not I tried to use a fixed positioned div around the table content and made the table infinitive long and made the div content scrollable. This works totally fine on desktop browsers, but not on tablets. And here is the problem. Next, I found out, that the deeper problem is to fire the scroll on the table on the tablet. (see screenshot) The table is totally scrollable even on the tablet when I touch on the white area (which is part of the table, but not the content) (I set the width of the table content ".sapUiTableCnt>.sapUiTableCCnt>.sapUiTableCtrlScr" to 70% via css). As soon an I try to scroll and touch on the table content, nothing works. The table does not scroll even 1mm.

Any ideas about the problem and how to solve it?

[Former Member]

Hello Dominik,

could you share how you "fixed positioned div around the table content and made the table infinitive long and made the div content scrollable" ?

Sincerely,

Daniel

[Former Member]

Hi Dominik

sap.ui.table.Table is for desktop app. For mobile, we have to use sap.m.Table.

Thanks

-D

[Qualiture]

Hi Dominik,

I think you need to take a step back and have a look at how you implemented the alternating row colors. Have you done it using pure CSS, or did you implement extra Javascript code to display the "zebra striping"?

If the latter, then I can imagine you would run into some performance issues, especially with larger tables.

Using CSS only, there should be no performance impact on scrolling whatsoever.

The CSS-only solution (so no extra Javascript is needed) for alternating sap.ui.table.Table rows could be (for instance):

/* Sets background color for even rows */
.sapUiTableRowEven{
  background-color: #EEF;
}


/* Sets hover background color for even rows */
.sapUiTableCtrl tr.sapUiTableRowEven.sapUiTableRowHvr,
.sapUiTableCtrl tr.sapUiTableRowHvr.sapUiTableRowEven>td{
  background-color: #DDF;
}

[Former Member]

Hi, I have done it in pure css, right the way you suggested it. The issue I have is not a performance issue, it is about how tables in SAPUI5 are working. Tables are not built and filled with the complete content and then scrollable. SAPUI5 builds a table with the number of displayed rows by the attribute "visibleRowCount". After that the rows are fix as well as the background. The rows are just filled with new data from the model when the user scrolls down, the row background stays the same. This results in a very bad user experience, because the scroll is actually not visible during small content changes.

[Qualiture]

Hi Dominique,

Now I fully understand your issue

However, I don't think the current behavior is that bad of a user experience, simply because the table rows don't actually 'scroll' (i.e., the rows themselves don't scroll "per pixel" up and down, but rather stay in position, only their content moves up or down.

Having the alternate colors follow the content move would result in some weird alternate-row-flickering which IMHO is an even worse user experience...

[Former Member]

Your assumption is unfortunately wrong. I am sitting in front of the (half) working example here feeling the issues.

[Qualiture]

I understand (I have created this working example too : JS Bin - Collaborative JavaScript Debugging)

I wasn't able to construct a sample that would truly stick the background to it's row. However, since the rows themselves are not scrolling per-pixel, all you would get is table rows quickly changing background colors which --- especially when scrolling quickly -- would resemble a kind of "70's TV interference"

Maybe the sap.m.Table is a better choice (because here the table rows actually *do* scroll "per pixel" as opposed to "per row", but the drawback here is you cannot (currently) lock the column headers in place

[Qualiture]

Regarding your solution with the encapsulating DIV, have you set your table's sap.ui.table.NavigationMode property to Paginator? By default it's set to Scrollbar and that may be the reason why your scrolling doesn't work.

[Former Member]

Hi Robin,

I am running into the same issue of the background not scrolling with content.

Where did you get this information from? Is it mentioned somewhere officially ?

I ask you this because I need to give a reason to my Product Owner why it cannot be done easily and it would make my life much simpler if I could cite an official source stating the same.

Thanks for the great explanation.

Regards,

Nishant.