Make decision table header / footer sticky

[nikku]

Larger decision tables would massively benefit from sticky headers / footers: Once the user scrolls the table, only the tbody scrolls; the header and footer stays visible. This ensures that the users can always track the relevant context (i.e. column) they are working on.

It's a matter of discussion, whether to expand this to horizontal scrolling, too (always showing the row numbers).

Example

Checkout this demo for a running example of sticky behavior (not using tables, unfortunately).

Notes

Unfortunately, implementing sticky headers is complicated. A new CSS property, position: sticky is on the horizon. It does not work in thead for Chrome and Firefox yet (cf. Chromium bug, demo).

---

Related to SUPPORT-7570

[philippfromme]

+1

[pinussilvestrus]

We are currently tackling this problem in https://github.com/bpmn-io/dmn-js/issues/477. Maybe

[pinussilvestrus]

Some thoughts after hacking a little bit around.

General feeling: There is no easy fix for this problem if we stay with the current way we build the tables (due to the current sticky problem in Chromium).

I tried a couple of different approaches and had a look at how other tools are doing it (like Google Sheets, and other DMN Editors).

Approach 1: https://codesandbox.io/s/decision-table-fixed-header-4jfb1 (Flexbox kind of way)

This one is breaking the table body, so it would need a rebuild of the table structure.

Approach 2: https://codesandbox.io/s/grid-layout-fixed-header-jzbw3 (CSS Grid layout)

Grid layout is the way I've found in many examples (and the tools I mentioned above). It gives a lot of flexibility in creating table structures and find its way now to the common browsers.

I read a couple of articles that pointed out, that whenever it comes to build tables with a sense of advanced interaction and editing capabilities and exceeds the basic table-data visualization, HTML Tables are not the best fit anymore. This would come better with Grids.

Cf. https://www.telerik.com/blogs/the-evolution-of-data-display-from-html-tables-to-advanced-grids

Important Note: I did not invest in a deeper 1:1 comparison and did not build more complex examples with Grids. The things I mentioned were my first impressions only.

Approach 3: https://codesandbox.io/s/table-position-sticky-bunmj (use HTML tables, avoid using thead for stickiness)

That would work but feels dirty in my opinion.

I did not test the second and third approaches inside dmn-js, yet, but I would assume that both would also need a restructuring of our table layout for sure.

Since we're discussing a new decision table layout in #477 at all, it might be a good idea to rebuild it anyway (and maybe go for Grids instead)

[nikku]

Thanks for investigating. Looks like CSS grid (option 2) has appropriate cross-browser support nowadays, too: https://caniuse.com/#search=grid

[MaxTru]

Added this as part of Q4 OKRs.

During initial clarfication, we should also check whether we need sticky row headers.