Revisit SCU (#1764)

* Ignore cellMetaData in SCU
Improve scrollLeft logic for initial render

* Add some comments

* Destructure props

* Fix typo

* Do not ignore cellMetaData

Author: amanmahajan7

packages/react-data-grid/src/Canvas.tsx

@@ -45,7 +45,7 @@ export interface CanvasProps<R> extends SharedViewportProps<R>, SharedViewportSt
   onScroll(position: ScrollPosition): void;
 }
 
-type RendererProps<R> = Pick<CanvasProps<R>, 'columns' | 'cellMetaData' | 'colVisibleStartIdx' | 'colVisibleEndIdx' | 'colOverscanEndIdx' | 'colOverscanStartIdx' | 'lastFrozenColumnIndex' | 'isScrolling'> & {
+type RendererProps<R> = Pick<CanvasProps<R>, 'columns' | 'cellMetaData' | 'colOverscanEndIdx' | 'colOverscanStartIdx' | 'lastFrozenColumnIndex' | 'isScrolling'> & {
   ref(row: (RowRenderer<R> & React.Component<RowRendererProps<R>>) | null): void;
   key: number;
   idx: number;
@@ -289,8 +289,6 @@ export default class Canvas<R> extends React.PureComponent<CanvasProps<R>> {
           isSelected: this.isRowSelected(rowIdx, row),
           cellMetaData,
           subRowDetails,
-          colVisibleStartIdx,
-          colVisibleEndIdx,
           colOverscanStartIdx,
           colOverscanEndIdx,
           lastFrozenColumnIndex,

packages/react-data-grid/src/Cell.tsx

@@ -7,6 +7,7 @@ import CellActions from './Cell/CellActions';
 import CellExpand from './Cell/CellExpander';
 import CellContent from './Cell/CellContent';
 import { isFrozen } from './ColumnUtils';
+import { isPositionStickySupported } from './utils';
 
 function getSubRowOptions<R>({ rowIdx, idx, rowData, expandableOptions: expandArgs }: CellProps<R>): SubRowOptions<R> {
   return { rowIdx, idx, rowData, expandArgs };
@@ -27,25 +28,15 @@ export default class Cell<R> extends React.Component<CellProps<R>> implements Ce
   private readonly cell = React.createRef<HTMLDivElement>();
 
   shouldComponentUpdate(nextProps: CellProps<R>) {
+    // TODO: optimize cellMetatData as it is recreated whenever `ReactDataGrid` renders
+    // On the modern browsers we are using position sticky so scrollLeft/setScrollLeft is not required
+    // On the legacy browsers scrollLeft sets the initial position so it can be safely ignored in the subsequent renders. Scrolling is handled by the setScrollLeft method
     const { scrollLeft, ...rest } = this.props;
     const { scrollLeft: nextScrollLeft, ...nextRest } = nextProps;
 
     return !shallowEqual(rest, nextRest);
   }
 
-  componentDidMount() {
-    const { scrollLeft } = this.props;
-    if (scrollLeft !== undefined) {
-      this.setScrollLeft(scrollLeft);
-    }
-  }
-
-  componentDidUpdate(prevProps: CellProps<R>) {
-    if (isFrozen(prevProps.column) && !isFrozen(this.props.column)) {
-      this.removeScroll();
-    }
-  }
-
   handleCellClick = () => {
     const { idx, rowIdx, cellMetaData } = this.props;
     cellMetaData.onCellClick({ idx, rowIdx });
@@ -88,10 +79,13 @@ export default class Cell<R> extends React.Component<CellProps<R>> implements Ce
   };
 
   getStyle(): React.CSSProperties {
+    const { column, height, scrollLeft } = this.props;
+
     return {
-      width: this.props.column.width,
-      height: this.props.height,
-      left: this.props.column.left
+      height,
+      width: column.width,
+      left: column.left,
+      transform: !isPositionStickySupported() && isFrozen(column) ? `translateX(${scrollLeft}px)` : 'none'
     };
   }
 

packages/react-data-grid/src/Row.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
+import shallowEqual from 'shallowequal';
 
-import rowComparer from './common/utils/RowComparer';
 import Cell from './Cell';
 import { isFrozen } from './ColumnUtils';
 import * as rowUtils from './RowUtils';
-import { isPositionStickySupported } from './utils';
 import { RowRenderer, RowRendererProps, CellRenderer, CellRendererProps, CalculatedColumn } from './common/types';
 
 export default class Row<R> extends React.Component<RowRendererProps<R>> implements RowRenderer<R> {
@@ -21,7 +20,10 @@ export default class Row<R> extends React.Component<RowRendererProps<R>> impleme
   private readonly cells = new Map<keyof R, CellRenderer>();
 
   shouldComponentUpdate(nextProps: RowRendererProps<R>) {
-    return rowComparer(nextProps, this.props);
+    const { scrollLeft, ...rest } = this.props;
+    const { scrollLeft: nextScrollLeft, ...nextRest } = nextProps;
+
+    return !shallowEqual(rest, nextRest);
   }
 
   handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
@@ -58,7 +60,7 @@ export default class Row<R> extends React.Component<RowRendererProps<R>> impleme
       rowData: row,
       expandableOptions: this.getExpandableOptions(key),
       isScrolling,
-      scrollLeft: isFrozen(column) && !isPositionStickySupported() ? scrollLeft : undefined,
+      scrollLeft,
       lastFrozenColumnIndex
     };
 

packages/react-data-grid/src/RowGroup.tsx

@@ -16,8 +16,6 @@ interface Props<R> {
   forceUpdate?: boolean;
   subRowDetails?: unknown;
   isRowHovered?: boolean;
-  colVisibleStartIdx: number;
-  colVisibleEndIdx: number;
   colOverscanStartIdx: number;
   colOverscanEndIdx: number;
   isScrolling?: boolean;

packages/react-data-grid/src/common/types.ts

@@ -160,7 +160,7 @@ export interface CellRendererProps<TRow, TValue = unknown> {
   rowData: TRow;
   cellMetaData: CellMetaData<TRow>;
   isScrolling?: boolean;
-  scrollLeft?: number;
+  scrollLeft: number;
   expandableOptions?: ExpandableOptions;
   lastFrozenColumnIndex: number;
 }