data table: sticky header

[MarioVanDenEijnde]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Framework7 Version: 1.6.0.

• Platform and Target: Chrome, ETC.

What you did

The table is populated using script (template7)
Tried including:
http://www.fixedheadertable.com/
https://github.com/jmosbech/StickyTableHeaders

Expected Behavior

Keep the tableheader fixed at the top

Actual Behavior

Does not stick

[kivancsahici]

You can also use CSS position sticky attribute for this purpose. This attribute works on Safari and this was also introduced in Google Chrome, recently. On IE, it's not yet fully implemented.

Demo on codepen

http://codepen.io/SitePoint/pen/hewAv

Browser support

http://caniuse.com/css-sticky/embed/

[valnub]

Pull requests and plugins welcome :-)

See

• https://help.github.com/articles/about-pull-requests/
• http://framework7.io/docs/plugins-api.html

[blikblum]

I looked into the issue and here are my finds:

• position: sticky does not work in thead by design

• the proposed workaround is to apply position: sticky to th elements but in F7 will not work because it also does not work inside overflow: auto. See Example

• other workaround is to create a separate table with the header and apply position: sticky in the div.data-table element. It works but the header position is misaligned. Example.

• Finally use transform: translateY as proposed here. This is the solution that works better with minimal code. See Example. But also has a issue. Under Chrome the thead is transparent regardless of setting background. In Firefox the background is opaque as expected.

Glad if someone can point a why the background is transparent in Chrome so we can create a plugin for F7

[Wndworks]

If you use Vue.js, try this:
https://www.npmjs.com/package/vue-floatthead

For me it worked like a charm!