[data grid] Row doesn't have a right border

[Mistes974]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://stackblitz.com/edit/react-pxmuva?file=demo.js

Current behavior 😯

As you can see on the example, it's impossible to have a border right on column even if there is no horizontal scroll

Expected behavior 🤔

The customization of the row should allow to have borders

Context 🔦

No response

Your environment 🌎

No response

Order ID 💳 (optional)

No response

[m4theushw]

You can't use the traditional border property because it increases the size of the row. At the same time, the container where the row lives in has overflow: hidden, so if the children increases the size it will be hidden. Instead, you can try adding a shadow with box-shadow: inset 0px 0px 0px 3px <color>;

[Mistes974]

I tried to use the "box-shadow" property as a substitute for the "border" property, but got the same result... what I'm trying to replicate is this kind of UI :

[m4theushw]

If you can use autoHeight here's an example: https://stackblitz.com/edit/react-pxmuva-jq7ilp?file=demo.js

I noticed that, when the scrollbar is present, there's a bug that makes the row to extend beyond the visible part, making the right border invisible. This can be solved with:

diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index 9d2592fd3..322679a90 100644
--- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -249,7 +249,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
 
   const handleResize = React.useCallback<GridEventListener<'debouncedResize'>>((params) => {
     setContainerDimensions({
-      width: params.width,
+      width: rootRef.current?.clientWidth || params.width,
       height: params.height,
     });
   }, []);

When we set setContainerDimensions inside the effect, we use rootRef.current!.clientWidth, which already discounts the scrollbar size (if visible). However, in handleResize we use params.width that ignores the scrollbar size.