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

[hendrikpeilke]

Steps to reproduce

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

Steps:

1. Make the demo window a smaller width than the whole table
2. Refresh 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

trying to make a neat looking table with borders and column groups

Your environment

npx @mui/envinfo

  Browser: Chrome 129.0.6668.101 (64 bit)

Search keywords: datagrid group header border showColumnVerticalBorder

[hendrikpeilke]

I think this is caused by passing renderedColumns.length (length of columns, not only the groups, which makes it work if number of groups = number of columns) to the sectionLength property of GridColumnGroupHeader (see https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L467).

This value is used inside GridColumnGroupHeader for the right border calculation (see https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx#L135).

IMHO the value of rowStructure.length should rather be passed to the sectionLength property of GridColumnGroupHeader (see https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L467). But I am not sure, since I don't fully understand the insides of the group header creation.

[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.

[hendrikpeilke]

@KenanYusuf Thank you for the fix. It works great on my simplified example. But having more columns and groups, it does not work out anymore.

I created a forked example with your fixed version here, using some filler columns and groups in between added to the original example: https://stackblitz.com/edit/react-h9qpvr-u62rjb If that 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 show the first column), then the additional border is there. If the window is wider, that the beginning of the last column can be seen, it works again.

Should I open a new issue for that or am I maybe missing something there?

[michelengelen]

Hey @hendrikpeilke it would be great if you could open a new issue. This is probably happening due to virtualization of the columns. I do noticed that the border also somehow disappears, so it would be great to look into this specifically