[DataGrid] Fix column separators

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -1269,6 +1269,12 @@
       "description": "Styles applied to the column header if the column has a filter applied to it.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--last",
+      "className": "MuiDataGridPremium-columnHeader--last",
+      "description": "Styles applied to the last column header element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--moving",
       "className": "MuiDataGridPremium-columnHeader--moving",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -1186,6 +1186,12 @@
       "description": "Styles applied to the column header if the column has a filter applied to it.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--last",
+      "className": "MuiDataGridPro-columnHeader--last",
+      "description": "Styles applied to the last column header element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--moving",
       "className": "MuiDataGridPro-columnHeader--moving",

docs/pages/x/api/data-grid/data-grid.json

@@ -1072,6 +1072,12 @@
       "description": "Styles applied to the column header if the column has a filter applied to it.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--last",
+      "className": "MuiDataGrid-columnHeader--last",
+      "description": "Styles applied to the last column header element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--moving",
       "className": "MuiDataGrid-columnHeader--moving",

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -802,6 +802,10 @@
       "nodeName": "the column header",
       "conditions": "the column has a filter applied to it"
     },
+    "columnHeader--last": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last column header element"
+    },
     "columnHeader--moving": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -740,6 +740,10 @@
       "nodeName": "the column header",
       "conditions": "the column has a filter applied to it"
     },
+    "columnHeader--last": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last column header element"
+    },
     "columnHeader--moving": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -629,6 +629,10 @@
       "nodeName": "the column header",
       "conditions": "the column has a filter applied to it"
     },
+    "columnHeader--last": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last column header element"
+    },
     "columnHeader--moving": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",

packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { fastMemo } from '../../utils/fastMemo';
 import { GridStateColDef } from '../../models/colDef/gridColDef';
@@ -9,7 +10,7 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
@@ -25,6 +26,7 @@ interface GridColumnHeaderItemProps {
   headerHeight: number;
   isDragging: boolean;
   isResizing: boolean;
+  isLast: boolean;
   sortDirection: GridSortDirection;
   sortIndex?: number;
   filterItemsCounter?: number;
@@ -94,6 +96,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     colIndex,
     headerHeight,
     isResizing,
+    isLast,
     sortDirection,
     sortIndex,
     filterItemsCounter,
@@ -293,7 +296,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
       width={colDef.computedWidth}
       columnMenuIconButton={columnMenuIconButton}
       columnTitleIconButtons={columnTitleIconButtons}
-      headerClassName={headerClassName}
+      headerClassName={clsx(headerClassName, isLast && gridClasses['columnHeader--last'])}
       label={label}
       resizable={!rootProps.disableColumnResize && !!colDef.resizable}
       data-field={colDef.field}
@@ -321,6 +324,7 @@ GridColumnHeaderItem.propTypes = {
   headerHeight: PropTypes.number.isRequired,
   indexInSection: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
+  isLast: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
   pinnedPosition: PropTypes.oneOf(['left', 'right']),
   sectionLength: PropTypes.number.isRequired,

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 ? 1 : 0 }}
+      style={{ minHeight: height, opacity: rootProps.showColumnVerticalBorder ? 0 : 1 }}
       {...other}
       onClick={stopClick}
     >

packages/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -279,6 +279,8 @@ export const GridRootStyles = styled('div', {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
+    },
+    [`& .${c['columnHeader--last']}`]: {
       overflow: 'hidden',
     },
     [`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]:

packages/x-data-grid/src/constants/gridClasses.ts

@@ -117,6 +117,10 @@ export interface GridClasses {
    * Styles applied to the selection checkbox element.
    */
   checkboxInput: string;
+  /**
+   * Styles applied to the column header element.
+   */
+  columnHeader: string;
   /**
    * Styles applied to the column header if `headerAlign="center"`.
    */
@@ -156,9 +160,9 @@ export interface GridClasses {
   'columnHeader--pinnedLeft': string;
   'columnHeader--pinnedRight': string;
   /**
-   * Styles applied to the column header element.
+   * Styles applied to the last column header element.
    */
-  columnHeader: string;
+  'columnHeader--last': string;
   /**
    * Styles applied to the header checkbox cell element.
    */
@@ -635,6 +639,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'cellSkeleton',
   'cellOffsetLeft',
   'checkboxInput',
+  'columnHeader',
   'columnHeader--alignCenter',
   'columnHeader--alignLeft',
   'columnHeader--alignRight',
@@ -646,7 +651,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnHeader--filtered',
   'columnHeader--pinnedLeft',
   'columnHeader--pinnedRight',
-  'columnHeader',
+  'columnHeader--last',
   'columnHeaderCheckbox',
   'columnHeaderDraggableContainer',
   'columnHeaderTitle',

packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -275,6 +275,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           colDef={colDef}
           colIndex={columnIndex}
           isResizing={resizeCol === colDef.field}
+          isLast={columnIndex === columnPositions.length - 1}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
           pinnedPosition={pinnedPosition}