@mui/x-data-grid 5.8.0 → 5.9.0

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -97,6 +97,12 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * 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: PropTypes.any.isRequired,
+
   /**
    * The mode of the cell.
    */
@@ -112,10 +118,21 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    */
   field: PropTypes.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
@@ -159,7 +176,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridCellCheckboxForwardRef };
 export const GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);

package/modern/components/panel/GridPanel.js

@@ -80,6 +80,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     modifiers: modifiers
   }, other, {
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
@@ -136,6 +137,9 @@ function GridFilterForm(props) {
   const filterSelectorRef = React.useRef(null);
   const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   const baseFormControlProps = rootProps.componentsProps?.baseFormControl || {};
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isBaseSelectNative = baseSelectProps.native ?? true;
+  const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -245,9 +249,9 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
+        native: isBaseSelectNative
       }, rootProps.componentsProps?.baseSelect, {
-        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx("option", {
+        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx(OptionComponent, {
           value: linkOperator.toString(),
           children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
         }, linkOperator.toString()))
@@ -267,9 +271,9 @@ function GridFilterForm(props) {
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.columnField || '',
         onChange: changeColumn,
-        native: true
+        native: isBaseSelectNative
       }, rootProps.componentsProps?.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx("option", {
+        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -289,10 +293,10 @@ function GridFilterForm(props) {
         id: operatorSelectId,
         value: item.operatorValue,
         onChange: changeOperator,
-        native: true,
+        native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, rootProps.componentsProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_jsx("option", {
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_jsx(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)
         }, operator.value))

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,6 +17,9 @@ export function GridFilterInputBoolean(props) {
 
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = useGridRootProps();
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
+  const OptionComponent = isSelectNative ? 'option' : MenuItem;
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -32,21 +36,22 @@ export function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: _extends({
+      native: isSelectNative,
+      displayEmpty: true
+    }, rootProps.componentsProps?.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
   }, others, rootProps.componentsProps?.baseTextField, {
-    children: [/*#__PURE__*/_jsx("option", {
+    children: [/*#__PURE__*/_jsx(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -4,6 +4,7 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,21 +13,25 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/_jsx("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/_jsx("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 function GridFilterInputSingleSelect(props) {
@@ -42,6 +47,8 @@ function GridFilterInputSingleSelect(props) {
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const id = useId();
   const rootProps = useGridRootProps();
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -90,11 +97,11 @@ function GridFilterInputSingleSelect(props) {
     },
     inputRef: focusElementRef,
     select: true,
-    SelectProps: {
-      native: true
-    }
+    SelectProps: _extends({
+      native: isSelectNative
+    }, rootProps.componentsProps?.baseSelect)
   }, others, rootProps.componentsProps?.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   }));
 }
 

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -4,6 +4,7 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
@@ -19,21 +20,25 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/_jsx("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/_jsx("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 export const SUBMIT_FILTER_STROKE_TIME = 500;
@@ -57,12 +62,14 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? true;
   const singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, rootProps.componentsProps?.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   } : {};
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value; // NativeSelect casts the value to a string.

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -99,7 +99,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-labelledby": densityMenuId,
+      "aria-controls": densityMenuId,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/modern/components/virtualization/GridVirtualScroller.js

@@ -25,6 +25,8 @@ const VirtualScrollerRoot = styled('div', {
   overridesResolver: (props, styles) => styles.virtualScroller
 })({
   overflow: 'auto',
+  // See https://github.com/mui/mui-x/issues/4360
+  position: 'relative',
   '@media print': {
     overflow: 'hidden'
   }

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -24,9 +24,7 @@ const VirtualScrollerContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
-})({
-  position: 'relative'
-});
+})({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   const {
     className,

package/modern/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,2 @@
+// Can't import from pro package - hence duplication
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/modern/hooks/core/pipeProcessing/index.js

@@ -1,3 +1,4 @@
 export * from './gridPipeProcessingApi';
 export * from './useGridPipeProcessing';
-export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,9 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
+
 /**
  * Implement the Pipeline Pattern
  *
@@ -17,7 +16,10 @@ import { GridEvents } from '../../../models/events';
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterPipeProcessor` to register their processor.
- *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
  *
  * =====================================================================================================================
  *
@@ -25,35 +27,65 @@ import { GridEvents } from '../../../models/events';
  *
  * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
  *
- * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
- *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
  */
-
 export const useGridPipeProcessing = apiRef => {
   const processorsCache = React.useRef({});
+  const runAppliers = React.useCallback(groupCache => {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(callback => {
+      callback();
+    });
+  }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {};
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
     }
 
-    const groupProcessors = processorsCache.current[group];
-    const oldProcessor = groupProcessors[id];
+    const groupCache = processorsCache.current[group];
+    const oldProcessor = groupCache.processors[id];
 
     if (oldProcessor !== processor) {
-      processorsCache.current[group] = _extends({}, groupProcessors, {
-        [id]: processor
-      });
-      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
     }
 
     return () => {
-      const _ref = processorsCache.current[group],
-            otherProcessors = _objectWithoutPropertiesLoose(_ref, [id].map(_toPropertyKey));
+      const _processors = processorsCache.current[group].processors,
+            otherProcessors = _objectWithoutPropertiesLoose(_processors, [id].map(_toPropertyKey));
 
-      processorsCache.current[group] = otherProcessors;
-      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+      processorsCache.current[group].processors = otherProcessors;
     };
-  }, [apiRef]);
+  }, [runAppliers]);
+  const registerPipeApplier = React.useCallback((group, id, applier) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return () => {
+      const _appliers = processorsCache.current[group].appliers,
+            otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  const requestPipeProcessorsApplication = React.useCallback(group => {
+    const groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
 
@@ -61,13 +93,15 @@ export const useGridPipeProcessing = apiRef => {
       return value;
     }
 
-    const preProcessors = Object.values(processorsCache.current[group]);
+    const preProcessors = Object.values(processorsCache.current[group].processors);
     return preProcessors.reduce((acc, preProcessor) => {
       return preProcessor(acc, context);
     }, value);
   }, []);
   const preProcessingApi = {
     unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
     unstable_applyPipeProcessors: applyPipeProcessors
   };
   useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
+  const cleanup = React.useRef();
+  const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
+  const registerPreProcessor = React.useCallback(() => {
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return () => {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
+};

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
@@ -13,7 +15,15 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -37,18 +47,43 @@ export const useGridColumnHeaders = props => {
   const [renderContext, setRenderContext] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const prevScrollLeft = React.useRef(0);
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  const getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
+  }));
   const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender,
+      lastRowToRender,
+      apiRef,
+      visibleRows: currentPage.rows
+    });
     const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(() => {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
   const handleScroll = React.useCallback(({
     left,
     renderContext: nextRenderContext = null
-  }) => {
+  }, event) => {
     if (!innerRef.current) {
       return;
     } // Ignore vertical scroll.
@@ -59,15 +94,32 @@ export const useGridColumnHeaders = props => {
       return;
     }
 
-    prevScrollLeft.current = left;
+    prevScrollLeft.current = left; // We can only update the position when we guarantee that the render context has been
+    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+
+    let canUpdateInnerPosition = false;
 
     if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      setRenderContext(nextRenderContext);
+      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+      if (isUIEvent(event)) {
+        // To prevent flickering, the inner position can only be updated after the new context has
+        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+        // updating the position.
+        ReactDOM.flushSync(() => {
+          setRenderContext(nextRenderContext);
+        });
+        canUpdateInnerPosition = true;
+      } else {
+        setRenderContext(nextRenderContext);
+      }
+
       prevRenderContext.current = nextRenderContext;
+    } else {
+      canUpdateInnerPosition = true;
     } // Pass directly the render context to avoid waiting for the next render
 
 
-    if (nextRenderContext) {
+    if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
   }, [updateInnerPosition]);
@@ -93,7 +145,22 @@ export const useGridColumnHeaders = props => {
     }
 
     const columns = [];
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -117,7 +184,7 @@ export const useGridColumnHeaders = props => {
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -132,7 +199,6 @@ export const useGridColumnHeaders = props => {
     renderContext,
     getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition,
     getRootProps: (other = {}) => _extends({
       style: rootStyle
     }, other),