@mui/x-data-grid-premium 8.9.1 → 8.10.0

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridVirtualizer, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
@@ -17,6 +17,7 @@ import { useGridClipboardImport } from "../hooks/features/clipboard/useGridClipb
 import { pivotingStateInitializer, useGridPivoting, useGridPivotingExportState } from "../hooks/features/pivoting/useGridPivoting.js";
 import { gridPivotPropsOverridesSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
 import { useGridAiAssistant, aiAssistantStateInitializer } from "../hooks/features/aiAssistant/useGridAiAssistant.js";
+import { useGridSidebar, sidebarStateInitializer } from "../hooks/features/sidebar/useGridSidebar.js";
 export const useDataGridPremiumComponent = (apiRef, inProps) => {
   const pivotPropsOverrides = useGridSelector(apiRef, gridPivotPropsOverridesSelector);
   const props = React.useMemo(() => {
@@ -62,10 +63,12 @@ export const useDataGridPremiumComponent = (apiRef, inProps) => {
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props, key);
   useGridInitializeState(aggregationStateInitializer, apiRef, props, key);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
+  useGridInitializeState(rowReorderStateInitializer, apiRef, props);
   useGridInitializeState(cellSelectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props, key);
   useGridInitializeState(columnsStateInitializer, apiRef, props, key);
+  useGridInitializeState(sidebarStateInitializer, apiRef, props);
   useGridInitializeState(pivotingStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
@@ -87,6 +90,8 @@ export const useDataGridPremiumComponent = (apiRef, inProps) => {
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
+  useGridVirtualizer(apiRef, props);
+  useGridSidebar(apiRef, props);
   useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);

package/esm/components/GridColumnMenuPivotItem.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import { gridPivotPanelOpenSelector } from '@mui/x-data-grid-pro/internals';
+import { gridPivotPanelOpenSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridSidebarValue } from "../hooks/features/sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuPivotItem(props) {
   const {
@@ -13,7 +14,7 @@ export function GridColumnMenuPivotItem(props) {
   const isPivotPanelOpen = useGridSelector(apiRef, gridPivotPanelOpenSelector);
   const openPivotSettings = event => {
     onClick(event);
-    apiRef.current.setPivotPanelOpen(true);
+    apiRef.current.showSidebar(GridSidebarValue.Pivot);
   };
   return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: openPivotSettings,

package/esm/components/GridDataSourceGroupingCriteriaCell.js

@@ -34,7 +34,9 @@ function GridGroupingCriteriaCellIcon(props) {
       // always fetch/get from cache the children when the node is expanded
       apiRef.current.dataSource.fetchRows(id);
     } else {
-      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+      // Collapse the node and remove child rows from the grid
+      apiRef.current.setRowChildrenExpansion(id, false);
+      apiRef.current.removeChildrenRows(id);
     }
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();

package/esm/components/pivotPanel/GridPivotPanelHeader.js

@@ -73,7 +73,7 @@ function GridPivotPanelHeader(props) {
         })
       }, rootProps.slotProps?.baseSwitch)), /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         onClick: () => {
-          apiRef.current.setPivotPanelOpen(false);
+          apiRef.current.hideSidebar();
           if (isEmptyPivot) {
             apiRef.current.setPivotActive(false);
           }

package/esm/components/pivotPanel/PivotPanelTrigger.js

@@ -10,6 +10,7 @@ import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridPivotPanelOpenSelector, gridPivotActiveSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { GridSidebarValue } from "../../hooks/features/sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that opens and closes the pivot panel.
@@ -42,7 +43,11 @@ const PivotPanelTrigger = forwardRef(function PivotPanelTrigger(props, ref) {
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const handleClick = event => {
-    apiRef.current.setPivotPanelOpen(!open);
+    if (open) {
+      apiRef.current.hideSidebar();
+    } else {
+      apiRef.current.showSidebar(GridSidebarValue.Pivot, panelId, buttonId);
+    }
     onClick?.(event);
   };
   const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {

package/esm/components/sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export type SidebarProps = React.HTMLAttributes<HTMLDivElement>;
-declare function Sidebar(props: SidebarProps): React.JSX.Element;
+declare function Sidebar(props: SidebarProps): React.JSX.Element | null;
 export { Sidebar };

package/esm/components/sidebar/Sidebar.js

@@ -4,10 +4,12 @@ const _excluded = ["className", "children"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { ResizablePanel, ResizablePanelHandle } from "../resizablePanel/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridSidebarContentSelector } from "../../hooks/features/sidebar/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -31,17 +33,31 @@ const SidebarRoot = styled(ResizablePanel, {
 });
 function Sidebar(props) {
   const {
-      className,
-      children
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const {
+    value,
+    sidebarId,
+    labelId
+  } = useGridSelector(apiRef, gridSidebarContentSelector);
+  if (!value) {
+    return null;
+  }
+  const sidebarContent = apiRef.current.unstable_applyPipeProcessors('sidebar', null, value);
+  if (!sidebarContent) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(SidebarRoot, _extends({
+    id: sidebarId,
     className: clsx(className, classes.root),
-    ownerState: rootProps
+    ownerState: rootProps,
+    "aria-labelledby": labelId
   }, other, {
-    children: [/*#__PURE__*/_jsx(ResizablePanelHandle, {}), children]
+    children: [/*#__PURE__*/_jsx(ResizablePanelHandle, {}), sidebarContent]
   }));
 }
 export { Sidebar };

package/esm/hooks/features/aggregation/gridAggregationInterfaces.d.ts

@@ -47,7 +47,7 @@ export interface GridAggregationFunction<V = any, AV = V> {
    * @param {GridApiPremium} api The grid API.
    * @returns {AV} The aggregated value.
    */
-  apply: (params: GridAggregationParams<V>, api: GridApiPremium) => AV | null | undefined;
+  apply: (params: GridAggregationParams<V>, api?: GridApiPremium) => AV | null | undefined;
   /**
    * Label of the aggregation function.
    * Used for adding a label to the footer of the grouping column when this aggregation function is the only one being used.

package/esm/hooks/features/aiAssistant/api.d.ts

@@ -1,4 +1,4 @@
-import { PromptResponse } from "./gridAiAssistantInterfaces.js";
+import { PromptResponse, PromptResolverOptions } from "./gridAiAssistantInterfaces.js";
 /**
  * Prompt resolver for the <DataGridPremium /> component.
  * @param {string} url The URL to send the request to.
@@ -6,7 +6,7 @@ import { PromptResponse } from "./gridAiAssistantInterfaces.js";
  * @param {string} context The prompt context containing necessary information about the current columns definition.
  * Either use the `context` parameter of the `onPrompt` callback or the return value of the `unstable_getPromptContext()` API method.
  * @param {string} conversationId The id of the conversation the prompt is part of. If not passed, prompt response will return a new conversation id that can be used to continue the newly started conversation.
- * @param {string} additionalContext Optional, additional context to make the processing results more accurate.
+ * @param {string | PromptResolverOptions} optionsOrAdditionalContext Optional, includes settings to extend and customize the prompt resolver's behaviour, or additional context string for backward compatibility.
  * @returns {Promise<PromptResponse>} The grid state updates to be applied.
  */
-export declare function gridDefaultPromptResolver(url: string, query: string, context: string, conversationId?: string, additionalContext?: string): Promise<PromptResponse>;
+export declare function gridDefaultPromptResolver(url: string, query: string, context: string, conversationId?: string, optionsOrAdditionalContext?: string | PromptResolverOptions): Promise<PromptResponse>;

package/esm/hooks/features/aiAssistant/api.js

@@ -5,10 +5,14 @@
  * @param {string} context The prompt context containing necessary information about the current columns definition.
  * Either use the `context` parameter of the `onPrompt` callback or the return value of the `unstable_getPromptContext()` API method.
  * @param {string} conversationId The id of the conversation the prompt is part of. If not passed, prompt response will return a new conversation id that can be used to continue the newly started conversation.
- * @param {string} additionalContext Optional, additional context to make the processing results more accurate.
+ * @param {string | PromptResolverOptions} optionsOrAdditionalContext Optional, includes settings to extend and customize the prompt resolver's behaviour, or additional context string for backward compatibility.
  * @returns {Promise<PromptResponse>} The grid state updates to be applied.
  */
-export function gridDefaultPromptResolver(url, query, context, conversationId, additionalContext = '') {
+export function gridDefaultPromptResolver(url, query, context, conversationId, optionsOrAdditionalContext = '') {
+  // Handle backward compatibility: if string is passed, treat it as additionalContext
+  const options = typeof optionsOrAdditionalContext === 'string' ? {
+    additionalContext: optionsOrAdditionalContext
+  } : optionsOrAdditionalContext;
   return fetch(url, {
     mode: 'cors',
     method: 'POST',
@@ -19,8 +23,8 @@ export function gridDefaultPromptResolver(url, query, context, conversationId, a
     body: JSON.stringify({
       context,
       query,
-      additionalContext,
-      conversationId
+      conversationId,
+      options
     })
   }).then(result => result.json()).then(result => {
     if (result.ok === false) {

package/esm/hooks/features/aiAssistant/gridAiAssistantInterfaces.d.ts

@@ -49,6 +49,17 @@ export type PromptResponse = {
   grouping: Grouping[];
   pivoting: Pivoting;
 };
+export type PromptResolverOptions = {
+  /**
+   * By default, MUI's prompt resolver service stores the queries made to the service to analyze potential errors and improve the service (data is never stored). Enable private mode to make the service only keep track of the token count, without any query related data.
+   * @default false
+   */
+  privateMode?: boolean;
+  /**
+   * Additional context to make the processing results more accurate.
+   */
+  additionalContext?: string;
+};
 /**
  * The prompt API interface that is available in the grid [[apiRef]].
  */

package/esm/hooks/features/export/serializer/excelSerializer.js

@@ -47,12 +47,7 @@ export const serializeRowUnsafe = (id, columns, apiRef, defaultValueOptionsFormu
   const hasColSpan = gridHasColSpanSelector(apiRef);
   if (hasColSpan) {
     // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
-    apiRef.current.calculateColSpan({
-      rowId: id,
-      minFirstColumn: 0,
-      maxLastColumn: columns.length,
-      columns
-    });
+    apiRef.current.calculateColSpan(id, 0, columns.length, columns);
   }
   columns.forEach((column, colIndex) => {
     const colSpanInfo = hasColSpan ? apiRef.current.unstable_getCellColSpanInfo(id, colIndex) : undefined;

package/esm/hooks/features/index.d.ts

@@ -2,4 +2,5 @@ export * from "./aggregation/index.js";
 export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
 export * from "./cellSelection/index.js";
-export * from "./aiAssistant/index.js";
+export * from "./aiAssistant/index.js";
+export * from "./sidebar/index.js";

package/esm/hooks/features/index.js

@@ -3,4 +3,5 @@ export * from "./aggregation/index.js";
 export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
 export * from "./cellSelection/index.js";
-export * from "./aiAssistant/index.js";
+export * from "./aiAssistant/index.js";
+export * from "./sidebar/index.js";

package/esm/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -23,6 +23,10 @@ export interface GridPivotingState extends GridPivotingStatePartial {
 export interface GridPivotingInitialState {
   model?: GridPivotModel;
   enabled?: boolean;
+  /**
+   * To open the pivot sidebar on init, set sidebar's `openValue` to `GridSidebarValue.Pivot`.
+   * @deprecated Use sidebar state instead.
+   */
   panelOpen?: boolean;
 }
 export interface GridPivotModel {
@@ -55,6 +59,7 @@ export interface GridPivotingApi {
   setPivotActive: (active: boolean | ((prev: boolean) => boolean)) => void;
   /**
    * Sets whether the pivot panel is open.
+   * @deprecated Use the `showSidebar` method instead. Using this method will not trigger the `sidebarOpen` and `sidebarClose` events.
    * @param {boolean | ((prev: boolean) => boolean)} open - The new value of the pivot panel open state.
    */
   setPivotPanelOpen: (open: boolean | ((prev: boolean) => boolean)) => void;

package/esm/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -1,8 +1,11 @@
 import type { GridStatePremium } from "../../../models/gridStatePremium.js";
+export declare const gridPivotPanelOpenSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => boolean;
 export declare const gridPivotModelSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => import("./gridPivotingInterfaces.js").GridPivotModel;
 export declare const gridPivotPropsOverridesSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => import("./gridPivotingInterfaces.js").GridPivotingPropsOverrides | undefined;
-export { gridPivotActiveSelector, gridPivotInitialColumnsSelector, gridPivotPanelOpenSelector } from '@mui/x-data-grid/internals';
+export { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from '@mui/x-data-grid/internals';

package/esm/hooks/features/pivoting/gridPivotingSelectors.js

@@ -1,5 +1,7 @@
 import { createSelector, createRootSelector } from '@mui/x-data-grid-pro/internals';
+import { gridSidebarStateSelector, GridSidebarValue } from "../sidebar/index.js";
 const gridPivotingStateSelector = createRootSelector(state => state.pivoting);
+export const gridPivotPanelOpenSelector = createSelector(gridSidebarStateSelector, sidebar => sidebar.value === GridSidebarValue.Pivot && sidebar.open);
 export const gridPivotModelSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.model);
 export const gridPivotPropsOverridesSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.active ? pivoting.propsOverrides : undefined);
-export { gridPivotActiveSelector, gridPivotInitialColumnsSelector, gridPivotPanelOpenSelector } from '@mui/x-data-grid/internals';
+export { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from '@mui/x-data-grid/internals';

package/esm/hooks/features/pivoting/useGridPivoting.d.ts

@@ -3,6 +3,6 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
-export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>>;
+export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>, GridPrivateApiPremium>;
 export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
 export declare const useGridPivotingExportState: (apiRef: RefObject<GridPrivateApiPremium>) => void;

package/esm/hooks/features/pivoting/useGridPivoting.js

@@ -4,9 +4,12 @@ import { gridDataRowIdsSelector, gridRowIdSelector, gridRowsLoadingSelector, gri
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useOnMount from '@mui/utils/useOnMount';
 import { useGridApiMethod, useGridRegisterPipeProcessor, useGridSelector, gridPivotInitialColumnsSelector } from '@mui/x-data-grid-pro/internals';
+import { GridPivotPanel } from "../../../components/pivotPanel/index.js";
 import { gridPivotModelSelector, gridPivotActiveSelector, gridPivotPanelOpenSelector } from "./gridPivotingSelectors.js";
 import { getInitialColumns, getPivotedData, isPivotingAvailable as isPivotingAvailableFn } from "./utils.js";
 import { getAvailableAggregationFunctions } from "../aggregation/gridAggregationUtils.js";
+import { GridSidebarValue } from "../sidebar/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const emptyPivotModel = {
   rows: [],
   columns: [],
@@ -25,19 +28,23 @@ export const pivotingStateInitializer = (state, props, apiRef) => {
     return _extends({}, state, {
       pivoting: {
         active: false,
-        model: emptyPivotModel,
-        panelOpen: false
+        model: emptyPivotModel
       }
     });
   }
   const initialColumns = getInitialColumns(props.columns ?? [], props.getPivotDerivedColumns, apiRef.current.getLocaleText);
+  const open = props.pivotPanelOpen ?? props.initialState?.pivoting?.panelOpen ?? false;
+  const sidebarStateUpdate = open ? {
+    open,
+    value: GridSidebarValue.Pivot
+  } : {};
   return _extends({}, state, {
     pivoting: {
       active: props.pivotActive ?? props.initialState?.pivoting?.enabled ?? false,
       model: props.pivotModel ?? props.initialState?.pivoting?.model ?? emptyPivotModel,
-      panelOpen: props.pivotPanelOpen ?? props.initialState?.pivoting?.panelOpen ?? false,
       initialColumns
-    }
+    },
+    sidebar: _extends({}, state.sidebar, sidebarStateUpdate)
   });
 };
 export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
@@ -249,11 +256,16 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
     if (!isPivotingAvailable) {
       return;
     }
-    apiRef.current.setState(state => _extends({}, state, {
-      pivoting: _extends({}, state.pivoting, {
-        panelOpen: typeof callback === 'function' ? callback(state.pivoting?.panelOpen) : callback
-      })
-    }));
+    const panelOpen = gridPivotPanelOpenSelector(apiRef);
+    const newPanelOpen = typeof callback === 'function' ? callback(panelOpen) : callback;
+    if (panelOpen === newPanelOpen) {
+      return;
+    }
+    if (newPanelOpen) {
+      apiRef.current.showSidebar(GridSidebarValue.Pivot);
+    } else {
+      apiRef.current.hideSidebar();
+    }
   }, [apiRef, isPivotingAvailable]);
   const addColumnMenuButton = React.useCallback(menuItems => {
     if (isPivotingAvailable) {
@@ -309,6 +321,13 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       });
     });
   }, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef]);
+  const addPivotingPanel = React.useCallback((initialValue, value) => {
+    if (isPivotingAvailable && value === GridSidebarValue.Pivot) {
+      return /*#__PURE__*/_jsx(GridPivotPanel, {});
+    }
+    return initialValue;
+  }, [isPivotingAvailable]);
+  useGridRegisterPipeProcessor(apiRef, 'sidebar', addPivotingPanel);
   useGridApiMethod(apiRef, {
     setPivotModel,
     setPivotActive,

package/esm/hooks/features/pivoting/utils.js

@@ -57,7 +57,7 @@ function sortColumnGroups(columnGroups, pivotModelColumns, depth = 0) {
     if (sort === undefined) {
       return 0;
     }
-    return (sort === 'asc' ? 1 : -1) * gridStringOrNumberComparator(a.headerName, b.headerName, {}, {});
+    return (sort === 'asc' ? 1 : -1) * gridStringOrNumberComparator(a.rawHeaderName, b.rawHeaderName, {}, {});
   });
 }
 export const getPivotedData = ({
@@ -141,21 +141,23 @@ export const getPivotedData = ({
           continue;
         }
         let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
-        if (column.type !== 'number') {
-          colValue = String(colValue);
-        }
         if (column.type === 'singleSelect') {
           const singleSelectColumn = column;
           if (singleSelectColumn.getOptionLabel) {
             colValue = singleSelectColumn.getOptionLabel(colValue);
           }
         }
+        if (column.type !== 'number') {
+          colValue = String(colValue);
+        }
+        const formattedHeaderName = apiRef.current.getRowFormattedValue(row, column) || colValue;
         columnGroupPath.push(colValue);
         const groupId = columnGroupPath.join(columnGroupIdSeparator);
         if (!columnGroupingModelLookup.has(groupId)) {
           const columnGroup = {
             groupId,
-            headerName: colValue,
+            headerName: formattedHeaderName,
+            rawHeaderName: colValue,
             children: []
           };
           columnGroupingModelLookup.set(groupId, columnGroup);

package/esm/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -1,8 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridGroupingColDefOverride } from '@mui/x-data-grid-pro';
-import { GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
+import { GridColumnRawLookup, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
-import { RowGroupingStrategy } from "./gridRowGroupingUtils.js";
 interface CreateGroupingColDefMonoCriteriaParams {
   columnsLookup: GridColumnRawLookup;
   /**

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -4,12 +4,12 @@ const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
   _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
 import * as React from 'react';
 import { GRID_STRING_COL_DEF, gridRowIdSelector, gridRowNodeSelector } from '@mui/x-data-grid-pro';
-import { isSingleSelectColDef } from '@mui/x-data-grid-pro/internals';
+import { isSingleSelectColDef, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { GridGroupingColumnFooterCell } from "../../../components/GridGroupingColumnFooterCell.js";
 import { GridGroupingCriteriaCell } from "../../../components/GridGroupingCriteriaCell.js";
 import { GridDataSourceGroupingCriteriaCell } from "../../../components/GridDataSourceGroupingCriteriaCell.js";
 import { GridGroupingColumnLeafCell } from "../../../components/GridGroupingColumnLeafCell.js";
-import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, RowGroupingStrategy } from "./gridRowGroupingUtils.js";
+import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "./gridRowGroupingUtils.js";
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GROUPING_COL_DEF_DEFAULT_PROPERTIES = _extends({}, GRID_STRING_COL_DEF, {
@@ -65,7 +65,14 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
-const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => {
+  const rowId = gridRowIdSelector(apiRef, row);
+  const rowNode = gridRowNodeSelector(apiRef, rowId);
+  if (rowNode.type === 'group' && rowNode.groupingField === groupedByColDef.field) {
+    return groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
+  }
+  return value;
+};
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,

package/esm/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -1,15 +1,11 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridRowTreeConfig, GridFilterState, GridFilterModel, GridRowModel, GridColDef, GridKeyValue, GridDataSource } from '@mui/x-data-grid-pro';
-import { GridAggregatedFilterItemApplier, GridColumnRawLookup, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn } from '@mui/x-data-grid-pro/internals';
+import { GridAggregatedFilterItemApplier, GridColumnRawLookup, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridGroupingRule, GridGroupingRules, GridRowGroupingModel } from "./gridRowGroupingInterfaces.js";
 import { GridStatePremium } from "../../../models/gridStatePremium.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
-export declare enum RowGroupingStrategy {
-  Default = "grouping-columns",
-  DataSource = "grouping-columns-data-source",
-}
 export declare const getRowGroupingFieldFromGroupingCriteria: (groupingCriteria: string | null) => string;
 interface FilterRowTreeFromTreeDataParams {
   rowTree: GridRowTreeConfig;

package/esm/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,12 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup, getRowValue } from '@mui/x-data-grid-pro/internals';
+import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup, getRowValue, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
-export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
-  RowGroupingStrategy["Default"] = "grouping-columns";
-  RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
-  return RowGroupingStrategy;
-}({});
 export const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;

package/esm/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { gridRowTreeSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterStrategyProcessor, createRowTree, updateRowTree, getVisibleRowsLookup, skipSorting, skipFiltering, getParentPath } from '@mui/x-data-grid-pro/internals';
-import { getGroupingRules, RowGroupingStrategy } from "./gridRowGroupingUtils.js";
+import { useGridRegisterStrategyProcessor, createRowTree, updateRowTree, getVisibleRowsLookup, skipSorting, skipFiltering, getParentPath, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
+import { getGroupingRules } from "./gridRowGroupingUtils.js";
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
   const createRowTreeForRowGrouping = React.useCallback(params => {

package/esm/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -3,9 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridEvent, useGridApiMethod, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, GridStrategyGroup, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
-import { getRowGroupingFieldFromGroupingCriteria, RowGroupingStrategy, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
+import { getRowGroupingFieldFromGroupingCriteria, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []

package/esm/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree, getVisibleRowsLookup } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree, getVisibleRowsLookup, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from "./createGroupingColDef.js";
-import { filterRowTreeFromGroupingColumns, getColDefOverrides, RowGroupingStrategy, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from "./gridRowGroupingUtils.js";
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from "./gridRowGroupingUtils.js";
 export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   const getGroupingColDefs = React.useCallback(columnsState => {
     if (props.disableRowGrouping) {

package/esm/hooks/features/rows/useGridRowAriaAttributes.d.ts

@@ -1 +1 @@
-export declare const useGridRowAriaAttributes: () => (rowNode: import("@mui/x-data-grid").GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;
+export declare const useGridRowAriaAttributesPremium: () => (rowNode: import("@mui/x-data-grid").GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;

package/esm/hooks/features/rows/useGridRowAriaAttributes.js

@@ -1,7 +1,7 @@
-import { useGridRowAriaAttributes as useGridRowAriaAttributesPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
+import { useGridRowAriaAttributesPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
-export const useGridRowAriaAttributes = () => {
+export const useGridRowAriaAttributesPremium = () => {
   const apiRef = useGridPrivateApiContext();
   const gridRowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
   return useGridRowAriaAttributesPro(gridRowGroupingModel.length > 0);

package/esm/hooks/features/sidebar/gridSidebarInterfaces.d.ts

@@ -0,0 +1,16 @@
+export declare enum GridSidebarValue {
+  Pivot = "pivot",
+}
+export interface GridSidebarApi {
+  /**
+   * Displays the sidebar. The `newValue` argument controls the content of the sidebar.
+   * @param {GridSidebarValue} newValue The sidebar to open.
+   * @param {string} sidebarId The unique sidebar id
+   * @param {string} labelId The unique button id
+   */
+  showSidebar: (newValue: GridSidebarValue, sidebarId?: string, labelId?: string) => void;
+  /**
+   * Hides the sidebar.
+   */
+  hideSidebar: () => void;
+}

package/esm/hooks/features/sidebar/gridSidebarInterfaces.js

@@ -0,0 +1,4 @@
+export let GridSidebarValue = /*#__PURE__*/function (GridSidebarValue) {
+  GridSidebarValue["Pivot"] = "pivot";
+  return GridSidebarValue;
+}({});

package/esm/hooks/features/sidebar/gridSidebarSelector.d.ts

@@ -0,0 +1,12 @@
+import { GridStatePremium } from "../../../models/gridStatePremium.js";
+export declare const gridSidebarStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, unknown, import("./gridSidebarState.js").GridSidebarState>;
+export declare const gridSidebarOpenSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => boolean;
+export declare const gridSidebarContentSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => {
+  sidebarId: string | undefined;
+  labelId: string | undefined;
+  value: import("./gridSidebarInterfaces.js").GridSidebarValue | undefined;
+};