[DataGrid] Performance optimization

docs/src/pages/components/data-grid/columns/ValueGetterGrid.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 
 function getFullName(params) {
-  return `${params.getValue('firstName') || ''} ${
-    params.getValue('lastName') || ''
+  return `${params.getValue(params.id, 'firstName') || ''} ${
+    params.getValue(params.id, 'lastName') || ''
   }`;
 }
 
@@ -15,8 +15,7 @@ const columns = [
     headerName: 'Full name',
     width: 160,
     valueGetter: getFullName,
-    sortComparator: (v1, v2, cellParams1, cellParams2) =>
-      getFullName(cellParams1).localeCompare(getFullName(cellParams2)),
+    sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()),
   },
 ];
 

docs/src/pages/components/data-grid/columns/ValueGetterGrid.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DataGrid, GridColDef, GridSortCellParams } from '@material-ui/data-grid';
+import { DataGrid, GridColDef, GridValueGetterParams } from '@material-ui/data-grid';
 
-function getFullName(params: GridSortCellParams) {
-  return `${params.getValue('firstName') || ''} ${
-    params.getValue('lastName') || ''
+function getFullName(params: GridValueGetterParams) {
+  return `${params.getValue(params.id, 'firstName') || ''} ${
+    params.getValue(params.id, 'lastName') || ''
   }`;
 }
 
@@ -15,8 +15,7 @@ const columns: GridColDef[] = [
     headerName: 'Full name',
     width: 160,
     valueGetter: getFullName,
-    sortComparator: (v1, v2, cellParams1, cellParams2) =>
-      getFullName(cellParams1).localeCompare(getFullName(cellParams2)),
+    sortComparator: (v1, v2) => v1!.toString().localeCompare(v2!.toString()),
   },
 ];
 

docs/src/pages/components/data-grid/editing/CatchEditingEventsGrid.js

@@ -20,7 +20,7 @@ export default function CatchEditingEventsGrid() {
   React.useEffect(() => {
     return apiRef.current.subscribeEvent(GRID_CELL_EDIT_ENTER, (params, event) => {
       setMessage(
-        `Editing cell with value: ${params.value} at row: ${params.rowIndex}, column: ${params.field}, triggered by ${event.type}.`,
+        `Editing cell with value: ${params.value} and row id: ${params.id}, column: ${params.field}, triggered by ${event.type}.`,
       );
     });
   }, [apiRef]);

docs/src/pages/components/data-grid/editing/CatchEditingEventsGrid.tsx

@@ -25,8 +25,8 @@ export default function CatchEditingEventsGrid() {
       GRID_CELL_EDIT_ENTER,
       (params: GridCellParams, event?: React.SyntheticEvent) => {
         setMessage(
-          `Editing cell with value: ${params.value} at row: ${
-            params.rowIndex
+          `Editing cell with value: ${params.value} and row id: ${
+            params.id
           }, column: ${params.field}, triggered by ${event!.type}.`,
         );
       },

docs/src/pages/components/data-grid/editing/ValueGetterGrid.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 
 function getFullName(params) {
-  return `${params.getValue('firstName') || ''} ${
-    params.getValue('lastName') || ''
+  return `${params.getValue(params.id, 'firstName') || ''} ${
+    params.getValue(params.id, 'lastName') || ''
   }`;
 }
 
@@ -48,8 +48,7 @@ const columns = [
     width: 160,
     editable: true,
     valueGetter: getFullName,
-    sortComparator: (v1, v2, cellParams1, cellParams2) =>
-      getFullName(cellParams1).localeCompare(getFullName(cellParams2)),
+    sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()),
   },
 ];
 

docs/src/pages/components/data-grid/editing/ValueGetterGrid.tsx

@@ -4,12 +4,12 @@ import {
   DataGrid,
   GridColDef,
   GridEditCellPropsParams,
-  GridSortCellParams,
+  GridValueGetterParams,
 } from '@material-ui/data-grid';
 
-function getFullName(params: GridSortCellParams) {
-  return `${params.getValue('firstName') || ''} ${
-    params.getValue('lastName') || ''
+function getFullName(params: GridValueGetterParams) {
+  return `${params.getValue(params.id, 'firstName') || ''} ${
+    params.getValue(params.id, 'lastName') || ''
   }`;
 }
 
@@ -52,8 +52,7 @@ const columns: GridColDef[] = [
     width: 160,
     editable: true,
     valueGetter: getFullName,
-    sortComparator: (v1, v2, cellParams1, cellParams2) =>
-      getFullName(cellParams1).localeCompare(getFullName(cellParams2)),
+    sortComparator: (v1, v2) => v1!.toString().localeCompare(v2!.toString()),
   },
 ];
 

docs/src/pages/components/data-grid/overview/DataGridDemo.js

@@ -18,7 +18,9 @@ const columns = [
     sortable: false,
     width: 160,
     valueGetter: (params) =>
-      `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
+      `${params.getValue(params.id, 'firstName') || ''} ${
+        params.getValue(params.id, 'lastName') || ''
+      }`,
   },
 ];
 

docs/src/pages/components/data-grid/overview/DataGridDemo.tsx

@@ -18,7 +18,9 @@ const columns: GridColDef[] = [
     sortable: false,
     width: 160,
     valueGetter: (params: GridValueGetterParams) =>
-      `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
+      `${params.getValue(params.id, 'firstName') || ''} ${
+        params.getValue(params.id, 'lastName') || ''
+      }`,
   },
 ];
 

docs/src/pages/components/data-grid/rows/StylingRowsGrid.js

@@ -56,7 +56,9 @@ export default function StylingRowsGrid() {
     <div style={{ height: 400, width: '100%' }} className={classes.root}>
       <DataGrid
         {...data}
-        getRowClassName={(params) => `super-app-theme--${params.getValue('status')}`}
+        getRowClassName={(params) =>
+          `super-app-theme--${params.getValue(params.id, 'status')}`
+        }
       />
     </div>
   );

docs/src/pages/components/data-grid/rows/StylingRowsGrid.tsx

@@ -56,7 +56,9 @@ export default function StylingRowsGrid() {
     <div style={{ height: 400, width: '100%' }} className={classes.root}>
       <DataGrid
         {...data}
-        getRowClassName={(params) => `super-app-theme--${params.getValue('status')}`}
+        getRowClassName={(params) =>
+          `super-app-theme--${params.getValue(params.id, 'status')}`
+        }
       />
     </div>
   );

docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.js

@@ -11,8 +11,12 @@ const columns = [
   {
     field: 'username',
     valueGetter: (params) =>
-      `${params.getValue('name') || 'unknown'} - ${params.getValue('age') || 'x'}`,
-    sortComparator: (v1, v2, param1, param2) => param1.row.age - param2.row.age,
+      `${params.getValue(params.id, 'name') || 'unknown'} - ${
+        params.getValue(params.id, 'age') || 'x'
+      }`,
+    sortComparator: (v1, v2, param1, param2) =>
+      param1.api.getCellValue(param1.id, 'age') -
+      param2.api.getCellValue(param2.id, 'age'),
     width: 150,
   },
   { field: 'dateCreated', type: 'date', width: 180 },

docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.tsx

@@ -17,8 +17,12 @@ const columns: GridColumns = [
   {
     field: 'username',
     valueGetter: (params: GridValueGetterParams) =>
-      `${params.getValue('name') || 'unknown'} - ${params.getValue('age') || 'x'}`,
-    sortComparator: (v1, v2, param1, param2) => param1.row.age - param2.row.age,
+      `${params.getValue(params.id, 'name') || 'unknown'} - ${
+        params.getValue(params.id, 'age') || 'x'
+      }`,
+    sortComparator: (v1, v2, param1, param2) =>
+      param1.api.getCellValue(param1.id, 'age') -
+      param2.api.getCellValue(param2.id, 'age'),
     width: 150,
   },
   { field: 'dateCreated', type: 'date', width: 180 },

packages/grid/_modules_/grid/components/GridViewport.tsx

@@ -7,6 +7,7 @@ import {
   gridFocusCellSelector,
   gridTabIndexCellSelector,
 } from '../hooks/features/focus/gridFocusStateSelector';
+import { gridEditRowsStateSelector } from '../hooks/features/rows/gridEditRowsSelector';
 import { gridSelectionStateSelector } from '../hooks/features/selection/gridSelectionSelector';
 import { renderStateSelector } from '../hooks/features/virtualization/renderingStateSelector';
 import { optionsSelector } from '../hooks/utils/optionsSelector';
@@ -40,6 +41,7 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
     const selectionState = useGridSelector(apiRef, gridSelectionStateSelector);
     const rows = useGridSelector(apiRef, visibleSortedGridRowsAsArraySelector);
     const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+    const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
 
     const getRowsElements = () => {
       if (renderState.renderContext == null) {
@@ -67,12 +69,15 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
             id={id}
             firstColIdx={renderState.renderContext!.firstColIdx!}
             lastColIdx={renderState.renderContext!.lastColIdx!}
-            hasScroll={{ y: scrollBarState!.hasScrollY, x: scrollBarState.hasScrollX }}
+            hasScrollX={scrollBarState.hasScrollX}
+            hasScrollY={scrollBarState.hasScrollY}
             showCellRightBorder={!!options.showCellRightBorder}
             extendRowFullWidth={!options.disableExtendRowFullWidth}
             rowIndex={renderState.renderContext!.firstRowIdx! + idx}
             cellFocus={cellFocus}
             cellTabIndex={cellTabIndex}
+            isSelected={selectionState[id] !== undefined}
+            editRowState={editRowsState[id]}
           />
           <GridEmptyCell width={renderState.renderContext!.rightEmptyWidth} height={rowHeight} />
         </GridRow>

packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx

@@ -2,25 +2,27 @@ import * as React from 'react';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import { GridCellParams } from '../../models/params/gridCellParams';
 
-export function GridBooleanCell(props: GridCellParams & SvgIconProps) {
+export const GridBooleanCell = React.memo((props: GridCellParams & SvgIconProps) => {
   const {
     id,
     value,
-    element,
     formattedValue,
     api,
     field,
     row,
     colDef,
     cellMode,
-    getValue,
-    rowIndex,
-    colIndex,
     isEditable,
+    hasFocus,
+    tabIndex,
+    getValue,
     ...other
   } = props;
 
-  const Icon = value ? api.components.BooleanCellTrueIcon : api.components.BooleanCellFalseIcon;
+  const Icon = React.useMemo(
+    () => (value ? api.components.BooleanCellTrueIcon : api.components.BooleanCellFalseIcon),
+    [api.components.BooleanCellFalseIcon, api.components.BooleanCellTrueIcon, value],
+  );
 
   return (
     <Icon
@@ -31,6 +33,6 @@ export function GridBooleanCell(props: GridCellParams & SvgIconProps) {
       {...other}
     />
   );
-}
+});
 
 export const renderBooleanCell = (params) => <GridBooleanCell {...params} />;

packages/grid/_modules_/grid/components/cell/GridCell.tsx

@@ -30,6 +30,7 @@ export interface GridCellProps {
   hasFocus?: boolean;
   height: number;
   isEditable?: boolean;
+  isSelected?: boolean;
   rowIndex: number;
   showRightBorder?: boolean;
   value?: GridCellValue;
@@ -51,6 +52,7 @@ export const GridCell = React.memo((props: GridCellProps) => {
     hasFocus,
     height,
     isEditable,
+    isSelected,
     rowIndex,
     rowId,
     showRightBorder,
@@ -149,7 +151,7 @@ export const GridCell = React.memo((props: GridCellProps) => {
       cellRef.current &&
       (!document.activeElement || !cellRef.current!.contains(document.activeElement))
     ) {
-      const focusableElement = cellRef.current.querySelector('[tabindex="0"]') as HTMLElement;
+      const focusableElement = cellRef.current!.querySelector('[tabindex="0"]') as HTMLElement;
       if (focusableElement) {
         focusableElement!.focus();
       } else {
@@ -166,6 +168,7 @@ export const GridCell = React.memo((props: GridCellProps) => {
       data-value={value}
       data-field={field}
       data-rowindex={rowIndex}
+      data-rowselected={isSelected}
       data-editable={isEditable}
       data-mode={cellMode}
       aria-colindex={colIndex}

packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx

@@ -11,18 +11,15 @@ export function GridEditBooleanCell(
   const {
     id: idProp,
     value,
-    element,
     formattedValue,
     api,
     field,
     row,
     colDef,
     cellMode,
-    getValue,
-    rowIndex,
-    colIndex,
     isEditable,
     className,
+    getValue,
     ...other
   } = props;
 

packages/grid/_modules_/grid/components/cell/GridEditInputCell.tsx

@@ -14,10 +14,9 @@ export function GridEditInputCell(props: GridCellParams & InputBaseProps) {
     row,
     colDef,
     cellMode,
-    getValue,
-    rowIndex,
-    colIndex,
     isEditable,
+    hasFocus,
+    getValue,
     ...other
   } = props;