@mui/x-data-grid 5.15.3 → 5.16.0

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.16.0
+
+_Aug 25, 2022_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce column grouping for data grid (#5133) @alexfauquette
+
+  You can now group columns using the `columnGroupingModel` prop. This lets you to display more structured data.
+
+  <img src="https://user-images.githubusercontent.com/45398769/186178366-4fba66b2-bf90-4c7a-9d83-940a7fc78704.png" width="800" />
+
+  To enable this feature, add `experimentalFeatures={{ columnGrouping: true }}`.
+  The grouping header can be fully customized.
+  See the [documentation](https://mui.com/x/react-data-grid/column-groups/) to explore everything it has to offer.
+
+- 🐞 Bugfixes
+- 🌏 New locales for pickers thanks to @tesseractjh and @drastus
+
+### `@mui/x-data-grid@v5.16.0` / `@mui/x-data-grid-pro@v5.16.0` / `@mui/x-data-grid-premium@v5.16.0`
+
+#### Changes
+
+- [DataGrid] Implement column grouping (#5133) @alexfauquette
+- [DataGrid] Handle `disableVirtualization` prop change (#5889) @cherniavskii
+- [DataGrid] Improve `GridRowModel` typing (#5734) @cherniavskii
+- [DataGrid] Update deprecation note for `GridColDef` `hide` property (#5886) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.0-beta.7` / `@mui/x-date-pickers-pro@v5.0.0-beta.7`
+
+#### Changes
+
+- [DatePicker] Fix to pass down `className` prop provided on DatePicker to `renderInput` (#5471) @CruseCtrl
+- [DatePicker] Improve `a11y` support (#5809) @LukasTy
+- [pickers] Add `PaperContent` component slot (#5801) @LukasTy
+- [pickers] Add a breaking change section in the migration guide (#5805) @alexfauquette
+- [pickers] Add new translations to `localeText` (#5143) @alexfauquette
+- [pickers] Document components slots (#4657) @flaviendelangle
+- [pickers] Add new unstable field components (#5504) @flaviendelangle
+- [pickers] Fallback to default `minDate` / `maxDate` when `null` value is passed (#5397) @flaviendelangle
+- [l10n] Add Korean (ko-KR) locale (#5854) @tesseractjh
+- [l10n] Add Polish (pl-PL) locale (#5833) @drastus
+
+### Docs
+
+- [docs] Fix typo in `migration from lab` (#5277) @chuckwired
+- [docs] Use `dayjs` instead of `date-fns` in doc examples (#5481) @flaviendelangle
+
+### Core
+
+- [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari
+- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle
+- [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii
+- [core] Remove Firefox from the BrowserStack list (#5874) @DanailH
+- [core] Small changes to the release script (#5840) @m4theushw
+
 ## 5.15.3
 
 _Aug 18, 2022_

package/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -194,6 +195,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool

package/DataGrid/useDataGridComponent.js

@@ -25,6 +25,8 @@ import { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+import { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export const useDataGridComponent = props => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -33,6 +35,7 @@ export const useDataGridComponent = props => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
   /**
@@ -41,6 +44,7 @@ export const useDataGridComponent = props => {
 
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -57,6 +61,7 @@ export const useDataGridComponent = props => {
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/components/DataGridColumnHeaders.js

@@ -18,7 +18,8 @@ export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
     isDragging,
     getRootProps,
     getInnerProps,
-    getColumns
+    getColumnHeaders,
+    getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef
   });
@@ -27,10 +28,10 @@ export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
   }, getRootProps(other), {
     children: [/*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
-      children: getColumns()
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
     })), /*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "right"
     })]

package/components/GridRow.js

@@ -22,6 +22,7 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -82,8 +83,6 @@ function GridRow(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
-
   const apiRef = useGridApiContext();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -91,6 +90,9 @@ function GridRow(props) {
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+
   const {
     hasScrollX,
     hasScrollY
@@ -359,7 +361,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/components/base/GridBody.js

@@ -6,7 +6,7 @@ import { GridAutoSizer } from '../GridAutoSizer';
 import { GridOverlays } from './GridOverlays';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -18,14 +18,17 @@ function GridBody(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
   const enableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(false);
-  }, []); // The `useGridApiMethod` hook can't be used here, because it only installs the
+  }, []);
+  React.useEffect(() => {
+    setIsVirtualizationDisabled(rootProps.disableVirtualization);
+  }, [rootProps.disableVirtualization]); // The `useGridApiMethod` hook can't be used here, because it only installs the
   // method if it doesn't exist yet. Once installed, it's never updated again.
   // This break the methods above, since their closure comes from the first time
   // they were installed. Which means that calling `setIsVirtualizationDisabled`
@@ -60,8 +63,8 @@ function GridBody(props) {
           width: size.width,
           // If `autoHeight` is on, there will be no height value.
           // In this case, let the container to grow whatever it needs.
-          height: size.height ? size.height - headerHeight : 'auto',
-          marginTop: headerHeight
+          height: size.height ? size.height - totalHeaderHeight : 'auto',
+          marginTop: totalHeaderHeight
         };
         return /*#__PURE__*/_jsx(VirtualScrollerComponent, {
           ref: windowRef,

package/components/base/GridOverlays.js

@@ -6,7 +6,7 @@ import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFil
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridOverlayWrapper(props) {
@@ -14,7 +14,7 @@ function GridOverlayWrapper(props) {
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [viewportInnerSize, setViewportInnerSize] = React.useState(() => {
     var _apiRef$current$getRo, _apiRef$current$getRo2;
 
@@ -43,7 +43,7 @@ function GridOverlayWrapper(props) {
       height,
       width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
       position: 'absolute',
-      top: headerHeight,
+      top: totalHeaderHeight,
       bottom: height === 'auto' ? 0 : undefined
     }
   }, props));

package/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface GridColumnGroupHeaderProps {
+    groupId: string | null;
+    width: number;
+    fields: string[];
+    colIndex: number;
+    isLastColumn: boolean;
+    extendRowFullWidth: boolean;
+    depth: number;
+    maxDepth: number;
+    height: number;
+}
+declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): JSX.Element;
+export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_useId as useId } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    headerAlign,
+    isDragging,
+    showRightBorder,
+    showColumnBorder,
+    groupId
+  } = ownerState;
+  const slots = {
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'withBorder', showColumnBorder && 'columnHeader--showColumnBorder', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridColumnGroupHeader(props) {
+  var _apiRef$current$getRo, _columnGroupsLookup$g;
+
+  const {
+    groupId,
+    width,
+    depth,
+    maxDepth,
+    fields,
+    height,
+    colIndex,
+    isLastColumn,
+    extendRowFullWidth
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
+  const {
+    hasScrollX,
+    hasScrollY
+  } = (_apiRef$current$getRo = apiRef.current.getRootDimensions()) != null ? _apiRef$current$getRo : {
+    hasScrollX: false,
+    hasScrollY: false
+  };
+  const group = groupId ? columnGroupsLookup[groupId] : {};
+  const {
+    headerName = groupId != null ? groupId : '',
+    description = '',
+    headerAlign = undefined
+  } = group;
+  let headerComponent;
+  const render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
+  const renderParams = {
+    groupId,
+    headerName,
+    description,
+    depth,
+    maxDepth,
+    fields,
+    colIndex,
+    isLastColumn
+  };
+
+  if (groupId && render) {
+    headerComponent = render(renderParams);
+  }
+
+  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+  const showColumnBorder = rootProps.showColumnRightBorder;
+
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder,
+    showColumnBorder,
+    headerAlign,
+    depth,
+    isDragging: false
+  });
+
+  const label = headerName != null ? headerName : groupId;
+  const id = useId();
+  const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
+  const classes = useUtilityClasses(ownerState);
+  const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, {
+    classes: classes,
+    columnMenuOpen: false,
+    colIndex: colIndex,
+    height: height,
+    isResizing: false,
+    sortDirection: null,
+    hasFocus: false,
+    tabIndex: -1,
+    isDraggable: false,
+    headerComponent: headerComponent,
+    headerClassName: headerClassName,
+    description: description,
+    elementId: elementId,
+    width: width,
+    columnMenuIconButton: null,
+    columnTitleIconButtons: null,
+    resizable: false,
+    label: label,
+    "aria-colspan": fields.length // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
+    ,
+    "data-fields": `|-${fields.join('-|-')}-|`,
+    disableHeaderSeparator: true
+  });
+}
+
+export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
-import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
-import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -38,7 +36,7 @@ const useUtilityClasses = ownerState => {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
+  var _apiRef$current$getRo, _rootProps$components, _column$sortingOrder, _rootProps$components2, _column$headerName;
 
   const {
     column,
@@ -71,12 +69,21 @@ function GridColumnHeaderItem(props) {
     hasScrollY: false
   };
   const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
-  let headerComponent = null;
+  let headerComponent;
 
   if (column.renderHeader) {
     headerComponent = column.renderHeader(apiRef.current.getColumnHeaderParams(column.field));
   }
 
+  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder
+  });
+
+  const classes = useUtilityClasses(ownerState);
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
@@ -86,7 +93,7 @@ function GridColumnHeaderItem(props) {
 
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
   }, [apiRef, column.field]);
-  const mouseEventsHandlers = {
+  const mouseEventsHandlers = React.useMemo(() => ({
     onClick: publish('columnHeaderClick'),
     onDoubleClick: publish('columnHeaderDoubleClick'),
     onMouseOver: publish('columnHeaderOver'),
@@ -100,29 +107,16 @@ function GridColumnHeaderItem(props) {
     onKeyDown: publish('columnHeaderKeyDown'),
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
-  };
-  const draggableEventHandlers = isDraggable ? {
+  }), [publish]);
+  const draggableEventHandlers = React.useMemo(() => isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  } : null;
-  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
-
-  const ownerState = _extends({}, props, {
-    classes: rootProps.classes,
-    showRightBorder
-  });
-
-  const classes = useUtilityClasses(ownerState);
-  const width = column.computedWidth;
-  let ariaSort = 'none';
-
-  if (sortDirection != null) {
-    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
-  }
-
+  } : {}, [isDraggable, publish]);
+  const columnHeaderSeparatorProps = React.useMemo(() => ({
+    onMouseDown: publish('columnSeparatorMouseDown')
+  }), [publish]);
   React.useEffect(() => {
     if (!showColumnMenuIcon) {
       setShowColumnMenuIcon(columnMenuOpen);
@@ -140,13 +134,24 @@ function GridColumnHeaderItem(props) {
     iconButtonRef: iconButtonRef
   });
 
+  const columnMenu = /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    field: column.field,
+    open: columnMenuOpen,
+    target: iconButtonRef.current,
+    ContentComponent: rootProps.components.ColumnMenu,
+    contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+    onExited: handleExited
+  });
+
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
       field: column.field,
       counter: filterItemsCounter
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -168,53 +173,32 @@ function GridColumnHeaderItem(props) {
     colDef: column
   }) : column.headerClassName;
   const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
-  return /*#__PURE__*/_jsxs("div", _extends({
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
     ref: headerCellRef,
-    className: clsx(classes.root, headerClassName),
-    "data-field": column.field,
-    style: {
-      width,
-      minWidth: width,
-      maxWidth: width
-    },
-    role: "columnheader",
+    classes: classes,
+    columnMenuOpen: columnMenuOpen,
+    colIndex: colIndex,
+    height: headerHeight,
+    isResizing: isResizing,
+    sortDirection: sortDirection,
+    hasFocus: hasFocus,
     tabIndex: tabIndex,
-    "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
-  }, mouseEventsHandlers, {
-    children: [/*#__PURE__*/_jsxs("div", _extends({
-      className: classes.draggableContainer,
-      draggable: isDraggable
-    }, draggableEventHandlers, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: classes.titleContainer,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.titleContainerContent,
-          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: label,
-            description: column.description,
-            columnWidth: width
-          })
-        }), columnTitleIconButtons]
-      }), columnMenuIconButton]
-    })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, {
-      resizable: !rootProps.disableColumnResize && !!column.resizable,
-      resizing: isResizing,
-      height: headerHeight,
-      onMouseDown: publish('columnSeparatorMouseDown'),
-      side: separatorSide
-    }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
-      columnMenuId: columnMenuId,
-      columnMenuButtonId: columnMenuButtonId,
-      field: column.field,
-      open: columnMenuOpen,
-      target: iconButtonRef.current,
-      ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
-      onExited: handleExited
-    })]
-  }));
+    separatorSide: separatorSide,
+    isDraggable: isDraggable,
+    headerComponent: headerComponent,
+    description: column.description,
+    elementId: column.field,
+    width: column.computedWidth,
+    columnMenuIconButton: columnMenuIconButton,
+    columnTitleIconButtons: columnTitleIconButtons,
+    headerClassName: headerClassName,
+    label: label,
+    resizable: !rootProps.disableColumnResize && !!column.resizable,
+    "data-field": column.field,
+    columnMenu: columnMenu,
+    draggableContainerProps: draggableEventHandlers,
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+  }, mouseEventsHandlers));
 }
 
 process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {

package/components/columnHeaders/GridColumnHeadersInner.js

@@ -30,7 +30,8 @@ const GridColumnHeadersInnerRoot = styled('div', {
   }, styles.columnHeadersInner]
 })(() => ({
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
   [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
     cursor: 'move'
   },

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
+import { GridSortDirection } from '../../models/gridSortModel';
+import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
+import { GridColumnGroup } from '../../models/gridColumnGrouping';
+interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
+    classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;
+    colIndex: number;
+    columnMenuOpen: boolean;
+    height: number;
+    isResizing: boolean;
+    sortDirection: GridSortDirection;
+    sortIndex?: number;
+    filterItemsCounter?: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
+    disableReorder?: boolean;
+    separatorSide?: GridColumnHeaderSeparatorProps['side'];
+    headerComponent?: React.ReactNode;
+    elementId: GridStateColDef['field'] | GridColumnGroup['groupId'];
+    isDraggable: boolean;
+    width: number;
+    columnMenuIconButton?: React.ReactNode;
+    columnMenu?: React.ReactNode;
+    columnTitleIconButtons?: React.ReactNode;
+    label: string;
+    draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
+    columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;
+    disableHeaderSeparator?: boolean;
+}
+declare const GridGenericColumnHeaderItem: React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps & React.RefAttributes<unknown>>;
+export { GridGenericColumnHeaderItem };