Feature Request: grid / horizontal view ?

[akondo06]

Any chance of getting something similar to https://bvaughn.github.io/react-virtualized/#/components/Grid ?

Or maybe horizontal scroll support? ( I do realize "vertical" is in the name ;) ) I have tried nesting two collections (100 row by 300 columns) and seems to almost work.

I will probably give it a shot myself in the following weeks, but would like to know if anyone went down that path already.

• Thanks

[pzuraq]

Our plan was to begin working on a horizontal collection, and then a grid collection, when we had time. Unfortunately, both @runspired and I joined the Ember core teams and have since run out of time to work on this project 😅

I do want to come back to it when I have time, I just really don't know when that'll be. Happy to help guide new feature work and contributions, feel free to ping me on Discord if you need context/help!

[akondo06]

I will give it a shot soon then. Hopefully I'll get back with a PR.

From my digging, my guess on what is needed for a horizontal version is to using scrollLeft instead of scrollTop and width instead of height.

Also, I noticed initialRenderCount .. but it is not documented. Any reason for that?

[pzuraq]

I believe it should be documented, that may be a mistake on our part. The docs were the last thing we needed to finish up for the v1 release.

Yes, for the most part the idea was that you should be able to sub-out scrollLeft with scrollTop and things should Just Work™️. I think we mainly just didn't get around to it.

A couple of other things to note:

• For grid-collection, the most ideal way we could do occlusion and be as performant as VC is by enforcing that we have a stable grid - that is, every cell in a given row is the same height, and every cell in a given column is the same width. Like cells in a spreadsheet or table, in general. Each column or row could vary in height still, just not the cells within them.

  There is also the more general problem of having cells be any height/width at all and flowing them correctly. I think this can still be done performantly, just not as well as grid-collection, so it may make sense to have two different components, one for "pure" grids, and one for any collection of items with any shape.

• There is a non-trivial amount of craziness in the Radar class which was devoted to dealing with Chrome's scroll anchoring behavior, and timing differences caused by it having different default behavior than other browsers. I'm not sure if the overflow-anchor property existed when this project started, I may have missed it, but it turns out that we can disable or enable this behavior.

  My plan was to try to refactor the code to polyfill scroll-anchoring, since it's essentially the behavior we want when we recycle items, but ultimately the best thing we can do for starters is probably to disable it altogether and clean up a lot of the code to make it easier to work with. Anyways, if it seems like things are organized a bit strangely, this was one of the major reasons, and they could probably be done better today.

Let me know if you have any other questions! I'll try to add notes on the code base as I remember things and have time.

[akondo06]

Just the horizontal (new example added to the docs): https://github.com/akondo06/vertical-collection/tree/feature/horizontal

It works i guess? I didn't bother changing the variable names where I didn't had to :) no tests written but tested with latest chrome, firefox, safari and chrome on android. Thoughts?

I will give some thought on the grid-collection but I guess it makes sense to have some limits such as a fixed row height.

In my particular case, the rows have a fixed height and a variable width for cells (well, they have the same width but that changes on container resize).

[akondo06]

someone went a bit further than me ... :) https://github.com/html-next/vertical-collection/pull/269/files

[erichaus]

@akondo06 @pzuraq who is handling peer reviews right now? https://github.com/html-next/vertical-collection/pull/269/? Came here looking to see if a grid display is supported as we use this in an app where now a secondary grid display is requested :)

[erichaus]

https://bvaughn.github.io/react-virtualized/#/components/List really solid https://akryum.github.io/vue-virtual-scroller/#/

[erichaus]

also I may have my concept of "grid" slightly off as the react site depicts grid as "tabular" data, whereas we're looking to display multiple items per row

[pzuraq]

Unfortunately @runspired and I haven't had time to support feature development on this library, and I don't feel comfortable with merging new features with the current state of things. I think the rough plan for this library is:

1. Publish a v2 which removes support for Ember v1 and all but the last Ember v2 versions.
2. Clean up the codebase, get the library into a more stable position.
3. This is where I think we could start introducing new features again, assuming we can find some maintainers who we can get up to speed and who can work in this library effectively.
4. Eventually, I want to work on a v3 of the library that integrates more deeply with Glimmer itself. This will be more of a challenge, but it's also where we will be able to get more speedup compared to the current solution. It also means there will need to be some work in Glimmer itself.

This will take some time, since we're both busy working on Ember/Ember Data directly. Once we get to step 3 where we can have a more modern codebase, I think we can revisit these features.

If anyone would like to get started on the cleanup, I think that would be a great way for us to help get folks up to speed and hand off a lot of the undocumented knowledge of how VC works (in terms of scheduling and hacks around Glimmer).

[akondo06]

@erichonkanen you might get away with some flex-box and a bit of buffer as long as you know how many per row.

[erichaus]

@akondo06 ok good idea, will try thanks!

[erichaus]

@akondo06 any idea what that might look like w/flex? couldn't quite get it using flex, started tinkering w/grid but not clear what that looks like!

need to somehow manipulate a flat list of VC items into 3 column grid using only css.. hmm

[akondo06]

@erichonkanen Here's a somewhat working version: https://github.com/akondo06/vertical-collection/commit/9420d5f5a5d5c0d81eb05bdd4e6f5aa164324b0c

The staticHeight prop must be false. There seems to be a problem with the index, that's why it jumps down to bufferSize * 2. I am not sure about the cause of it.

if that does not suit your needs, you can group the dataset and then render the groups as rows.