question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is prepending items available in GroupedVirtuoso?

See original GitHub issue

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.

image

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?
image

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:10
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
petyosicommented, Feb 2, 2021

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.

2reactions
jonathaneckmancommented, Feb 20, 2021

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.

bidirectional-infinite-scroll-grouped-list

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prepending Items - React Virtuoso
Appending items to the list is straightforward - the items at the bottom do not displace the currently rendered ones.
Read more >
Developers - Is prepending items available in GroupedVirtuoso? -
We are trying to implement this example wile using GroupedVirtuoso and we get this error as soon as we start using the firstItemIndex...
Read more >
react-virtuoso | Yarn - Package Manager
Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;; Support for reverse (bottom up) scrolling and...
Read more >
React Virtuoso: The Most Powerful Virtual List Component for ...
The GroupedVirtuoso component is a variant of the "flat" Virtuoso ... For example, passing [20, 30] will render two groups with 20 and...
Read more >
A powerful virtual list component for React
Support for reverse (bottom up) scrolling and prepending items (chat, feeds, etc);; Grouped mode with sticky headers;; Responsive grid layout; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found