[DataGrid] Fix right column group header border with virtualization

[hendrikpeilke]

• I have followed (at least) the PR section of the contributing guide.

Fixes #15272

[mui-bot]

Deploy preview: https://deploy-preview-15470--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 2189f5c

[hendrikpeilke]

managed to go through the docs and tested it here: https://codesandbox.io/p/sandbox/mui-mui-x-x-data-grid-forked-sxvpym?workspaceId=87160672-f1b6-4335-8c56-44f4aa2c0a2f

The original problem is gone, but now there is a little shade left. I will go on discovery on that one tomorrow:

[hendrikpeilke]

It's the seperator in the grid group header that is hanging there. I have no clue how I can get rid of that. From theory there probably hast to be something inside https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx like

if (!showRightBorder) { /* hide the right seperator */ }

But I need a clue, how to hide that best, since

columnHeaderSeparatorProps={{style: {visibility: "hidden"}}}

seems too dirty.

@KenanYusuf Do you have a clue? Or a material ui best practise?

[KenanYusuf]

Thanks for picking this up @hendrikpeilke

The last column header in the column group should have a MuiDataGrid-columnHeader--last class on it, which when applied, hides the last separator. It looks like that isn't getting applied.

I haven't had a chance to look into it properly, but my guess would be that the value being passed to the isLastColumn prop is incorrect here: https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L459

That would be the first place to look. Will try and dig into it more tomorrow.

[KenanYusuf]

I think we should merge this given it fixes the original issue, and I will follow up with a fix for the problematic separator.

Thank you for your contribution 🏆

[github-actions]

Cherry-pick PRs will be created targeting branches: v7.x