Column grouping doesn't work if columns with same prop values present in different groups

[RK-cuongnq]

@revolist @m2a2x
I am using @revolist/revogrid for my vue3 project. But I encountered an issue.

I want a long header with multiple children. But when I scroll horizontally, the header loss of background color. I checked, and it seems to be due to the transform: translateX being calculated incorrectly.

You can check again and see my evidence I attached.

Thank you, and look forward to receiving a response from you.

scroll.mp4

[m2a2x]

Hi @RK-cuongnq
thanks for posting, seems to be an edge case bug, but not sure

Is there are way for you to make me a codesandbox with this example?
you can take https://codesandbox.io/p/sandbox/rg-start-vue-3-composition-api-3775m4 as starting point and make these kind of headers, I'll take a look how complex is the fix.

Thank you!

[RK-cuongnq]

Hi @m2a2x
I don't know if it's a bug or not, but when the "prop" properties in "children" have the same value then this situation will occur. (see the evidence I attached).

I edited "prop" is to be unique, then this problem solved.

You can check in the codesandbox:
https://codesandbox.io/p/devbox/rg-start-vue-3-composition-api-forked-jrkrgx?workspaceId=ws_N9vwoAYLaiHKZNRbsnM3aN

Thank you!

[m2a2x]

Yes, grouping is based on props atm
{ name: "A9", prop: "A99", size: 55 },
you have this one repeating and so it doesn't now where the grouping starts
could you stick with uniq props in your case?

[m2a2x]

@RK-cuongnq please verify if the fix is working, I made it for you hence already investigated a problem.
#700

Changes are dangerous, so I would prefer double look and test.