[data grid] Right border calculation on column group headers does not work for last column group header on showColumnVerticalBorder with virtualization

[hendrikpeilke]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-h9qpvr-u62rjb

Steps:

1. Make the demo window small enough in width, that only column group 1 can be seen
2. Reload the demo

Current behavior

You can see an additional, not expected right border on the column group header to the right:

Expected behavior

The right column group header does not show an additional border, i.e. does not have the css class ...--withRightBorder

Context

I'm trying to make a neat looking table with borders and column groups. The issue was adressed in #15086

If the fix from the linked issue works, seems to be dependent on the width of the demo window.

When the last group column is outside the window (or column buffer?) (e.g. window is only wide enough to only show the first column), then the additional border is there.

If the window is wider (e.g. such that the beginning of the last column can be seen), it works again. Thanks to the fix, from the issue mentioned above.

Your environment

npx @mui/envinfo

  Browser: Chrome 130.0.6723.70 (64 bit)

Search keywords: datagrid group header border showColumnVerticalBorder virtualization

[michelengelen]

Thanks for opening a new issue for this @hendrikpeilke ... I see that @KenanYusuf already took it in his hands to fix it! 🚀

[hendrikpeilke]

After looking at the code more thoroughly, I guess the solution would be to use visibleColumnGroupHeader.length as sectionLength in https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L467

It would be similar to https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L310 where it refers to the length of the array, which is iterated over. It works there for the normal headers.

Also what is compared in the end in https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/utils/cellBorderUtils.ts#L3 is the index inside the section with the length of the section. Where the index is coming from the index inside the visbileColumnGroupHeader array, see https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L466, https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L445 and https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L415

It also makes clear why the simple case in #15086 works. Because rowStructure.length equals visibleColumnGroupHeader.length in that case, since all columns are visible.

[KenanYusuf]

@hendrikpeilke thank you for taking a dive into the code to help solve this.

Would you like to open a PR with the change? If not, it's on my list to work on later this week.

[hendrikpeilke]

@KenanYusuf I give it a try.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@hendrikpeilke How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.