Example of fixed table header with recycle-list

[thomasrosdahl]

Could you please provide an example of this? Should I use slots? If so there only seems to be an after-container slot with recycle-list. So not sure how to get something like a position: sticky element in there.

Thanks,

Thomas

[Akryum]

I guess a sticky position on an element in the before or after-container slots would do the trick.

[gambolputty]

I tested this with Dynamic Scroller, setting an element inside the before slot to position: sticky and it didn't work. Setting the slot container instead to position: sticky worked (and adding a z-index property).

[ghost]

I tested this with Dynamic Scroller, setting an element inside the before slot to position: sticky and it didn't work. Setting the slot container instead to position: sticky worked (and adding a z-index property).

I have the similar issue https://github.com/Akryum/vue-virtual-scroller/issues/811 but I need to declare sticky elements inside the default slot. It doesn't work due to overflow: hidden on a DynamicScroller wrapper element.

[EmilyRagan]

I tested this with Dynamic Scroller, setting an element inside the before slot to position: sticky and it didn't work. Setting the slot container instead to position: sticky worked (and adding a z-index property).

This comment is for people looking to do this, but are lost on the actual practical "how": In order to do this, I added a class name on my <DynamicScroller class="dynamic-scroller" />, and then had to use non-scoped styling to grab the slots:

<style lang="scss">
// Sneaky way to get the footer to stick at the bottom of the list
// Set all div.vue-recycle-scroller__slot to stick to the bottom, but then override the first-child (header) to stick to the top
.dynamic-scroller > div.vue-recycle-scroller__slot {
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.dynamic-scroller > div.vue-recycle-scroller__slot:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
}
</style>