Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add grouped mode support #370

Closed
mariia-mitiureva opened this issue Feb 8, 2024 · 4 comments
Closed

Add grouped mode support #370

mariia-mitiureva opened this issue Feb 8, 2024 · 4 comments
Assignees

Comments

@mariia-mitiureva
Copy link
Contributor

Is your feature request related to a problem? Please describe.
Hi, it's me again :) It would be great to have some component that behaves like the storybook Sticky example. But in this example virtual list item is the whole group, which means that I cannot scroll to any item inside a group using scrollToIndex. Also if there are many items in one group, it will break optimisation - all group items will be rendered.

Describe the solution you'd like
For references: virtuoso grouped mode, how Slack groups messages by date -
https://github.com/inokawa/virtua/assets/37265338/e39c7385-9183-42a3-86cd-96e8f2415b3b

Describe alternatives you've considered
I was thinking if it's possible to implement similar behavior on my side using VList, but no solution yet

@inokawa
Copy link
Owner

inokawa commented Feb 8, 2024

Yes, sticky item feature was asked several times, and there are no good way to do it without fork for now.

It will be implemented as a feature like rangeExtractor(#278 (comment)), VListHandle.getItemOffset(#278 (comment)) or else, but not yet decided.

@inokawa inokawa self-assigned this Feb 11, 2024
@morajabi
Copy link

morajabi commented Feb 15, 2024

Will this support 2 levels of nesting of sections? eg. I'd like to group messages per day and per sender inside each day. In order to use native browser position: sticky; for showing sticky elements in each section.

@inokawa
Copy link
Owner

inokawa commented Feb 16, 2024

For now, what I'm planning for the first release is to add a functionality to keep items offscreen at any indexes.
With position: sticky and some styling by user, it will work as sticky header of grouped items.

I'm not familiar to nested sticky styling. I think it depends on markup but perhaps it will work.

@inokawa
Copy link
Owner

inokawa commented Apr 13, 2024

I recreated sticky example based on keepMounted feature added in #429 .
https://inokawa.github.io/virtua/?path=/story/advanced-sticky-group--default
https://github.com/inokawa/virtua/blob/main/stories/react/advanced/Sticky%20Group.stories.tsx

Closing this issue because it will solve the problem originally raised. It will support GroupedVirtuoso-like "global stickiness" but I'm not sure for "ranged stickiness"(explained in #278).
Thank you!

@inokawa inokawa closed this as completed Apr 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants