@mui/x-data-grid 8.11.3 → 8.12.0

package/esm/locales/zhTW.js

@@ -35,6 +35,9 @@ const zhTWGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -115,6 +118,7 @@ const zhTWGrid = {
   columnMenuSortAsc: '升序',
   columnMenuSortDesc: '降序',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => `${count} 個篩選器`,
@@ -183,6 +187,7 @@ const zhTWGrid = {
   rowReorderingHeaderName: '排序',
   // Aggregation
   aggregationMenuItemHeader: '集合',
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: '總數',
   aggregationFunctionLabelAvg: '平均數',
   aggregationFunctionLabelMin: '最小',
@@ -217,6 +222,32 @@ const zhTWGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',

package/esm/material/augmentation.d.ts

@@ -17,6 +17,8 @@ import type { TooltipProps } from '@mui/material/Tooltip';
 import type { InputProps } from '@mui/material/Input';
 import type { SelectProps } from '@mui/material/Select';
 import type { SkeletonProps } from '@mui/material/Skeleton';
+import type { ToggleButtonProps } from '@mui/material/ToggleButton';
+import type { TabsProps } from '@mui/material/Tabs';
 declare module '@mui/x-data-grid' {
   interface BaseAutocompletePropsOverrides {
     material?: Partial<AutocompleteProps<string, true, false, true>>;
@@ -54,6 +56,12 @@ declare module '@mui/x-data-grid' {
   interface BaseButtonPropsOverrides {
     material?: Partial<ButtonProps>;
   }
+  interface BaseToggleButtonPropsOverrides {
+    material?: Partial<ToggleButtonProps>;
+  }
+  interface BaseTabsPropsOverrides {
+    material?: Partial<TabsProps>;
+  }
   interface BaseIconButtonPropsOverrides {
     material?: Partial<IconButtonProps>;
   }

package/esm/material/index.js

@@ -12,16 +12,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded0 = ["material"],
   _excluded1 = ["material"],
   _excluded10 = ["material"],
-  _excluded11 = ["material", "label", "className"],
-  _excluded12 = ["material"],
-  _excluded13 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded14 = ["slotProps", "material"],
-  _excluded15 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded16 = ["key"],
-  _excluded17 = ["inputProps", "InputProps", "InputLabelProps"],
-  _excluded18 = ["slotProps", "material"],
-  _excluded19 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded20 = ["native"];
+  _excluded11 = ["material"],
+  _excluded12 = ["material", "label", "className"],
+  _excluded13 = ["material"],
+  _excluded14 = ["inert", "iconStart", "iconEnd", "children", "material"],
+  _excluded15 = ["slotProps", "material"],
+  _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded17 = ["key"],
+  _excluded18 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded19 = ["slotProps", "material"],
+  _excluded20 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded21 = ["native"],
+  _excluded22 = ["children", "value", "active"],
+  _excluded23 = ["items", "value", "material"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -56,7 +59,11 @@ import MUIGrow from '@mui/material/Grow';
 import MUIPaper from '@mui/material/Paper';
 import MUIInputLabel from '@mui/material/InputLabel';
 import MUISkeleton from '@mui/material/Skeleton';
+import MUITabs from '@mui/material/Tabs';
+import MUITab from '@mui/material/Tab';
+import MUIToggleButton from '@mui/material/ToggleButton';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import useId from '@mui/utils/useId';
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon, GridDownloadIcon } from "./icons/index.js";
 import { GridColumnUnsortedIcon } from "../components/GridColumnUnsortedIcon.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -323,11 +330,30 @@ const BaseButton = forwardRef(function BaseButton(props, ref) {
   }));
 });
 if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
+const StyledToggleButton = styled(MUIToggleButton)(({
+  theme
+}) => ({
+  gap: theme.spacing(1),
+  border: 0
+}));
+const BaseToggleButton = forwardRef(function BaseToggleButton(props, ref) {
+  const {
+      material
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded9);
+  return /*#__PURE__*/_jsx(StyledToggleButton, _extends({
+    size: "small",
+    color: "primary"
+  }, rest, material, {
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") BaseToggleButton.displayName = "BaseToggleButton";
 const BaseChip = forwardRef(function BaseChip(props, ref) {
   const {
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded9);
+    other = _objectWithoutPropertiesLoose(props, _excluded0);
   return /*#__PURE__*/_jsx(MUIChip, _extends({}, other, material, {
     ref: ref
   }));
@@ -337,7 +363,7 @@ const BaseIconButton = forwardRef(function BaseIconButton(props, ref) {
   const {
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded0);
+    other = _objectWithoutPropertiesLoose(props, _excluded1);
   return /*#__PURE__*/_jsx(MUIIconButton, _extends({}, other, material, {
     ref: ref
   }));
@@ -347,7 +373,7 @@ const BaseTooltip = forwardRef(function BaseTooltip(props, ref) {
   const {
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded1);
+    other = _objectWithoutPropertiesLoose(props, _excluded10);
   return /*#__PURE__*/_jsx(MUITooltip, _extends({}, other, material, {
     ref: ref
   }));
@@ -357,7 +383,7 @@ const BaseSkeleton = forwardRef(function BaseSkeleton(props, ref) {
   const {
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded10);
+    other = _objectWithoutPropertiesLoose(props, _excluded11);
   return /*#__PURE__*/_jsx(MUISkeleton, _extends({}, other, material, {
     ref: ref
   }));
@@ -369,7 +395,7 @@ const BaseSwitch = forwardRef(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded11);
+    other = _objectWithoutPropertiesLoose(props, _excluded12);
   if (!label) {
     return /*#__PURE__*/_jsx(MUISwitch, _extends({}, other, material, {
       className: className,
@@ -389,7 +415,7 @@ const BaseMenuList = forwardRef(function BaseMenuList(props, ref) {
   const {
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded12);
+    other = _objectWithoutPropertiesLoose(props, _excluded13);
   return /*#__PURE__*/_jsx(MUIMenuList, _extends({}, other, material, {
     ref: ref
   }));
@@ -403,7 +429,7 @@ function BaseMenuItem(props) {
       children,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded13);
+    other = _objectWithoutPropertiesLoose(props, _excluded14);
   if (inert) {
     other.disableRipple = true;
   }
@@ -422,7 +448,7 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded14);
+    other = _objectWithoutPropertiesLoose(props, _excluded15);
   return /*#__PURE__*/_jsx(MUITextField, _extends({
     variant: "outlined"
   }, other, material, {
@@ -449,7 +475,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded15);
+    other = _objectWithoutPropertiesLoose(props, _excluded16);
   return /*#__PURE__*/_jsx(MUIAutocomplete, _extends({
     id: id,
     multiple: multiple,
@@ -466,7 +492,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded16);
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded17);
       return /*#__PURE__*/_jsx(MUIChip, _extends({
         variant: "outlined",
         size: "small",
@@ -479,7 +505,7 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = _objectWithoutPropertiesLoose(params, _excluded17);
+        inputRest = _objectWithoutPropertiesLoose(params, _excluded18);
       return /*#__PURE__*/_jsx(MUITextField, _extends({}, inputRest, {
         label: label,
         placeholder: placeholder,
@@ -503,7 +529,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded18);
+    other = _objectWithoutPropertiesLoose(props, _excluded19);
   const result = other;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -552,7 +578,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded19);
+    other = _objectWithoutPropertiesLoose(props, _excluded20);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -650,12 +676,82 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded20);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded21);
   if (native) {
     return /*#__PURE__*/_jsx("option", _extends({}, props));
   }
   return /*#__PURE__*/_jsx(MUIMenuItem, _extends({}, props));
 }
+const StyledTabs = styled(MUITabs, {
+  name: 'MuiDataGrid',
+  slot: 'Tabs'
+})(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const StyledTab = styled(MUITab, {
+  name: 'MuiDataGrid',
+  slot: 'Tab'
+})({
+  flex: 1,
+  minWidth: 'fit-content'
+});
+const StyledTabPanel = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'TabPanel'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+function TabPanel(props) {
+  const {
+      children,
+      active
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded22);
+  return /*#__PURE__*/_jsx(StyledTabPanel, _extends({
+    role: "tabpanel",
+    style: {
+      display: active ? 'flex' : 'none'
+    }
+  }, other, {
+    children: children
+  }));
+}
+function BaseTabs(_ref2) {
+  let {
+      items,
+      value,
+      material
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded23);
+  const id = useId();
+  const labelId = `${id}-tab-${value}`;
+  const panelId = `${id}-tabpanel-${value}`;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledTabs, _extends({}, props, {
+      value: value,
+      variant: "scrollable",
+      scrollButtons: "auto"
+    }, material, {
+      children: items.map(item => /*#__PURE__*/_jsx(StyledTab, {
+        value: item.value,
+        label: item.label,
+        id: labelId,
+        "aria-controls": panelId
+      }, item.value))
+    })), items.map(item => /*#__PURE__*/_jsx(TabPanel, {
+      value: item.value,
+      active: value === item.value,
+      id: panelId,
+      "aria-labelledby": labelId,
+      children: item.children
+    }, item.value))]
+  });
+}
 const iconSlots = {
   booleanCellTrueIcon: GridCheckIcon,
   booleanCellFalseIcon: GridCloseIcon,
@@ -709,7 +805,9 @@ const baseSlots = {
   baseTextField: BaseTextField,
   baseButton: BaseButton,
   baseIconButton: BaseIconButton,
+  baseToggleButton: BaseToggleButton,
   baseTooltip: BaseTooltip,
+  baseTabs: BaseTabs,
   basePagination: BasePagination,
   basePopper: BasePopper,
   baseSelect: BaseSelect,

package/esm/models/api/gridLocaleTextApi.d.ts

@@ -30,6 +30,7 @@ export interface GridLocaleText {
   toolbarExportPrint: React.ReactNode;
   toolbarExportExcel: string;
   toolbarPivot: string;
+  toolbarCharts: string;
   toolbarAssistant: React.ReactNode;
   columnsManagementSearchTitle: string;
   columnsManagementNoColumns: string;
@@ -102,6 +103,7 @@ export interface GridLocaleText {
   columnMenuSortAsc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
   columnMenuSortDesc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
   columnMenuManagePivot: string;
+  columnMenuManageCharts: string;
   columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode;
   columnHeaderFiltersLabel: string;
   columnHeaderSortIconLabel: string;
@@ -130,6 +132,7 @@ export interface GridLocaleText {
   collapseDetailPanel: string;
   rowReorderingHeaderName: string;
   aggregationMenuItemHeader: string;
+  aggregationFunctionLabelNone: string;
   aggregationFunctionLabelSum: string;
   aggregationFunctionLabelAvg: string;
   aggregationFunctionLabelMin: string;
@@ -170,6 +173,30 @@ export interface GridLocaleText {
   pivotDragToValues: string;
   pivotYearColumnHeaderName: string;
   pivotQuarterColumnHeaderName: string;
+  chartsNoCharts: string;
+  chartsChartNotSelected: string;
+  chartsTabChart: string;
+  chartsTabFields: string;
+  chartsTabCustomize: string;
+  chartsCloseButton: string;
+  chartsSyncButtonLabel: string;
+  chartsSearchPlaceholder: string;
+  chartsSearchLabel: string;
+  chartsSearchClear: string;
+  chartsNoFields: string;
+  chartsFieldBlocked: string;
+  chartsCategories: string;
+  chartsSeries: string;
+  chartsMenuAddToDimensions: (dimensionLabel: string) => string;
+  chartsMenuAddToValues: (valuesLabel: string) => string;
+  chartsMenuMoveUp: string;
+  chartsMenuMoveDown: string;
+  chartsMenuMoveToTop: string;
+  chartsMenuMoveToBottom: string;
+  chartsMenuOptions: string;
+  chartsMenuRemove: string;
+  chartsDragToDimensions: (dimensionLabel: string) => string;
+  chartsDragToValues: (valuesLabel: string) => string;
   aiAssistantPanelTitle: string;
   aiAssistantPanelClose: string;
   aiAssistantPanelConversationHistory: string;

package/esm/models/api/gridParamsApi.d.ts

@@ -96,12 +96,16 @@ export interface GridParamsPrivateApi {
     colDef,
     hasFocus,
     rowNode,
-    tabIndex
+    tabIndex,
+    value,
+    formattedValue
   }: {
     cellMode: GridCellMode;
     colDef: GridStateColDef;
     hasFocus: boolean;
     rowNode: N;
     tabIndex: 0 | -1;
+    value?: V;
+    formattedValue?: F;
   }) => GridCellParams<R, V, F, N>;
 }

package/esm/models/configuration/gridAggregationConfiguration.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridRowId, GridRowModel } from "../gridRows.js";
+import { GridColDef } from "../colDef/index.js";
+/**
+ * Get the cell aggregation result
+ * @param {GridRowId} id The row id
+ * @param {string} field The field
+ * @returns { { position: 'footer' | 'inline'; value: any } | null } The cell aggregation result
+ */
+export type GetCellAggregationResultFn = (id: GridRowId, field: string) => {
+  position: 'footer' | 'inline';
+  value: any;
+  formattedValue?: any;
+} | null;
+export type SortValueGetterFn = (id: GridRowId, field: string) => any;
+export type FilterValueGetterFn = (row: GridRowModel, colDef: GridColDef) => any;
+export interface GridAggregationInternalHooks<Api, Props> {
+  useCellAggregationResult: GetCellAggregationResultFn;
+  /**
+   * @param {RefObject<Api>} apiRef The API reference
+   * @returns {SortValueGetterFn} The function to get the value to sort by
+   */
+  useSortValueGetter: (apiRef: RefObject<Api>) => SortValueGetterFn;
+  useFilterValueGetter: (apiRef: RefObject<Api>, props: Props) => FilterValueGetterFn;
+}

package/esm/models/configuration/gridAggregationConfiguration.js

@@ -0,0 +1 @@
+export {};

package/esm/models/configuration/gridConfiguration.d.ts

@@ -1,22 +1,19 @@
 import * as React from 'react';
-import { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook } from "./gridRowConfiguration.js";
+import type { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook } from "./gridRowConfiguration.js";
+import type { GridAggregationInternalHooks } from "./gridAggregationConfiguration.js";
 import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js";
-import type { GridRowId } from "../gridRows.js";
+import { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../api/gridApiCommon.js";
 import type { GridPrivateApiCommunity } from "../api/gridApiCommunity.js";
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook<Api> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook<Api> {
+export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api> {
   useCSSVariables: () => {
     id: string;
     variables: GridCSSVariablesInterface;
   };
-  useCellAggregationResult: (id: GridRowId, field: string) => {
-    position: 'footer' | 'inline';
-    value: any;
-  } | null;
 }
-export interface GridConfiguration<Api extends GridPrivateApiCommon = GridPrivateApiCommunity> {
-  hooks: GridInternalHook<Api>;
+export interface GridConfiguration<Api extends GridPrivateApiCommon = GridPrivateApiCommunity, Props = DataGridProcessedProps> {
+  hooks: GridInternalHook<Api, Props>;
 }

package/esm/models/gridBaseSlots.d.ts

@@ -116,6 +116,10 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
+export type ToggleButtonProps = CommonProps & {
+  selected?: boolean;
+  value: string;
+};
 export type DividerProps = {
   className?: string;
   orientation?: 'horizontal' | 'vertical';
@@ -236,6 +240,17 @@ export type SwitchProps = CommonProps & {
   onChange?: React.ChangeEventHandler;
   size?: 'small' | 'medium';
   label?: React.ReactNode;
+  disabled?: boolean;
+  title?: string;
+};
+export type TabsProps = Omit<CommonProps, 'onChange'> & {
+  items: {
+    value: string;
+    label: string;
+    children: React.ReactNode;
+  }[];
+  value: string;
+  onChange: (event: React.SyntheticEvent, value: string) => void;
 };
 export type TextFieldProps = CommonProps & {
   role?: string;

package/esm/models/gridSlotsComponent.d.ts

@@ -73,6 +73,11 @@ export interface GridBaseSlots {
    * @default Input
    */
   baseInput: React.JSXElementConstructor<GridSlotProps['baseInput']>;
+  /**
+   * The custom ToggleButton component used in the grid.
+   * @default ToggleButton
+   */
+  baseToggleButton: React.JSXElementConstructor<GridSlotProps['baseToggleButton']>;
   /**
    * The custom Tooltip component used in the grid.
    * @default Tooltip
@@ -103,6 +108,11 @@ export interface GridBaseSlots {
    * @default Switch
    */
   baseSwitch: React.JSXElementConstructor<GridSlotProps['baseSwitch']>;
+  /**
+   * The custom Tabs component used in the grid.
+   * @default Tabs
+   */
+  baseTabs: React.JSXElementConstructor<GridSlotProps['baseTabs']>;
 }
 /**
  * Grid components React prop interface containing all the overridable components.

package/esm/models/gridSlotsComponentsProps.d.ts

@@ -18,7 +18,7 @@ import type { GridLoadingOverlayProps } from "../components/GridLoadingOverlay.j
 import type { GridRowCountProps } from "../components/GridRowCount.js";
 import type { GridColumnHeaderSortIconProps } from "../components/columnHeaders/GridColumnHeaderSortIcon.js";
 import type { GridBottomContainerProps } from "../components/virtualization/GridBottomContainer.js";
-import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps } from "./gridBaseSlots.js";
+import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps, TabsProps, ToggleButtonProps } from "./gridBaseSlots.js";
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseAutocompletePropsOverrides {}
@@ -30,6 +30,7 @@ export interface BaseDividerPropsOverrides {}
 export interface BaseLinearProgressPropsOverrides {}
 export interface BaseMenuListPropsOverrides {}
 export interface BaseMenuItemPropsOverrides {}
+export interface BaseTabsPropsOverrides {}
 export interface BaseTextFieldPropsOverrides {}
 export interface BaseSelectPropsOverrides {}
 export interface BaseSwitchPropsOverrides {}
@@ -43,6 +44,7 @@ export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
 export interface BaseSkeletonPropsOverrides {}
 export interface BaseIconPropsOverrides {}
+export interface BaseToggleButtonPropsOverrides {}
 export interface CellPropsOverrides {}
 export interface ToolbarPropsOverrides {}
 export interface ColumnHeaderFilterIconButtonPropsOverrides {}
@@ -74,10 +76,12 @@ interface BaseSlotProps {
   baseLinearProgress: LinearProgressProps & BaseLinearProgressPropsOverrides;
   baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
   baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
+  baseTabs: TabsProps & BaseTabsPropsOverrides;
   baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
   baseSwitch: SwitchProps & BaseSwitchPropsOverrides;
   baseButton: ButtonProps & BaseButtonPropsOverrides;
   baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides;
+  baseToggleButton: ToggleButtonProps & BaseToggleButtonPropsOverrides;
   basePagination: PaginationProps & BasePaginationPropsOverrides;
   basePopper: PopperProps & BasePopperPropsOverrides;
   baseTooltip: TooltipProps & BaseTooltipPropsOverrides;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -48,7 +48,7 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeD
   } else {
     newWidth += columnBounds.right - clickX;
   }
-  return newWidth;
+  return Math.round(newWidth);
 }
 function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
   if (resizeDirection === 'Left') {
@@ -569,5 +569,5 @@ function updateProperty(element, property, delta) {
   if (!element) {
     return;
   }
-  element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
+  element.style[property] = `${Math.round(parseFloat(element.style[property])) + delta}px`;
 }

package/hooks/features/columns/useGridColumns.js

@@ -19,7 +19,7 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridColumnsUtils = require("./gridColumnsUtils");
 var _preferencesPanel = require("../preferencesPanel");
-var _pivoting = require("../pivoting");
+var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const columnsStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.columns = {
@@ -91,13 +91,30 @@ function useGridColumns(apiRef, props) {
     }
   }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
-    if ((0, _pivoting.gridPivotActiveSelector)(apiRef)) {
-      apiRef.current.updateNonPivotColumns(columns);
-      return;
+    let columnsToUpdate = columns;
+    if ((0, _gridPivotingSelectors.gridPivotActiveSelector)(apiRef)) {
+      const nonPivotColumns = [];
+      const pivotColumns = [];
+      const pivotInitialColumns = (0, _gridPivotingSelectors.gridPivotInitialColumnsSelector)(apiRef);
+      columns.forEach(column => {
+        const isNonPivotColumn = pivotInitialColumns.has(column.field);
+        if (isNonPivotColumn) {
+          nonPivotColumns.push(column);
+        } else {
+          pivotColumns.push(column);
+        }
+      });
+      if (nonPivotColumns.length > 0) {
+        apiRef.current.updateNonPivotColumns(nonPivotColumns);
+      }
+      if (pivotColumns.length === 0) {
+        return;
+      }
+      columnsToUpdate = pivotColumns;
     }
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnsToUpsert: columns,
+      columnsToUpsert: columnsToUpdate,
       initialState: undefined,
       keepOnlyColumnsToUpsert: false,
       updateInitialVisibilityModel: true
@@ -262,7 +279,7 @@ function useGridColumns(apiRef, props) {
     return initialValue;
   }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
-    const isPivotActive = (0, _pivoting.gridPivotActiveSelector)(apiRef);
+    const isPivotActive = (0, _gridPivotingSelectors.gridPivotActiveSelector)(apiRef);
     if (props.disableColumnSelector || isPivotActive) {
       return columnMenuItems;
     }