feat: scrolling uses smooth transition effects by default

src/DataGrid.tsx

@@ -85,7 +85,7 @@ type DefaultColumnOptions<R, SR> = Pick<
 
 export interface DataGridHandle {
   element: HTMLDivElement | null;
-  scrollToCell: (position: PartialPosition) => void;
+  scrollToCell: (position: PartialPosition, scrollIntoViewOptions?: boolean | ScrollIntoViewOptions) => void;
   selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
 }
 
@@ -293,6 +293,7 @@ function DataGrid<R, SR, K extends Key>(
   const lastSelectedRowIdx = useRef(-1);
   const focusSinkRef = useRef<HTMLDivElement>(null);
   const shouldFocusCellRef = useRef(false);
+  const scrollIntoViewOptions = useRef<boolean | ScrollIntoViewOptions>();
 
   /**
    * computed values
@@ -441,13 +442,14 @@ function DataGrid<R, SR, K extends Key>(
 
   useImperativeHandle(ref, () => ({
     element: gridRef.current,
-    scrollToCell({ idx, rowIdx }) {
+    scrollToCell({ idx, rowIdx }, options) {
       const scrollToIdx =
         idx !== undefined && idx > lastFrozenColumnIndex && idx < columns.length ? idx : undefined;
       const scrollToRowIdx =
         rowIdx !== undefined && isRowIdxWithinViewportBounds(rowIdx) ? rowIdx : undefined;
 
       if (scrollToIdx !== undefined || scrollToRowIdx !== undefined) {
+        scrollIntoViewOptions.current = options;
         setScrollToPosition({ idx: scrollToIdx, rowIdx: scrollToRowIdx });
       }
     },
@@ -678,7 +680,11 @@ function DataGrid<R, SR, K extends Key>(
     );
   }
 
-  function selectCell(position: Position, enableEditor?: Maybe<boolean>): void {
+  function selectCell(
+    position: Position,
+    enableEditor?: Maybe<boolean>,
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions
+  ): void {
     if (!isCellWithinSelectionBounds(position)) return;
     commitEditorChanges();
 
@@ -687,7 +693,7 @@ function DataGrid<R, SR, K extends Key>(
       setSelectedPosition({ ...position, mode: 'EDIT', row, originalRow: row });
     } else if (isSamePosition(selectedPosition, position)) {
       // Avoid re-renders if the selected cell state is the same
-      scrollIntoView(getCellToScroll(gridRef.current!));
+      scrollIntoView(getCellToScroll(gridRef.current!), scrollIntoViewOptions);
     } else {
       shouldFocusCellRef.current = true;
       setSelectedPosition({ ...position, mode: 'SELECT' });
@@ -1125,6 +1131,7 @@ function DataGrid<R, SR, K extends Key>(
           scrollToPosition={scrollToPosition}
           setScrollToCellPosition={setScrollToPosition}
           gridElement={gridRef.current!}
+          scrollIntoViewOptions={scrollIntoViewOptions.current}
         />
       )}
     </div>

src/ScrollToCell.tsx

@@ -11,18 +11,20 @@ export interface PartialPosition {
 export default function ScrollToCell({
   scrollToPosition: { idx, rowIdx },
   gridElement,
-  setScrollToCellPosition
+  setScrollToCellPosition,
+  scrollIntoViewOptions
 }: {
   scrollToPosition: PartialPosition;
   gridElement: HTMLDivElement;
   setScrollToCellPosition: (cell: null) => void;
+  scrollIntoViewOptions?: boolean | ScrollIntoViewOptions | undefined;
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     // scroll until the cell is completely visible
     // this is needed if the grid has auto-sized columns
-    scrollIntoView(ref.current);
+    scrollIntoView(ref.current, scrollIntoViewOptions);
   });
 
   useLayoutEffect(() => {

src/utils/domUtils.ts

@@ -4,6 +4,17 @@ export function stopPropagation(event: React.SyntheticEvent) {
   event.stopPropagation();
 }
 
-export function scrollIntoView(element: Maybe<Element>) {
-  element?.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+export function scrollIntoView(
+  element: Maybe<Element>,
+  coverOptions?: boolean | ScrollIntoViewOptions
+) {
+  if(element?.scrollIntoView) {
+    let options: typeof coverOptions = { inline: 'nearest', block: 'nearest' };
+    if (typeof coverOptions === 'boolean') {
+      options = coverOptions;
+    } else if(typeof coverOptions === 'object') {
+      options = Object.assign(options, coverOptions);
+    }
+    element.scrollIntoView(options);
+  }
 }

website/demos/ScrollToCell.tsx

@@ -41,7 +41,7 @@ export default function ScrollToCell({ direction }: Props) {
   }
 
   function scrollToCell() {
-    gridRef.current!.scrollToCell({ idx, rowIdx });
+    gridRef.current!.scrollToCell({ idx, rowIdx }, { behavior: 'smooth' }); // smooth transition
   }
 
   return (