How to draw table with columns in outside of screen?

[JumpAttacker]

trafficstars

Hey, when im trying to render table with columns in outside of screen i got on this columns only headers without data that's my code https://codesandbox.io/s/vue-virtual-scroller-xs7hb?fontsize=14

i can fix it by adding

.vue-recycle-scroller__item-wrapper,
.vue-recycle-scroller__slot {
  min-width: 3222px;
}

but after this i will have many empty space in horizontal scroll

also i tried to add overflow-x: auto; its fixed it, but with scrolling it will move only data (without headers)

[victor-ponamariov]

+1

[shoxrux1996]

+1

[amidnikmal]

You need to realize scrollWidth of your table row and set it to .vue-recycle-scroller by javascript

[HaloElite]

Same here. The problem causing this is the absolute positioned cell-elements preventing the lines to grow when using inline-flex. Like this I had to use JS to set the overflow to auto. But still the line-items won't grow in width:

nextTick(() => {
        var elem = document.querySelector(".vue-recycle-scroller__item-wrapper")
        if (elem) elem.style.overflow = "auto";
});