I need to recreate this scrolling table experience

Nick Kurz:
I need to recreate this scrolling table experience. Having trouble figuring it out.


Delfs:
Basically it’s just a table with the max rows set to 100


Beverly Voth:
Scrolling table could be an overflow.
Something like this?
https://www.w3schools.com/css/css_table_responsive.asp
(most likely the overflow-y):
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
However, limiting the data is good, too. :slight_smile:


Nick Kurz:
Would rather use the vue-table not HTML, @Delfs

image


Nick Kurz:
I don’t know how to add this class and style to my table.


Andrew Dam:
If it’s an HTML table, set a max height on your table and make sure it doesn’t have overflow-hidden to ensure it’s scrollable. If you want to mimic the lack of a scrollbar on the editor, you can create a new CSS class that removes it. Something like:


Andrew Dam:

/* SCROLL BAR Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {    display: none;}
.no-scrollbar {    -ms-overflow-style: none;    /* IE and Edge */    scrollbar-width: none;    /* Firefox */}

Can check out this page for an example: https://andrewapp.fmbetterforms.com/#/form/FR_7349783D-7535-3443-B77A-977C82D54D99


Nick Kurz:
I’m pretty sure the editor is a vue-table not HTML. I can do it in HTML if need be but I am more familiar and fond of the Vue-tables options api.


Delfs:
Yes it is. We just show 100 rows


Andrew Dam:
Oh sorry, I misread your response, let me throw together an example of a vue-table as well.


Andrew Dam:
@Nick Kurz Here’s an example using a vue-table. This is more or less mimicking the snippet library, which applies the classes to the group itself. Take a look!


Nick Kurz:
This is what I needed, Thanks
h-screen overflow-auto no-scrollbar col-md-2


Beverly Voth:
that “auto” is a wonderful concept! LOL


Dan Rosenstein:
I hope this thread gets ported to the forum - would be a pity to lose :star: