How to apply row virtualization for table / list in HTML / CSS / JS?

I would like to create a custom HTML table / list with lots of rows. I need string virtualization, but I'm not sure the best way to achieve this.

By row virtualization, I mean a concept in which the rows of the / ul / div table are not displayed and are not displayed at all until they scroll to the view. In fact, the point is to exclude rendering if the element is never displayed (behind the spiral).

Any ideas? I think that DOM elements should be added to the list as soon as they “scroll”. And then I will need to have an invisible div with the height of the full height of all the lines to make scrolling possible.

Are there any simple code examples that do this?

+5
source share
3 answers

I don't know about “simple” code examples, but I found the following projects that use DOM virtualization

MegaList and SlickGrid

The MegaList example is easiest to understand, as it is simply "ul", which adds list items to it.

+3
source

Infinite scrolling should point you in the right direction.

+1
source

Wijmo 5 FlexGrid implements this behavior. You can find an online comparison here.

0
source

All Articles