mui · romgrk · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -17,6 +17,7 @@ import {
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
   GridPinnedColumnPosition,
+  GridDimensions,
 } from '@mui/x-data-grid';
 import {
   fastMemo,
@@ -53,6 +54,7 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
   style?: React.CSSProperties;
   indexInSection: number;
   sectionLength: number;
+  dimensions: GridDimensions;
 }
 
 type OwnerState = DataGridProProcessedProps & {
@@ -103,6 +105,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       style: styleProp,
       indexInSection,
       sectionLength,
+      dimensions,
       ...other
     } = props;
 
@@ -271,6 +274,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       indexInSection,
       sectionLength,
       rootProps.showCellVerticalBorder,
+      dimensions,
     );
 
     const ownerState: OwnerState = {
@@ -378,6 +382,41 @@ GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
+  dimensions: PropTypes.shape({
+    bottomContainerHeight: PropTypes.number.isRequired,
+    columnsTotalWidth: PropTypes.number.isRequired,
+    contentSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    hasScrollX: PropTypes.bool.isRequired,
+    hasScrollY: PropTypes.bool.isRequired,
+    headerHeight: PropTypes.number.isRequired,
+    headersTotalHeight: PropTypes.number.isRequired,
+    isReady: PropTypes.bool.isRequired,
+    leftPinnedWidth: PropTypes.number.isRequired,
+    minimumSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    rightPinnedWidth: PropTypes.number.isRequired,
+    root: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    rowHeight: PropTypes.number.isRequired,
+    rowWidth: PropTypes.number.isRequired,
+    scrollbarSize: PropTypes.number.isRequired,
+    topContainerHeight: PropTypes.number.isRequired,
+    viewportInnerSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    viewportOuterSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
   hasFocus: PropTypes.bool,
   /**
    * Class name that will be added in the column header cell.

diff --git a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -138,6 +138,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           style={style}
           indexInSection={i}
           sectionLength={renderedColumns.length}
+          dimensions={dimensions}
           {...rootProps.slotProps?.headerFilterCell}
         />,
       );

diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx
@@ -420,6 +420,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
         pinnedPosition={pinnedPosition}
         sectionIndex={indexInSection}
         sectionLength={sectionLength}
+        dimensions={dimensions}
         {...slotProps?.cell}
       />
     );

diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx
@@ -31,6 +31,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
+import { GridDimensions } from '../../hooks/features/dimensions';
 import type {
   DataGridProcessedProps,
   DataGridProcessedPropsWithShared,
@@ -67,6 +68,7 @@ export type GridCellProps = {
   pinnedPosition: PinnedPosition;
   sectionIndex: number;
   sectionLength: number;
+  dimensions: GridDimensions;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
@@ -167,6 +169,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
     pinnedPosition,
     sectionIndex,
     sectionLength,
+    dimensions,
     onClick,
     onDoubleClick,
     onMouseDown,
@@ -270,6 +273,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
     sectionIndex,
     sectionLength,
     rootProps.showCellVerticalBorder,
+    dimensions,
   );
 
   const ownerState = {
@@ -486,6 +490,41 @@ GridCell.propTypes = {
   colIndex: PropTypes.number.isRequired,
   colSpan: PropTypes.number,
   column: PropTypes.object.isRequired,
+  dimensions: PropTypes.shape({
+    bottomContainerHeight: PropTypes.number.isRequired,
+    columnsTotalWidth: PropTypes.number.isRequired,
+    contentSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    hasScrollX: PropTypes.bool.isRequired,
+    hasScrollY: PropTypes.bool.isRequired,
+    headerHeight: PropTypes.number.isRequired,
+    headersTotalHeight: PropTypes.number.isRequired,
+    isReady: PropTypes.bool.isRequired,
+    leftPinnedWidth: PropTypes.number.isRequired,
+    minimumSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    rightPinnedWidth: PropTypes.number.isRequired,
+    root: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    rowHeight: PropTypes.number.isRequired,
+    rowWidth: PropTypes.number.isRequired,
+    scrollbarSize: PropTypes.number.isRequired,
+    topContainerHeight: PropTypes.number.isRequired,
+    viewportInnerSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    viewportOuterSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
   disableDragEvents: PropTypes.bool,
   editCellState: PropTypes.shape({
     changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx
@@ -5,6 +5,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { GridDimensions } from '../../hooks/features/dimensions';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
@@ -30,6 +31,7 @@ interface GridColumnGroupHeaderProps {
   style?: React.CSSProperties;
   indexInSection: number;
   sectionLength: number;
+  dimensions: GridDimensions;
 }
 
 type OwnerState = {
@@ -91,6 +93,7 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
     style,
     indexInSection,
     sectionLength,
+    dimensions,
   } = props;
 
   const rootProps = useGridRootProps();
@@ -129,6 +132,7 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
     indexInSection,
     sectionLength,
     rootProps.showCellVerticalBorder,
+    dimensions,
   );
 
   const ownerState = {

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -4,6 +4,7 @@ import { unstable_composeClasses as composeClasses, unstable_useId as useId } fr
 import { fastMemo } from '../../utils/fastMemo';
 import { GridStateColDef } from '../../models/colDef/gridColDef';
 import { GridSortDirection } from '../../models/gridSortModel';
+import { GridDimensions } from '../../hooks/features/dimensions';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
@@ -36,6 +37,7 @@ interface GridColumnHeaderItemProps {
   style?: React.CSSProperties;
   indexInSection: number;
   sectionLength: number;
+  dimensions: GridDimensions;
 }
 
 type OwnerState = GridColumnHeaderItemProps & {
@@ -104,6 +106,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     pinnedPosition,
     indexInSection,
     sectionLength,
+    dimensions,
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -129,6 +132,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     indexInSection,
     sectionLength,
     rootProps.showCellVerticalBorder,
+    dimensions,
   );
 
   const ownerState = {
@@ -311,6 +315,41 @@ GridColumnHeaderItem.propTypes = {
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
   columnMenuOpen: PropTypes.bool.isRequired,
+  dimensions: PropTypes.shape({
+    bottomContainerHeight: PropTypes.number.isRequired,
+    columnsTotalWidth: PropTypes.number.isRequired,
+    contentSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    hasScrollX: PropTypes.bool.isRequired,
+    hasScrollY: PropTypes.bool.isRequired,
+    headerHeight: PropTypes.number.isRequired,
+    headersTotalHeight: PropTypes.number.isRequired,
+    isReady: PropTypes.bool.isRequired,
+    leftPinnedWidth: PropTypes.number.isRequired,
+    minimumSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    rightPinnedWidth: PropTypes.number.isRequired,
+    root: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    rowHeight: PropTypes.number.isRequired,
+    rowWidth: PropTypes.number.isRequired,
+    scrollbarSize: PropTypes.number.isRequired,
+    topContainerHeight: PropTypes.number.isRequired,
+    viewportInnerSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+    viewportOuterSize: PropTypes.shape({
+      height: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
   disableReorder: PropTypes.bool,
   filterItemsCounter: PropTypes.number,
   hasFocus: PropTypes.bool,

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx
@@ -61,7 +61,7 @@ function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps) {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     <div
       className={classes.root}
-      style={{ minHeight: height, opacity: rootProps.showColumnVerticalBorder ? 0 : 1 }}
+      style={{ minHeight: height, opacity: rootProps.showColumnVerticalBorder ? 1 : 0 }}
       {...other}
       onClick={stopClick}
     >

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -647,6 +647,9 @@ export const GridRootStyles = styled('div', {
     [`& .${c.filler}`]: {
       flex: 1,
     },
+    [`& .${c['filler--borderTop']}`]: {
+      borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+    },
   };
 
   return gridStyle;

diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -292,6 +292,11 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   filler: string;
+  /**
+   * Styles applied to the filler row with top border.
+   * @ignore - do not document.
+   */
+  'filler--borderTop': string;
   /**
    * Styles applied to the filler row pinned left section.
    * @ignore - do not document.
@@ -675,6 +680,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'editBooleanCell',
   'editInputCell',
   'filler',
+  'filler--borderTop',
   'filler--pinnedLeft',
   'filler--pinnedRight',
   'filterForm',

diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import { styled, useTheme } from '@mui/material/styles';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { useGridSelector } from '../../utils';
@@ -194,7 +195,12 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       <React.Fragment>
         {isNotPinned && <div role="presentation" style={{ width: leftOffsetWidth }} />}
         {children}
-        {isNotPinned && <div role="presentation" className={gridClasses.filler} />}
+        {isNotPinned && (
+          <div
+            role="presentation"
+            className={clsx(gridClasses.filler, borderTop && gridClasses['filler--borderTop'])}
+          />
+        )}
         {hasScrollbarFiller && (
           <ScrollbarFiller header borderTop={borderTop} pinnedRight={isPinnedRight} />
         )}
@@ -275,6 +281,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           style={style}
           indexInSection={i}
           sectionLength={renderedColumns.length}
+          dimensions={dimensions}
           {...other}
         />,
       );
@@ -435,6 +442,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           style={style}
           indexInSection={indexInSection}
           sectionLength={renderedColumns.length}
+          dimensions={dimensions}
         />
       );
     });

diff --git a/packages/x-data-grid/src/utils/cellBorderUtils.ts b/packages/x-data-grid/src/utils/cellBorderUtils.ts
@@ -1,18 +1,29 @@
+import { GridDimensions } from '../hooks/features/dimensions';
 import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
 
 export const shouldCellShowRightBorder = (
   pinnedPosition: GridPinnedColumnPosition | undefined,
   indexInSection: number,
   sectionLength: number,
   showCellVerticalBorderRootProp: boolean,
+  dimensions: GridDimensions,
 ) => {
   const isSectionLastCell = indexInSection === sectionLength - 1;
 
-  return (
-    (showCellVerticalBorderRootProp &&
-      (pinnedPosition !== GridPinnedColumnPosition.LEFT ? !isSectionLastCell : true)) ||
-    (pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell)
-  );
+  if (pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell) {
+    return true;
+  }
+  if (showCellVerticalBorderRootProp) {
+    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+      return true;
+    }
+    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
+      return !isSectionLastCell;
+    }
+    // pinnedPosition === undefined, middle section
+    return !isSectionLastCell || dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+  }
+  return false;
 };
 
 export const shouldCellShowLeftBorder = (