od-virtualscroll icon indicating copy to clipboard operation
od-virtualscroll copied to clipboard

[feature request] Variable item height

Open buu700 opened this issue 7 years ago • 5 comments

Ideally, this option would be able to make itemHeight be treated as a static height for only off-screen items, with items in the viewport being rendered with their normal dynamic heights.

Alternatively, itemHeight could be expanded to accept number|(item: any) => number and/or each item could optionally include a property (something like odVirtualScrollHeight) that would override the default itemHeight for that particular item.

buu700 avatar Apr 28 '17 23:04 buu700

I'm thinking about ways to implement this. One option would be to say that each cell has it's own height but the row height is given by the max height cell in the respective row. So it should be possible to do one single pass on each vsData change to compute meta data on row positions and keep the scroll and resizing performance.

dinony avatar Apr 29 '17 06:04 dinony

By the way, any thoughts at this point on how much effort this feature will take and/or the general timeline on when it might eventually be implemented?

buu700 avatar May 18 '17 15:05 buu700

Can't give you a timeline on that.. If I would know the heights of the cells in advance it would be no problem.. this definitely needs some research..

dinony avatar Jun 07 '17 08:06 dinony

Got it, thanks. Well, in that case, what about an option to do something like this?

  1. Immediately render an item (using some method of keeping it invisible, e.g. moving it off screen in some way or something like pointer-events: none; position: absolute; visibility: hidden;)

  2. Pass a boolean value into the template indicating whether or not it's this initial render

  3. Measure the height of the item

  4. Destroy the item

Edit: Nevermind, this idea probably doesn't make sense. It'd help in some cases where you're incrementally appending items and just don't want too many elements in the DOM at any one time, but if you have a massive list (say, 100k items) right from the start then you're still going to have to render all 100k of those items during the initial load, which defeats the point / would probably crash the browser tab.

I guess the best solution then is probably just some variation of allowing itemHeight to be a function.

buu700 avatar Jun 07 '17 14:06 buu700

Yeah, this feature is not trivial... at least there is this problem, you've added in your edit :/

dinony avatar Jun 12 '17 11:06 dinony