[DataGridPro] Fix scrolling performance when rowHeight={undefined} (#…

…14983)
mui · Oct 15, 2024 · 78cb399 · 78cb399
1 parent 05e83ee
commit 78cb399
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 96 deletions.
diff --git a/packages/x-data-grid/src/DataGrid/index.ts b/packages/x-data-grid/src/DataGrid/index.ts
@@ -1,2 +1 @@
 export * from './DataGrid';
-export { DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts
@@ -8,8 +8,9 @@ import {
 } from '../models/props/DataGridProps';
 import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
-import { GridEditModes, GridSlotsComponent, GridValidRowModel } from '../models';
+import { GridSlotsComponent, GridValidRowModel } from '../models';
 import { computeSlots, useProps } from '../internals/utils';
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../constants/dataGridPropsDefaultValues';
 
 const DATA_GRID_FORCED_PROPS: { [key in DataGridForcedPropsKey]?: DataGridProcessedProps[key] } = {
   disableMultipleColumnsFiltering: true,
@@ -23,66 +24,6 @@ const DATA_GRID_FORCED_PROPS: { [key in DataGridForcedPropsKey]?: DataGridProces
   signature: 'DataGrid',
 };
 
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
-  autoHeight: false,
-  autoPageSize: false,
-  autosizeOnMount: false,
-  checkboxSelection: false,
-  checkboxSelectionVisibleOnly: false,
-  clipboardCopyCellDelimiter: '\t',
-  columnBufferPx: 150,
-  columnHeaderHeight: 56,
-  disableAutosize: false,
-  disableColumnFilter: false,
-  disableColumnMenu: false,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  disableColumnSelector: false,
-  disableColumnSorting: false,
-  disableDensitySelector: false,
-  disableEval: false,
-  disableMultipleColumnsFiltering: false,
-  disableMultipleColumnsSorting: false,
-  disableMultipleRowSelection: false,
-  disableRowSelectionOnClick: false,
-  disableVirtualization: false,
-  editMode: GridEditModes.Cell,
-  filterDebounceMs: 150,
-  filterMode: 'client',
-  hideFooter: false,
-  hideFooterPagination: false,
-  hideFooterRowCount: false,
-  hideFooterSelectedRowCount: false,
-  ignoreDiacritics: false,
-  ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
-  keepColumnPositionIfDraggedOutside: false,
-  keepNonExistentRowsSelected: false,
-  loading: false,
-  logger: console,
-  logLevel: process.env.NODE_ENV === 'production' ? ('error' as const) : ('warn' as const),
-  pageSizeOptions: [25, 50, 100],
-  pagination: false,
-  paginationMode: 'client',
-  resizeThrottleMs: 60,
-  rowBufferPx: 150,
-  rowHeight: 52,
-  rowPositionsDebounceMs: 166,
-  rows: [],
-  rowSelection: true,
-  rowSpacingType: 'margin',
-  showCellVerticalBorder: false,
-  showColumnVerticalBorder: false,
-  sortingMode: 'client',
-  sortingOrder: ['asc' as const, 'desc' as const, null],
-  throttleRowsMs: 0,
-  unstable_rowSpanning: false,
-};
-
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 
 export const useDataGridProps = <R extends GridValidRowModel>(inProps: DataGridProps<R>) => {

diff --git a/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts b/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts
@@ -0,0 +1,62 @@
+import { GridEditModes } from '../models/gridEditRowModel';
+import type { DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
+  autoHeight: false,
+  autoPageSize: false,
+  autosizeOnMount: false,
+  checkboxSelection: false,
+  checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
+  columnBufferPx: 150,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
+  disableColumnFilter: false,
+  disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
+  disableColumnSelector: false,
+  disableColumnSorting: false,
+  disableDensitySelector: false,
+  disableEval: false,
+  disableMultipleColumnsFiltering: false,
+  disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
+  disableRowSelectionOnClick: false,
+  disableVirtualization: false,
+  editMode: GridEditModes.Cell,
+  filterDebounceMs: 150,
+  filterMode: 'client',
+  hideFooter: false,
+  hideFooterPagination: false,
+  hideFooterRowCount: false,
+  hideFooterSelectedRowCount: false,
+  ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  // TODO v8: Update to 'select'
+  indeterminateCheckboxAction: 'deselect',
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
+  logger: console,
+  logLevel: process.env.NODE_ENV === 'production' ? ('error' as const) : ('warn' as const),
+  pageSizeOptions: [25, 50, 100],
+  pagination: false,
+  paginationMode: 'client',
+  resizeThrottleMs: 60,
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rowPositionsDebounceMs: 166,
+  rows: [],
+  rowSelection: true,
+  rowSpacingType: 'margin',
+  showCellVerticalBorder: false,
+  showColumnVerticalBorder: false,
+  sortingMode: 'client',
+  sortingOrder: ['asc' as const, 'desc' as const, null],
+  throttleRowsMs: 0,
+  unstable_rowSpanning: false,
+};
diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -27,9 +27,14 @@ import { gridRenderContextSelector } from '../virtualization';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
+import {
+  calculatePinnedRowsHeight,
+  getValidRowHeight,
+  rowHeightWarning,
+} from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../constants/dataGridPropsDefaultValues';
 
 type RootProps = Pick<
   DataGridProcessedProps,
@@ -92,7 +97,16 @@ export function useGridDimensions(
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  const validRowHeight = React.useMemo(
+    () =>
+      getValidRowHeight(
+        props.rowHeight,
+        DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight,
+        rowHeightWarning,
+      ),
+    [props.rowHeight],
+  );
+  const rowHeight = Math.floor(validRowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const groupHeaderHeight = Math.floor(
     (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor,

diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts
@@ -437,3 +437,30 @@ export function computeRowsUpdates(
   });
   return nonPinnedRowsUpdates;
 }
+
+let warnedOnceInvalidRowHeight = false;
+
+export const getValidRowHeight = (
+  rowHeightProp: any,
+  defaultRowHeight: number,
+  warningMessage: string,
+) => {
+  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
+    return rowHeightProp;
+  }
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    !warnedOnceInvalidRowHeight &&
+    typeof rowHeightProp !== 'undefined' &&
+    rowHeightProp !== null
+  ) {
+    console.warn(warningMessage);
+    warnedOnceInvalidRowHeight = true;
+  }
+  return defaultRowHeight;
+};
+
+export const rowHeightWarning = [
+  `MUI X: The \`rowHeight\` prop should be a number greater than 0.`,
+  `The default value will be used instead.`,
+].join('\n');
diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -14,7 +14,8 @@ import { gridSortModelSelector } from '../sorting/gridSortingSelector';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid/useDataGridProps';
+import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
+import { getValidRowHeight } from './gridRowsUtils';
 
 // TODO: I think the row heights can now be encoded as a single `size` instead of `sizes.baseXxxx`
 
@@ -26,32 +27,6 @@ export const rowsMetaStateInitializer: GridStateInitializer = (state) => ({
   },
 });
 
-let warnedOnceInvalidRowHeight = false;
-const getValidRowHeight = (
-  rowHeightProp: any,
-  defaultRowHeight: number,
-  warningMessage: string,
-) => {
-  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
-    return rowHeightProp;
-  }
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    !warnedOnceInvalidRowHeight &&
-    typeof rowHeightProp !== 'undefined' &&
-    rowHeightProp !== null
-  ) {
-    console.warn(warningMessage);
-    warnedOnceInvalidRowHeight = true;
-  }
-  return defaultRowHeight;
-};
-
-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.`,
@@ -93,12 +68,10 @@ export const useGridRowsMeta = (
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const validRowHeight = getValidRowHeight(
-    props.rowHeight,
-    DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight,
-    rowHeightWarning,
+  const rowHeight = useGridSelector(
+    apiRef,
+    () => gridDimensionsSelector(apiRef.current.state).rowHeight,
   );
-  const rowHeight = Math.floor(validRowHeight * densityFactor);
 
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;

diff --git a/packages/x-data-grid/src/index.ts b/packages/x-data-grid/src/index.ts
@@ -9,6 +9,7 @@ export * from './DataGrid';
 
 export * from './components';
 export * from './constants';
+export * from './constants/dataGridPropsDefaultValues';
 export * from './hooks';
 export * from './models';
 export * from './context';
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './DataGrid';
		export { DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';