@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -145,10 +145,6 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
-    const dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
-      return;
-    }
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
@@ -241,10 +237,6 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     }
   }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, theme.direction, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
-    const dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
-      return;
-    }
     const isEditing = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
     const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector)(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !(0, _keyboardUtils.isNavigationKey)(event.key)) {
@@ -331,11 +323,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     }
   }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
-    const dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
-      return;
-    }
-    const focusedColumnGroup = (0, _focus.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
+    const focusedColumnGroup = (0, _focus.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
       return;
     }
@@ -438,8 +426,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (!canUpdateFocus) {
       return;
     }
-    const dimensions = apiRef.current.getRootDimensions();
-    if (currentPageRows.length === 0 || !dimensions) {
+    if (currentPageRows.length === 0) {
       return;
     }
     const direction = theme.direction;

package/node/hooks/features/pagination/gridPaginationUtils.js

@@ -16,7 +16,7 @@ const getPageCount = (rowCount, pageSize) => {
   return 0;
 };
 exports.getPageCount = getPageCount;
-const noRowCountInServerMode = exports.noRowCountInServerMode = (0, _warning.buildWarning)(["MUI: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
+const noRowCountInServerMode = exports.noRowCountInServerMode = (0, _warning.buildWarning)(["MUI X: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
 const getDefaultGridPaginationModel = autoPageSize => ({
   page: 0,
   pageSize: autoPageSize ? 0 : 100
@@ -31,7 +31,7 @@ const getValidPage = (page, pageCount = 0) => {
 exports.getValidPage = getValidPage;
 const throwIfPageSizeExceedsTheLimit = (pageSize, signatureProp) => {
   if (signatureProp === _utils.GridSignature.DataGrid && pageSize > MAX_PAGE_SIZE) {
-    throw new Error(['MUI: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    throw new Error(['MUI X: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
   }
 };
 exports.throwIfPageSizeExceedsTheLimit = throwIfPageSizeExceedsTheLimit;

package/node/hooks/features/pagination/useGridPagination.js

@@ -12,7 +12,6 @@ var _density = require("../density");
 var _utils = require("../../utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridPaginationSelector = require("./gridPaginationSelector");
-var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridPaginationUtils = require("./gridPaginationUtils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -148,12 +147,11 @@ const useGridPagination = (apiRef, props) => {
     apiRef.current.forceUpdate();
   };
   const handleUpdateAutoPageSize = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    if (!props.autoPageSize || !dimensions) {
+    if (!props.autoPageSize) {
       return;
     }
-    const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
-    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
+    const dimensions = apiRef.current.getRootDimensions();
+    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -102,7 +102,7 @@ const useGridRowSelection = (apiRef, props) => {
    */
   const setRowSelectionModel = React.useCallback(model => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
-      throw new Error(['MUI: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
+      throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
     const currentModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     if (currentModel !== model) {

package/node/hooks/features/rows/gridRowsSelector.js

@@ -39,11 +39,11 @@ const gridPinnedRowsSelector = exports.gridPinnedRowsSelector = (0, _createSelec
     bottom: rawPinnedRows?.bottom?.map(rowEntry => ({
       id: rowEntry.id,
       model: rowEntry.model ?? {}
-    })),
+    })) ?? [],
     top: rawPinnedRows?.top?.map(rowEntry => ({
       id: rowEntry.id,
       model: rowEntry.model ?? {}
-    }))
+    })) ?? []
   };
 });
 

package/node/hooks/features/rows/gridRowsUtils.js

@@ -12,7 +12,7 @@ exports.getMinimalContentHeight = getMinimalContentHeight;
 exports.updateCacheWithNewRows = exports.isAutoGeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
-var _densitySelector = require("../density/densitySelector");
+var _dimensions = require("../dimensions");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -37,7 +37,7 @@ const buildRootGroup = () => ({
 exports.buildRootGroup = buildRootGroup;
 function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
-    throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
@@ -163,7 +163,7 @@ const updateCacheWithNewRows = ({
   updates
 }) => {
   if (previousCache.updates.type === 'full') {
-    throw new Error('MUI: Unable to prepare a partial update if a full update is not applied yet');
+    throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
   }
 
   // Remove duplicate updates.
@@ -295,7 +295,7 @@ function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-function getMinimalContentHeight(apiRef, rowHeight) {
-  const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
-  return `var(--DataGrid-overlayHeight, ${2 * Math.floor(rowHeight * densityFactor)}px)`;
+function getMinimalContentHeight(apiRef) {
+  const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
+  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
 }

package/node/hooks/features/rows/useGridRows.js

@@ -131,7 +131,7 @@ const useGridRows = (apiRef, props) => {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
-      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI X: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     const nonPinnedRowsUpdates = [];
     updates.forEach(update => {
@@ -169,10 +169,10 @@ const useGridRows = (apiRef, props) => {
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
     if (!currentNode) {
-      throw new Error(`MUI: No row with id #${id} found`);
+      throw new Error(`MUI X: No row with id #${id} found.`);
     }
     if (currentNode.type !== 'group') {
-      throw new Error('MUI: Only group nodes can be expanded or collapsed');
+      throw new Error('MUI X: Only group nodes can be expanded or collapsed.');
     }
     const newNode = (0, _extends2.default)({}, currentNode, {
       childrenExpanded: isExpanded
@@ -224,13 +224,13 @@ const useGridRows = (apiRef, props) => {
   const setRowIndex = React.useCallback((rowId, targetIndex) => {
     const node = apiRef.current.getRowNode(rowId);
     if (!node) {
-      throw new Error(`MUI: No row with id #${rowId} found`);
+      throw new Error(`MUI X: No row with id #${rowId} found.`);
     }
     if (node.parent !== _gridRowsUtils.GRID_ROOT_GROUP_ID) {
-      throw new Error(`MUI: The row reordering do not support reordering of grouped rows yet`);
+      throw new Error(`MUI X: The row reordering do not support reordering of grouped rows yet.`);
     }
     if (node.type !== 'leaf') {
-      throw new Error(`MUI: The row reordering do not support reordering of footer or grouping rows`);
+      throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
       const group = (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
@@ -256,7 +256,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && newRows.length > 1) {
-      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
       return;

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -20,6 +20,8 @@ var _gridRowsSelector = require("./gridRowsSelector");
 var _useDataGridProps = require("../../../DataGrid/useDataGridProps");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// TODO: I think the row heights can now be encoded as a single `size` instead of `sizes.baseXxxx`
+
 const rowsMetaStateInitializer = state => (0, _extends2.default)({}, state, {
   rowsMeta: {
     currentPageTotalHeight: 0,
@@ -38,8 +40,8 @@ const getValidRowHeight = (rowHeightProp, defaultRowHeight, warningMessage) => {
   }
   return defaultRowHeight;
 };
-const rowHeightWarning = [`MUI: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
-const getRowHeightWarning = [`MUI: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');
+const rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
+const getRowHeightWarning = [`MUI X: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');
 
 /**
  * @requires useGridPageSize (method)
@@ -184,15 +186,15 @@ const useGridRowsMeta = (apiRef, props) => {
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
   const debouncedHydrateRowsMeta = React.useMemo(() => (0, _utils.unstable_debounce)(hydrateRowsMeta, props.rowPositionsDebounceMs), [hydrateRowsMeta, props.rowPositionsDebounceMs]);
-  const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
+  const storeMeasuredRowHeight = React.useCallback((id, height) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
     }
 
     // Only trigger hydration if the value is different, otherwise we trigger a loop
-    const needsHydration = rowsHeightLookup.current[id].sizes[`base${(0, _utils.unstable_capitalize)(position)}`] !== height;
+    const needsHydration = rowsHeightLookup.current[id].sizes.baseCenter !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes[`base${(0, _utils.unstable_capitalize)(position)}`] = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     if (needsHydration) {
       debouncedHydrateRowsMeta();
     }

package/node/hooks/features/scroll/useGridScroll.js

@@ -14,7 +14,7 @@ var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
-var _gridClasses = require("../../../constants/gridClasses");
+var _dimensions = require("../dimensions");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
@@ -56,6 +56,7 @@ const useGridScroll = (apiRef, props) => {
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
   const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
+    const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
     const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     const scrollToHeader = params.rowIndex == null;
@@ -64,7 +65,7 @@ const useGridScroll = (apiRef, props) => {
     }
     logger.debug(`Scrolling to cell at row ${params.rowIndex}, col: ${params.colIndex} `);
     let scrollCoordinates = {};
-    if (params.colIndex != null) {
+    if (params.colIndex !== undefined) {
       const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
       let cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
@@ -79,22 +80,20 @@ const useGridScroll = (apiRef, props) => {
       }
       // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
-        clientHeight: virtualScrollerRef.current.clientWidth,
+        clientHeight: dimensions.viewportInnerSize.width,
         scrollTop: Math.abs(virtualScrollerRef.current.scrollLeft),
         offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
-    if (params.rowIndex != null) {
+    if (params.rowIndex !== undefined) {
       const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state);
       const page = (0, _gridPaginationSelector.gridPageSelector)(apiRef);
       const pageSize = (0, _gridPaginationSelector.gridPageSizeSelector)(apiRef);
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
-      const topPinnedRowsHeight = virtualScrollerRef.current.querySelector(`.${_gridClasses.gridClasses['pinnedRows--top']}`)?.clientHeight || 0;
-      const bottomPinnedRowsHeight = virtualScrollerRef.current.querySelector(`.${_gridClasses.gridClasses['pinnedRows--bottom']}`)?.clientHeight || 0;
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: virtualScrollerRef.current.clientHeight - topPinnedRowsHeight - bottomPinnedRowsHeight,
+        clientHeight: dimensions.viewportInnerSize.height,
         scrollTop: virtualScrollerRef.current.scrollTop,
         offsetHeight: targetOffsetHeight,
         offsetTop: rowsMeta.positions[elementIndex]
@@ -108,13 +107,13 @@ const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && params.left != null && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = theme.direction === 'rtl' ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && params.top != null) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }

package/node/hooks/features/sorting/gridSortingUtils.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.sanitizeSortModel = exports.mergeStateWithSortModel = exports.gridStringOrNumberComparator = exports.gridNumberComparator = exports.gridDateComparator = exports.getNextGridSortDirection = exports.buildAggregatedSortingApplier = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _warning = require("../../../utils/warning");
-const sortModelDisableMultiColumnsSortingWarning = (0, _warning.buildWarning)(['MUI: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+const sortModelDisableMultiColumnsSortingWarning = (0, _warning.buildWarning)(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
 const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
-    sortModelDisableMultiColumnsSortingWarning();
+    if (process.env.NODE_ENV !== 'production') {
+      sortModelDisableMultiColumnsSortingWarning();
+    }
     return [model[0]];
   }
   return model;
@@ -32,7 +34,7 @@ const isDesc = direction => direction === 'desc';
  */
 const parseSortItem = (sortItem, apiRef) => {
   const column = apiRef.current.getColumn(sortItem.field);
-  if (!column) {
+  if (!column || sortItem.sort === null) {
     return null;
   }
   const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;

package/node/hooks/features/sorting/useGridSorting.js

@@ -66,7 +66,7 @@ const useGridSorting = (apiRef, props) => {
     const existing = sortModel.find(c => c.field === col.field);
     if (existing) {
       const nextSort = directionOverride === undefined ? (0, _gridSortingUtils.getNextGridSortDirection)(col.sortingOrder ?? props.sortingOrder, existing.sort) : directionOverride;
-      return nextSort == null ? undefined : (0, _extends2.default)({}, existing, {
+      return nextSort === undefined ? undefined : (0, _extends2.default)({}, existing, {
         sort: nextSort
       });
     }
@@ -76,7 +76,7 @@ const useGridSorting = (apiRef, props) => {
     };
   }, [apiRef, props.sortingOrder]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
-    if (colDef == null || colDef.sortable === false) {
+    if (colDef == null || colDef.sortable === false || props.disableColumnSorting) {
       return columnMenuItems;
     }
     const sortingOrder = colDef.sortingOrder || props.sortingOrder;
@@ -84,7 +84,7 @@ const useGridSorting = (apiRef, props) => {
       return [...columnMenuItems, 'columnMenuSortItem'];
     }
     return columnMenuItems;
-  }, [props.sortingOrder]);
+  }, [props.sortingOrder, props.disableColumnSorting]);
 
   /**
    * API METHODS
@@ -124,9 +124,6 @@ const useGridSorting = (apiRef, props) => {
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
   const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
     const column = apiRef.current.getColumn(field);
-    if (!column.sortable) {
-      return;
-    }
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
@@ -204,19 +201,27 @@ const useGridSorting = (apiRef, props) => {
    * EVENTS
    */
   const handleColumnHeaderClick = React.useCallback(({
-    field
+    field,
+    colDef
   }, event) => {
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
     const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
     sortColumn(field, undefined, allowMultipleSorting);
-  }, [sortColumn]);
+  }, [sortColumn, props.disableColumnSorting]);
   const handleColumnHeaderKeyDown = React.useCallback(({
-    field
+    field,
+    colDef
   }, event) => {
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
     // Ctrl + Enter opens the column menu
     if ((0, _keyboardUtils.isEnterKey)(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
-  }, [sortColumn]);
+  }, [sortColumn, props.disableColumnSorting]);
   const handleColumnsChange = React.useCallback(() => {
     // When the columns change we check that the sorted columns are still part of the dataset
     const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);

package/node/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = void 0;
+exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 /**
  * Get the columns state
@@ -22,4 +22,24 @@ const gridVirtualizationEnabledSelector = exports.gridVirtualizationEnabledSelec
  * Get the enabled state for virtualization
  * @category Virtualization
  */
-const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.enabledForColumns);
+const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.enabledForColumns);
+
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+const gridRenderContextSelector = exports.gridRenderContextSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.renderContext);
+
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+const gridRenderContextColumnsSelector = exports.gridRenderContextColumnsSelector = (0, _createSelector.createSelectorMemoized)(state => state.virtualization.renderContext.firstColumnIndex, state => state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
+  firstRowIndex: -1,
+  lastRowIndex: -1,
+  firstColumnIndex,
+  lastColumnIndex
+}));