Header row in table with goals metrics visualisations isn't sticky making the report hard to impossible to use

[tsteur]

I'm on /index.php?module=CoreHome&action=index&idSite=12&period=week&date=today#?idSite=1&period=month&date=2022-08-26&category=General_Actions&subcategory=General_Pages

Then I change visualisation to "Display a table with goal metrics".

Then I scroll down.

Expected: The header row stay on top always visible when scrolling down.

Actual: The header row becomes invisible once you scroll down too far.

Then the visualisation becomes almost impossible to use since you never really know which value is for what goal etc. In the regular Table view the header row remains sticky but not for this visualisation.

[sgiehl]

@tsteur That is actually kind of expected behaviour. The problem is, that the sticky header doesn't work in combination with a x-scroll. So this should actually not only be an issue of the goal viz, but all reports that are wider then available space.

[peterhashair]

To completely fix this, maybe we can use a bootstrap 5 library (https://examples.bootstrap-table.com/#extensions/sticky-header.html), but we have to convert the table js quite a bit.

[sgiehl]

@peterhashair Does that lib support having sticky header and a sticky first column?

[peterhashair]

@sgiehl looks like they have https://examples.bootstrap-table.com/#extensions/fixed-columns.html

[sgiehl]

@peterhashair If you have a look at their implementation details, having sticky header and a sticky first column does not work there as well. At least it is no native support. They are using a sticky header only. The sticky first column is "simulated" by copying the full first column into a new table, that is then positioned absolute above the original table. The scrolling of both tables is then also synced using javascript.

That might be something we could also implement on our own. But iirc we didn't implement something like that initially, as it would be a lot more effort. See #18124