[DataGrid] Fix last row (#1071)

mui · Feb 23, 2021 · e87aa0e · e87aa0e
1 parent ca78a54
commit e87aa0e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts
@@ -182,6 +182,10 @@ export const useGridVirtualRows = (
 
   const scrollToIndexes = React.useCallback(
     (params: GridCellIndexCoordinates) => {
+      if (totalRowCount === 0 || visibleColumns.length === 0) {
+        return false;
+      }
+
       logger.debug(`Scrolling to cell at row ${params.rowIndex}, col: ${params.colIndex} `);
 
       let scrollLeft;
@@ -240,7 +244,16 @@ export const useGridVirtualRows = (
 
       return needScroll;
     },
-    [logger, apiRef, gridState, windowRef, rowHeight, columnsMeta.positions, visibleColumns],
+    [
+      totalRowCount,
+      visibleColumns,
+      logger,
+      apiRef,
+      gridState,
+      windowRef,
+      rowHeight,
+      columnsMeta.positions,
+    ],
   );
 
   const resetScroll = React.useCallback(() => {

diff --git a/packages/grid/_modules_/grid/hooks/root/useGridContainerProps.ts b/packages/grid/_modules_/grid/hooks/root/useGridContainerProps.ts
@@ -140,6 +140,9 @@ export const useGridContainerProps = (
         (options.autoPageSize ? 1 : rowsCount / viewportPageSize) * viewportSizes.height +
         (scrollState.hasScrollY ? scrollState.scrollBarSize.x : 0);
 
+      // make sure the last row fit well due to rounding
+      totalHeight += totalHeight % rowHeight;
+
       if (options.autoHeight) {
         totalHeight = rowsCount * rowHeight + scrollState.scrollBarSize.x;
       }

diff --git a/packages/storybook/src/stories/grid-rows.stories.tsx b/packages/storybook/src/stories/grid-rows.stories.tsx
@@ -176,9 +176,19 @@ const columns: any[] = [
 ];
 
 export function ScrollIssue() {
+  const apiRef = useGridApiRef();
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      apiRef.current.scrollToIndexes({ colIndex: 0, rowIndex: 6 });
+    }, 0);
+
+    return () => clearTimeout(timeout);
+  }, [apiRef]);
+
   return (
     <div style={{ height: 300, width: 600 }}>
-      <XGrid rows={rows} columns={columns} />
+      <XGrid rows={rows} columns={columns} apiRef={apiRef} />
     </div>
   );
 }