Sticky table headers

[Nicklas Nordborg]

If possible, it would be nice to have column headers in table listing to be sticky. In Firefox, it seems to be as easy as setting:

thead { position: sticky; }

It doesn't work in Microsoft Edge or Chrome yet: ​https://caniuse.com/?search=sticky

Update 2021-06-15: This seems to be implemented now in Chrome 91. I guess it will come to Edge as well soon.

There is also an issue with having a table with border-collapse: collapse; since this will cause all borders to go away on the sticky element.

[Nicklas Nordborg]

In 7930:

References #2246: Sticky table headers

Started to implement this. In order to not break existing tables, the sticky-headers class must be set on lists that should have sticky headers. Tested on the extracts list page so far.

Note! The implementation only works with Firefox since it is the only browser that currently supports position: sticky; on the <thead> element. Other browsers support it on <th> elements, but we can't use that since we have more than one header row in the tables.

[Nicklas Nordborg]

In 7931:

References #2246: Sticky table headers

Fixes incorrect z-index on the menu items causing the menu to display below the sticky table header.

[Nicklas Nordborg]

In 7932:

References #2246: Sticky table headers

Implemented for all item list pages and a few other places:

• Extensions installation dialog
• Administrate / Services list page
• Batch inherit annotations
• Manage list presets
• List of changed item in view job dialog

[Nicklas Nordborg]

In 7933:

References #2246: Sticky table headers

Added support for setting sticky columns. The idea is to have the counter/checkbox/icon column sticky as well as the "Name" column for all item lists. This has been implemented in the samples list page.

[Nicklas Nordborg]

In 7934:

References #2246: Sticky table headers

Added support for setting sticky columns. The idea is to have the counter/checkbox/icon column sticky as well as the "Name" column for all item lists. This has been implemented in the samples list page.

[Nicklas Nordborg]

In 7935:

References #2246: Sticky table headers

Fixed an issue with columns that had subtitles.

Implemented a callback method using the IntersectionObserver API to detect when a column becomes "stuck" to either the left or right. The callback will toggle "stuck-left" and "stuck-right" classes on the main table element. In the CSS this is used to set a solid border to either the left or right on the stuck column.

Tested on samples, extracts and raw bioassays list pages.

[Nicklas Nordborg]

In 7936:

References #2246: Sticky table headers

Implemented on all list page under the Biomaterial LIMS menu.

[Nicklas Nordborg]

In 7937:

References #2246: Sticky table headers

Implemented for some more list pages.

[Nicklas Nordborg]

In 7938:

References #2246: Sticky table headers

Implemented for all items in the "View" menu.

[Nicklas Nordborg]

In 7939:

References #2246: Sticky table headers

It should now be implemented on all list pages.