Is prepending items available in GroupedVirtuoso?

[ysael]

https://virtuoso.dev/prepend-items/

We are trying to implement this example wile using GroupedVirtuoso and we get this error as soon as we start using the firstItemIndex property.

also wondering if we got this right:

firstItemIndex = total of items to be loaded - the one we have loaded

In our case we are grouping by date so total of items to be loaded is difficult if not impossible to calculate as we will need to take account for the header?

thanks a lot for the great work ❤️ and I will gladly contribute again if needed :)

[petyosi]

Hey @ysael,

Love to see you around! Unfortunately, pretending items in grouped mode is not supported yet, purely because of an algorithm that I need to fry my brain on. If you want to give it a go at some point, I would love to help!

Here's the code that takes care of the "unshift" process. Apart from the algorithm complexity (sizes, offsets, and group offsets need to be rebuilt), implementing this support should be fairly isolated to the size system.

I might give this a go at some point too, the UI you have screenshotted is very tempting.

[petyosi]

P.S. Forgot to confirm that your understanding of firstItemIndex is correct.

[ysael]

Thanks a lot for the quick response, I will take a look asap! 👀

[ysael]

quick question @petyosi do you know a way to achieve prepending items in grouped mode with the current code base? thanks again :)

[petyosi]

I think you might achieve that by re-mounting the component (by passing a different key prop) and passing different groupCounts and initialTopMostItemIndex. Not an optimal solution, even if it works.

[muyiwaoyeniyi]

+1

[jonathaneckman]

I could use this as well. I tried to add the feature myself but I couldn't get there. The only thing I was able to shake out of the experiment that may be of value is an e2e example showing:

• a list of "events" grouped by day
• initial load shows current day at the top
• infinite scroll into the future (append)
• TODO: infinite scroll into the past (prepend)

Its in my fork if you need it. Front end is not my specialty so sorry for the ugly code.

[acmatson]

We're implementing that scenario as well using GroupedVirtuoso. I came up with workarounds in the 0.x versions, but they have been very unstable. Love that this issue has visibility and looking forward to see this resolved in the codebase!

[mrodrigues95]

Has anyone come up with a solution for this? I'm trying to implement a chat system where messages are grouped by dates but I am having a hard time getting this to work with prepending items and groups.

Is this possible with the current implementation?

[shachar731945]

When is this feature planning to be worked on?

[petyosi]

@shachar731945 are you willing to contribute or sponsor the project?

[nullablemind]

Hey @ysael,

Love to see you around! Unfortunately, pretending items in grouped mode is not supported yet, purely because of an algorithm that I need to fry my brain on. If you want to give it a go at some point, I would love to help!

Here's the code that takes care of the "unshift" process. Apart from the algorithm complexity (sizes, offsets, and group offsets need to be rebuilt), implementing this support should be fairly isolated to the size system.

I might give this a go at some point too, the UI you have screenshotted is very tempting.

I am ready to implement this feature. Could you, @petyosi, tell me what the problem is? So that I think about how to solve it.

[petyosi]

@nullablemind it is not a problem, it is a missing implementation. If you would like to contribute, you can examine the size system and its tests to understand how the sizing data structures work.

[Flaaj]

Is it still a "problem" ? I managed to do two-way infinite scroll chat component with dynamically added data using react-virtuoso and it works quite perfect (although it jumps on prepending items when I try to add overscan / increaseViewportBy, but I dont need those properties after all). It took me a while to figure out how to do it properly so I guess the "easy and developer friendly implementation" is still not here, but I might be wrong.

If any maintainer reads this - please message me if implementation is still needed so I can try to work on it

Basically the main problem is getting correct firstItemIndex. In the API I'm using after fetching each page I get the total amount of messages in the chat, so I'm able to calculate firstItemIndex like this:

const firstItemIndex = totalCount - fetchedMessages.length - minPageNumberFetched * MESSAGES_PER_PAGE;

[petyosi]

I am not understanding what you have done. You can recreate it in a sandbox and post a link here.

[aminmc]

Is it still a "problem" ? I managed to do two-way infinite scroll chat component with dynamically added data using react-virtuoso and it works quite perfect (although it jumps on prepending items when I try to add overscan / increaseViewportBy, but I dont need those properties after all). It took me a while to figure out how to do it properly so I guess the "easy and developer friendly implementation" is still not here, but I might be wrong.

If any maintainer reads this - please message me if implementation is still needed so I can try to work on it

Basically the main problem is getting correct firstItemIndex. In the API I'm using after fetching each page I get the total amount of messages in the chat, so I'm able to calculate firstItemIndex like this:

const firstItemIndex = totalCount - fetchedMessages.length - minPageNumberFetched * MESSAGES_PER_PAGE;

Hey @Flaaj do you have an example of this? When the user scrolls up or down i'd like to reload the data instead of adding to the local state which has the collection. Any help would be appreciated.

[danielsantiago]

@petyosi in our small startup we have just recently released a feature based on Virtuozo, and we are very happy with the result. I see that some new features are under the "sponsor-or-pr" label, in case it helps to give priority to this feature we have become sponsors. We hope that as our product grows we can also move up in the sponsor tier.

[petyosi]

Thanks @danielsantiago - it certainly helps. I love this feature in general (it's the right thing to have) and I will try to make it happen in a reasonable timeframe.

[github-actions[bot]]

:tada: This issue has been resolved in version 4.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[petyosi]

Here's an example of the group prepending in action: https://codesandbox.io/s/sandpack-project-forked-0tle24?file=/index.js