feat: allow grouped table

[maloguertin]

Hi this is probably more of a WIP but I wanted to get your pulse on that. We needed to have sticky group headers in our table and I saw that not much was missing from the table implementation for it to work.

I added an example (group-table.tx)

[petyosi]

This looks about right, but I have not run it locally. Small note - can you use yarn (v1), so that you don't commit the package-lock.json?

[maloguertin]

Alright I will try to get around to that today! Would you prefer to extract it to a separate component like GroupedVirtuoso?

[petyosi]

Good question - I guess yes, since the two modes are not fully compatible.

[maloguertin]

Good question - I guess yes, since the two modes are not fully compatible.

Could you give me more infos on what is not compatible?

[petyosi]

The flat component accepts total count and data. The grouped one accepts groupCounts (grouped data mode is to be done, eventually). Check this: https://github.com/petyosi/react-virtuoso/blob/master/src/components.tsx#L257-L273

[maloguertin]

Thanks!

[maloguertin]

Does this look good to you?

[petyosi]

Sorry, I will have to get back to that over the weekend. Quite a lot going on.

[maloguertin]

No worries, I noticed my implementation makes it so that the last item may be cutoff. It seems like I would need to add height to the viewport when you have a stickied group. Do you have an idea on the best way to implement this.

[petyosi]

This might be a matter of reporting additional height into the internal system. fixedHeaderHeight, I believe, but it might be tricky since that's already in use from the table header.

[maloguertin]

I was wrong actually in my actual project I had a missing forward ref on a HeaderComponent, the problem is actually the inverse, there is too much height on the bottom, I'm guessing it's because the stickied group is not substracted from the totalHeight.

[maloguertin]

I fixed the conflicts and followed the new file structures for the interfaces

[adirzoari]

@maloguertin @petyosi can you add option to TableVirtuoso to have context props too? I want to pass TableBody any state variable but I don't have an option without context

[breitman]

Hey all, I am currently using GroupedVirtuoso and I need a fixed header atop the actual grouped table, and this seems like it would do the trick. Do we have an idea when this might be merged and released?

[petyosi]

I think there was something unresolved in the PR?

the problem is actually the inverse, there is too much height on the bottom, I'm guessing it's because the stickied group is not substracted from the totalHeight.

[maloguertin]

I haven't had time to look into this for a while. I have managed to mostly make it work by setting a negative margin to compensate for the height inequality but it's more of a hacky solution.

[khmelevskii]

What the status of this PR? Is it too outdated and will be difficult to merge? What need to fix to be able to merge it and support grouped table.
Maybe I will try to find time for this soon

[sriranjanivenkatesan]

hello @maloguertin , Will this feature be made available anytime soon:) ?