Virtual Grid
Hello, I don't have a specific css question. It is rather a "how would you achieve this" question.
I have a really large table (realised with grid) and due to the filter options, the site gets really slow because it has to rerender a lot of nodes.
So I decided to build a script which computes which cells are currently visible and which ones are not.
So far so good, but instead of grid, I'm using absolute positioning and transform to place the cells where they need to be. (in order to keep the scrolling effect)
I also need to have the first column fixed and it works on desktop devices but on touch devices it does not work really well.
This is because I'm using the scroll event to determine the coordinates of my fixed column and the scroll event on mobile devices troggers differently.
I hope you know what I want to achieve and maybe you can give me some ideas on how you would try to achieve this.
Here is my current work:
https://stackblitz.com/edit/nuxt-starter-q6mezz?file=components%2FVirtualTable.vue
raphi-0901
StackBlitz
Nuxt - Starter (forked) - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
0 Replies