@mui/x-data-grid 5.7.0 → 5.10.0

package/models/gridSortModel.d.ts

@@ -1,10 +1,9 @@
-import { GridCellValue } from './gridCell';
 import { GridRowId, GridRowTreeNodeConfig } from './gridRows';
 export declare type GridSortDirection = 'asc' | 'desc' | null | undefined;
-export interface GridSortCellParams {
+export interface GridSortCellParams<V = any> {
     id: GridRowId;
     field: string;
-    value: GridCellValue;
+    value: V;
     rowNode: GridRowTreeNodeConfig;
     /**
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
@@ -14,7 +13,7 @@ export interface GridSortCellParams {
 /**
  * The type of the sort comparison function.
  */
-export declare type GridComparatorFn = (v1: GridCellValue, v2: GridCellValue, cellParams1: GridSortCellParams, cellParams2: GridSortCellParams) => number;
+export declare type GridComparatorFn<V = any> = (v1: V, v2: V, cellParams1: GridSortCellParams<V>, cellParams2: GridSortCellParams<V>) => number;
 /**
  * Object that represents the column sorted data, part of the [[GridSortModel]].
  */

package/models/index.d.ts

@@ -5,7 +5,6 @@ export * from './gridEditRowModel';
 export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
-export * from './gridFilterOperator';
 export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
@@ -24,3 +23,4 @@ export * from './logger';
 export * from './muiEvent';
 export * from './events';
 export * from './gridSortModel';
+export * from './gridFilterOperator';

package/models/index.js

@@ -5,7 +5,6 @@ export * from './gridEditRowModel';
 export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
-export * from './gridFilterOperator';
 export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
@@ -23,4 +22,5 @@ export * from './gridExport';
 export * from './logger';
 export * from './muiEvent';
 export * from './events';
-export * from './gridSortModel';
+export * from './gridSortModel';
+export * from './gridFilterOperator';

package/models/params/gridCellParams.d.ts

@@ -1,11 +1,12 @@
-import { GridCellMode, GridCellValue } from '../gridCell';
-import { GridRowId, GridRowModel, GridRowTreeNodeConfig } from '../gridRows';
+/// <reference types="react" />
+import { GridCellMode } from '../gridCell';
+import { GridRowId, GridRowModel, GridRowTreeNodeConfig, GridValidRowModel } from '../gridRows';
 import type { GridStateColDef } from '../colDef/gridColDef';
 import { GridEditCellProps } from '../gridEditRowModel';
 /**
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
  */
-export interface GridCellParams<V = any, R = any, F = V> {
+export interface GridCellParams<V = any, R extends GridValidRowModel = any, F = V> {
     /**
      * The grid row id.
      */
@@ -17,11 +18,11 @@ export interface GridCellParams<V = any, R = any, F = V> {
     /**
      * The cell value, but if the column has valueGetter, use getValue.
      */
-    value: V;
+    value?: V | undefined;
     /**
      * The cell value formatted with the column valueFormatter.
      */
-    formattedValue: F;
+    formattedValue?: F | undefined;
     /**
      * The row model of the row that the current cell belongs to.
      */
@@ -54,25 +55,34 @@ export interface GridCellParams<V = any, R = any, F = V> {
      * Get the cell value of a row and field.
      * @param {GridRowId} id The row id.
      * @param {string} field The field.
-     * @returns {GridCellValue} The cell value.
+     * @returns {any} The cell value.
      * @deprecated Use `params.row` to directly access the fields you want instead.
      */
-    getValue: (id: GridRowId, field: string) => GridCellValue;
+    getValue: (id: GridRowId, field: string) => any;
+}
+export interface FocusElement {
+    focus(): void;
 }
 /**
  * GridCellParams containing api.
  */
-export interface GridRenderCellParams<V = any, R = any, F = V> extends GridCellParams<V, R, F> {
+export interface GridRenderCellParams<V = any, R extends GridValidRowModel = any, F = V> extends GridCellParams<V, R, F> {
     /**
      * GridApi that let you manipulate the grid.
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
      */
     api: any;
+    /**
+     * A ref allowing to set imperative focus.
+     * It can be passed to the element that should receive focus.
+     * @ignore - do not document.
+     */
+    focusElementRef?: React.Ref<FocusElement>;
 }
 /**
  * GridEditCellProps containing api.
  */
-export interface GridRenderEditCellParams<V = any, R = any, F = V> extends GridCellParams<V, R, F>, GridEditCellProps<V> {
+export interface GridRenderEditCellParams<V = any, R extends GridValidRowModel = any, F = V> extends GridCellParams<V, R, F>, GridEditCellProps<V> {
     /**
      * GridApi that let you manipulate the grid.
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
@@ -92,24 +102,24 @@ export interface GridValueGetterParams<V = any, R = any> extends Omit<GridCellPa
 /**
  * @deprecated Use `GridValueGetterParams` instead.
  */
-export declare type GridValueGetterFullParams<V = any, R = any> = GridValueGetterParams<V, R>;
+export declare type GridValueGetterFullParams<V = any, R extends GridValidRowModel = any> = GridValueGetterParams<V, R>;
 /**
  * Object passed as parameter in the column [[GridColDef]] value setter callback.
  */
-export interface GridValueSetterParams {
+export interface GridValueSetterParams<R extends GridValidRowModel = any, V = any> {
     /**
      * The new cell value.
      */
-    value: GridCellValue;
+    value: V;
     /**
      * The row that is being edited.
      */
-    row: GridRowModel;
+    row: R;
 }
 /**
  * Object passed as parameter in the column [[GridColDef]] value formatter callback.
  */
-export interface GridValueFormatterParams {
+export interface GridValueFormatterParams<V = any> {
     /**
      * The grid row id.
      * It is not available when the value formatter is called by the filter panel.
@@ -122,7 +132,7 @@ export interface GridValueFormatterParams {
     /**
      * The cell value, if the column has valueGetter it is the value returned by it.
      */
-    value: GridCellValue;
+    value: V;
     /**
      * GridApi that let you manipulate the grid.
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)

package/models/params/gridColumnHeaderParams.d.ts

@@ -1,8 +1,9 @@
 import type { GridStateColDef } from '../colDef/gridColDef';
+import { GridValidRowModel } from '../gridRows';
 /**
  * Object passed as parameter in the column [[GridColDef]] header renderer.
  */
-export interface GridColumnHeaderParams {
+export interface GridColumnHeaderParams<V = any, R extends GridValidRowModel = GridValidRowModel, F = V> {
     /**
      * The column field of the column that triggered the event
      */
@@ -10,5 +11,5 @@ export interface GridColumnHeaderParams {
     /**
      * The column of the current header component.
      */
-    colDef: GridStateColDef;
+    colDef: GridStateColDef<R, V, F>;
 }

package/models/params/gridEditCellParams.d.ts

@@ -1,4 +1,3 @@
-import { GridCellValue } from '../gridCell';
 import { GridEditCellProps } from '../gridEditRowModel';
 import { GridRowId } from '../gridRows';
 import { GridCellParams } from './gridCellParams';
@@ -22,7 +21,7 @@ export interface GridEditCellValueParams {
     /**
      * The new value for the cell.
      */
-    value: GridCellValue;
+    value: any;
     /**
      * The debounce time in milliseconds.
      */
@@ -35,7 +34,7 @@ export interface GridCommitCellChangeParams {
 export interface GridCellEditCommitParams {
     id: GridRowId;
     field: string;
-    value: GridCellValue;
+    value: any;
 }
 declare enum GridCellEditStartReasons {
     enterKeyDown = "enterKeyDown",

package/models/params/gridPreferencePanelParams.d.ts

@@ -0,0 +1,3 @@
+import { GridPreferencePanelState } from '../../hooks/features/preferencesPanel/gridPreferencePanelState';
+export interface GridPreferencePanelParams extends Omit<GridPreferencePanelState, 'open'> {
+}

package/models/params/gridPreferencePanelParams.js

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

package/models/params/gridRowParams.d.ts

@@ -1,10 +1,9 @@
-import { GridCellValue } from '../gridCell';
-import { GridRowEntry, GridRowId, GridRowModel } from '../gridRows';
+import { GridValidRowModel, GridRowEntry, GridRowId } from '../gridRows';
 import type { GridColumns } from '../colDef/gridColDef';
 /**
  * Object passed as parameter in the row callbacks.
  */
-export interface GridRowParams<R extends GridRowModel = GridRowModel> {
+export interface GridRowParams<R extends GridValidRowModel = any> {
     /**
      * The grid row id.
      */
@@ -21,10 +20,10 @@ export interface GridRowParams<R extends GridRowModel = GridRowModel> {
      * Get the cell value of a row and field.
      * @param {GridRowId} id The row id.
      * @param {string} field The field.
-     * @returns {GridCellValue} The cell value.
+     * @returns {any} The cell value.
      * @deprecated Use `params.row` to directly access the fields you want instead.
      */
-    getValue: (id: GridRowId, field: string) => GridCellValue;
+    getValue: (id: GridRowId, field: string) => any;
 }
 interface GridRowVisibilityParams {
     /**
@@ -35,11 +34,16 @@ interface GridRowVisibilityParams {
      * Whether this row is the last visible or not.
      */
     isLastVisible: boolean;
+    /**
+     * Index of the row in the current page.
+     * If the pagination is disabled, it will be the index relative to all filtered rows.
+     */
+    indexRelativeToCurrentPage: number;
 }
 /**
  * Object passed as parameter in the row `getRowClassName` callback prop.
  */
-export interface GridRowClassNameParams extends GridRowParams, GridRowVisibilityParams {
+export interface GridRowClassNameParams<R extends GridValidRowModel = any> extends GridRowParams<R>, GridRowVisibilityParams {
 }
 /**
  * Object passed as parameter in the row `getRowHeight` callback prop.
@@ -63,7 +67,7 @@ declare enum GridRowEditStartReasons {
 /**
  * Params passed to the `rowEditStart` event.
  */
-export interface GridRowEditStartParams<R extends GridRowModel = GridRowModel> extends GridRowParams<R> {
+export interface GridRowEditStartParams<R extends GridValidRowModel = any> extends GridRowParams<R> {
     /**
      * Which field triggered this event.
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.
@@ -82,7 +86,7 @@ declare enum GridRowEditStopReasons {
     tabKeyDown = "tabKeyDown",
     shiftTabKeyDown = "shiftTabKeyDown"
 }
-export interface GridRowEditStopParams<R extends GridRowModel = GridRowModel> extends GridRowParams<R> {
+export interface GridRowEditStopParams<R extends GridValidRowModel = any> extends GridRowParams<R> {
     /**
      * Which field triggered this event.
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/models/params/gridValueOptionsParams.d.ts

@@ -1,8 +1,8 @@
-import { GridRowModel, GridRowId } from '../gridRows';
+import { GridRowId, GridValidRowModel } from '../gridRows';
 /**
  * Object passed as parameter of the valueOptions function for singleSelect column.
  */
-export interface GridValueOptionsParams {
+export interface GridValueOptionsParams<R extends GridValidRowModel = any> {
     /**
      * The field of the column to which options will be provided
      */
@@ -14,5 +14,5 @@ export interface GridValueOptionsParams {
     /**
      * The row model of the row that the current cell belongs to.
      */
-    row?: GridRowModel;
+    row?: R;
 }

package/models/params/index.d.ts

@@ -10,3 +10,4 @@ export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
+export * from './gridPreferencePanelParams';

package/models/params/index.js

@@ -9,4 +9,5 @@ export * from './gridRowSelectionCheckboxParams';
 export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
-export * from './gridSortModelParams';
+export * from './gridSortModelParams';
+export * from './gridPreferencePanelParams';

package/models/props/DataGridProps.d.ts

@@ -8,7 +8,7 @@ import { GridFeatureMode } from '../gridFeatureMode';
 import { Logger } from '../logger';
 import { GridSortDirection, GridSortModel } from '../gridSortModel';
 import { GridSlotsComponent } from '../gridSlotsComponent';
-import { GridRowIdGetter, GridRowsProp, GridRowModel } from '../gridRows';
+import { GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
 import { GridEventListener, GridEvents } from '../events';
 import { GridCallbackDetails, GridLocaleText } from '../api';
 import { GridApiCommunity } from '../api/gridApiCommunity';
@@ -40,13 +40,13 @@ export interface GridExperimentalFeatures {
 /**
  * The props users can give to the `DataGrid` component.
  */
-export declare type DataGridProps = Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue, DataGridForcedPropsKey> & {
+export declare type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<R>, DataGridForcedPropsKey> & {
     pagination?: true;
 };
 /**
  * The props of the `DataGrid` component after the pre-processing phase.
  */
-export interface DataGridProcessedProps extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue {
+export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R> {
 }
 /**
  * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
@@ -293,7 +293,7 @@ export interface DataGridPropsWithDefaultValues {
 /**
  * The `DataGrid` props with no default value.
  */
-export interface DataGridPropsWithoutDefaultValue extends CommonProps {
+export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends CommonProps {
     /**
      * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
      * TODO: Remove `@internal` when opening `apiRef` to Community plan
@@ -328,13 +328,13 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @returns {string} The CSS class to apply to the cell.
      */
-    getCellClassName?: (params: GridCellParams) => string;
+    getCellClassName?: (params: GridCellParams<any, R>) => string;
     /**
      * Function that applies CSS classes dynamically on rows.
      * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
      * @returns {string} The CSS class to apply to the row.
      */
-    getRowClassName?: (params: GridRowClassNameParams) => string;
+    getRowClassName?: (params: GridRowClassNameParams<R>) => string;
     /**
      * Function that sets the row height per row.
      * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
@@ -352,25 +352,25 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
      * @param {GridRowParams} params With all properties from [[GridRowParams]].
      * @returns {JSX.Element} The row detail element.
      */
-    getDetailPanelContent?: (params: GridRowParams) => React.ReactNode;
+    getDetailPanelContent?: (params: GridRowParams<R>) => React.ReactNode;
     /**
      * Callback fired when a cell is rendered, returns true if the cell is editable.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
      * @returns {boolean} A boolean indicating if the cell is editable.
      */
-    isCellEditable?: (params: GridCellParams) => boolean;
+    isCellEditable?: (params: GridCellParams<any, R>) => boolean;
     /**
      * Determines if a row can be selected.
      * @param {GridRowParams} params With all properties from [[GridRowParams]].
      * @returns {boolean} A boolean indicating if the cell is selectable.
      */
-    isRowSelectable?: (params: GridRowParams) => boolean;
+    isRowSelectable?: (params: GridRowParams<R>) => boolean;
     /**
      * Callback fired when the edit cell value changes.
      * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
      * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
      * @param {GridCallbackDetails} details Additional details for this callback.
-     * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+     * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
      */
     onEditCellPropsChange?: GridEventListener<GridEvents.editCellPropsChange>;
     /**
@@ -556,6 +556,20 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onPageSizeChange?: (pageSize: number, details: GridCallbackDetails) => void;
+    /**
+     * Callback fired when the preferences panel is closed.
+     * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+     * @param {MuiEvent<{}>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onPreferencePanelClose?: GridEventListener<GridEvents.preferencePanelClose>;
+    /**
+     * Callback fired when the preferences panel is opened.
+     * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+     * @param {MuiEvent<{}>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onPreferencePanelOpen?: GridEventListener<GridEvents.preferencePanelOpen>;
     /**
      * Set the edit rows model of the grid.
      */
@@ -618,7 +632,7 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
     /**
      * Set of columns of type [[GridColumns]].
      */
-    columns: GridColumns;
+    columns: GridColumns<R>;
     /**
      * An error that will turn the grid into its error state and display the error component.
      */
@@ -626,7 +640,7 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
     /**
      * Return the id of a given [[GridRowModel]].
      */
-    getRowId?: GridRowIdGetter;
+    getRowId?: GridRowIdGetter<R>;
     /**
      * If `true`, a  loading overlay is displayed.
      */
@@ -638,7 +652,7 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
     /**
      * Set of rows of type [[GridRowsProp]].
      */
-    rows: GridRowsProp;
+    rows: GridRowsProp<R>;
     /**
      * The initial state of the DataGrid.
      * The data in it will be set in the state on initialization but will not be controlled.
@@ -661,9 +675,15 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
     /**
      * Callback called before updating a row with new values in the row and cell editing.
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-     * @param {GridRowModel} newRow Row object with the new values.
-     * @param {GridRowModel} oldRow Row object with the old values.
-     * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+     * @template R
+     * @param {R} newRow Row object with the new values.
+     * @param {R} oldRow Row object with the old values.
+     * @returns {Promise<R> | R} The final values to update the row.
+     */
+    processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;
+    /**
+     * Callback called when `processRowUpdate` throws an error or rejects.
+     * @param {any} error The error thrown.
      */
-    processRowUpdate?: (newRow: GridRowModel, oldRow: GridRowModel) => Promise<GridRowModel> | GridRowModel;
+    onProcessRowUpdateError?: (error: any) => void;
 }

package/modern/DataGrid/DataGrid.js

@@ -458,7 +458,7 @@ DataGridRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -498,6 +498,28 @@ DataGridRaw.propTypes = {
    */
   onPageSizeChange: PropTypes.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: PropTypes.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: PropTypes.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -604,9 +626,10 @@ DataGridRaw.propTypes = {
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-   * @param {GridRowModel} newRow Row object with the new values.
-   * @param {GridRowModel} oldRow Row object with the old values.
-   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
 
@@ -631,7 +654,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array.isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/modern/DataGrid/useDataGridComponent.js

@@ -8,8 +8,7 @@ import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
-import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
 import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
@@ -25,6 +24,7 @@ import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
+import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export const useDataGridComponent = props => {
   const apiRef = useGridInitialization(undefined, props);
   /**
@@ -49,23 +49,23 @@ export const useDataGridComponent = props => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridSorting(apiRef, props);
   useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/modern/colDef/gridDateColDef.js

@@ -10,7 +10,7 @@ export function gridDateFormatter({
     return value.toLocaleDateString();
   }
 
-  return value;
+  return value ?? '';
 }
 export function gridDateTimeFormatter({
   value
@@ -19,7 +19,7 @@ export function gridDateTimeFormatter({
     return value.toLocaleString();
   }
 
-  return value;
+  return value ?? '';
 }
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',

package/modern/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -1,9 +1,9 @@
-import { GRID_STRING_COL_DEF } from '../../colDef/gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from '../../colDef/gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '../../colDef/gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from '../../colDef/gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from '../../colDef/gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../colDef/gridActionsColDef';
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
 export const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 export const getGridDefaultColumnTypes = () => {
   const nativeColumnTypes = {

package/modern/colDef/index.js

@@ -9,4 +9,5 @@ export * from './gridBooleanOperators';
 export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
+export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';