Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#2246 closed enhancement (fixed)

Sticky table headers

Reported by: Nicklas Nordborg Owned by: everyone
Priority: major Milestone: BASE 3.18.1
Component: web Version:
Keywords: Cc:

Description (last modified by 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.

Change History (12)

comment:1 by Nicklas Nordborg, 4 years ago

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.

comment:2 by Nicklas Nordborg, 4 years ago

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.

comment:3 by Nicklas Nordborg, 4 years ago

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


comment:4 by Nicklas Nordborg, 4 years ago

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.

comment:5 by Nicklas Nordborg, 4 years ago

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.

comment:6 by Nicklas Nordborg, 4 years ago

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.

comment:7 by Nicklas Nordborg, 4 years ago

In 7936:

References #2246: Sticky table headers

Implemented on all list page under the Biomaterial LIMS menu.

comment:8 by Nicklas Nordborg, 4 years ago

In 7937:

References #2246: Sticky table headers

Implemented for some more list pages.

comment:9 by Nicklas Nordborg, 4 years ago

In 7938:

References #2246: Sticky table headers

Implemented for all items in the "View" menu.

comment:10 by Nicklas Nordborg, 4 years ago

In 7939:

References #2246: Sticky table headers

It should now be implemented on all list pages.

comment:11 by Nicklas Nordborg, 4 years ago

Resolution: fixed
Status: newclosed

comment:12 by Nicklas Nordborg, 3 years ago

Description: modified (diff)
Note: See TracTickets for help on using tickets.