[DataGrid] Fix reset of virtualPage

packages/grid/_modules_/grid/components/containers/GridDataContainer.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { GRID_DATA_CONTAINER_CSS_CLASS } from '../../constants/cssClassesConstants';
-import { useGridState } from '../../hooks/features/core/useGridState';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
+import {
+ gridDataContainerSizesSelector,
+ gridScrollBarSizeSelector,
+} from '../../hooks/root/gridContainerSizesSelector';
 import { classnames } from '../../utils';
 import { GridApiContext } from '../GridApiContext';
 
@@ -9,14 +13,15 @@ type GridDataContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export function GridDataContainer(props: GridDataContainerProps) {
  const { className, ...other } = props;
  const apiRef = React.useContext(GridApiContext);
- const [gridState] = useGridState(apiRef!);
+ const dataContainerSizes = useGridSelector(apiRef!, gridDataContainerSizesSelector);
+ const scrollBar = useGridSelector(apiRef!, gridScrollBarSizeSelector);
 
  const style: any = {
- minWidth: gridState.containerSizes?.dataContainerSizes?.width,
+ minWidth: dataContainerSizes?.width,
  };
 
- if (gridState.scrollBar.hasScrollY) {
- style.minHeight = gridState.containerSizes?.dataContainerSizes?.height!;
+ if (scrollBar.hasScrollY) {
+ style.minHeight = dataContainerSizes?.height!;
  }
 
  return (

packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts

@@ -156,6 +156,11 @@ export const useGridVirtualRows = (
  logger.debug(`Changing page from ${page} to ${nextPage}`);
  requireRerender = true;
  } else {
+ if (!containerProps.isVirtualized && page > 0) {
+ logger.debug(`Virtualization disabled, setting virtualPage to 0`);
+ setRenderingState({ virtualPage: 0 });
+ }
+
  scrollTo(scrollParams);
  }
  setRenderingState({

packages/grid/_modules_/grid/hooks/root/gridContainerSizesSelector.ts

@@ -1,11 +1,19 @@
 import { createSelector } from 'reselect';
+import { ElementSize } from '../../models/elementSize';
 import { GridContainerProps } from '../../models/gridContainerProps';
 import { GridState } from '../features/core/gridState';
 
 export const gridContainerSizesSelector = (state: GridState) => state.containerSizes;
 export const gridViewportSizesSelector = (state: GridState) => state.viewportSizes;
 export const gridScrollBarSizeSelector = (state: GridState) => state.scrollBar;
 
+export const gridDataContainerSizesSelector = createSelector<
+ GridState,
+ GridContainerProps | null,
+ ElementSize | null
+>(gridContainerSizesSelector, (containerSizes) =>
+ containerSizes == null ? null : containerSizes.dataContainerSizes,
+);
 export const gridDataContainerHeightSelector = createSelector<
  GridState,
  GridContainerProps | null,

packages/grid/x-grid/src/tests/rows.XGrid.test.tsx

@@ -358,6 +358,34 @@ describe('<XGrid /> - Rows', () => {
  expect(isVirtualized).to.equal(false);
  });
 
+ it('should set the virtual page to 0 when resetting rows to a non virtualized length', () => {
+ const { setProps } = render(<TestCaseVirtualization nbRows={996} hideFooter height={600} />);
+
+ const gridWindow = document.querySelector('.MuiDataGrid-window')!;
+ gridWindow.scrollTop = 10e6; // scroll to the bottom
+ gridWindow.dispatchEvent(new Event('scroll'));
+
+ let lastCell = document.querySelector('[role="row"]:last-child [role="cell"]:first-child')!;
+ expect(lastCell).to.have.text('995');
+
+ let virtualPage = apiRef!.current!.getState().rendering!.virtualPage;
+ expect(virtualPage).to.equal(98);
+
+ setProps({ nbRows: 9 });
+
+ lastCell = document.querySelector('[role="row"]:last-child [role="cell"]:first-child')!;
+ expect(lastCell).to.have.text('8');
+
+ const renderingZone = document.querySelector('.MuiDataGrid-renderingZone')! as HTMLElement;
+ expect(renderingZone.children.length).to.equal(9);
+
+ virtualPage = apiRef!.current!.getState().rendering!.virtualPage;
+ expect(virtualPage).to.equal(0);
+
+ const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+ expect(isVirtualized).to.equal(false);
+ });
+
  describe('Pagination', () => {
  it('should render only the pageSize', () => {
  render(<TestCaseVirtualization pagination pageSize={32} />);

packages/storybook/src/stories/grid-rows.stories.tsx

@@ -1,5 +1,5 @@
-import Alert from '@material-ui/lab/Alert';
 import * as React from 'react';
+import Alert from '@material-ui/lab/Alert';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Popper from '@material-ui/core/Popper';
@@ -875,3 +875,42 @@ export function EditCellWithMessageGrid() {
  </div>
  );
 }
+
+export function SwitchVirtualization() {
+ const { data, setRowLength } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 200,
+ maxColumns: 20,
+ });
+
+ const handleButtonClick = (nbRows: number) => {
+ setRowLength(nbRows);
+ };
+
+ React.useLayoutEffect(() => {
+ const window = document.querySelector('.MuiDataGrid-window');
+ if (window) {
+ window!.scrollTo(0, 5000);
+ }
+ });
+
+ return (
+ <div
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+ height: '100%',
+ width: '100%',
+ }}
+ >
+ <div>
+ <Button onClick={() => handleButtonClick(9)}>9 items</Button>
+ <Button onClick={() => handleButtonClick(100)}>100 items</Button>
+ </div>
+ <div style={{ width: '100%', height: 500 }}>
+ <XGrid rows={data.rows} columns={data.columns} />
+ </div>
+ </div>
+ );
+}