[data grid] The bottom pinned row in a data grid does not stay at the bottom when there aren't any other rows in the data set

[BrianWhiting]

Steps to reproduce

Link to live example (7.3.1): https://stackblitz.com/edit/react-yp5dyf-mtr1cq?file=Demo.tsx

This appears to have broken with version 7.0.0. 6.19.11: https://stackblitz.com/edit/react-yp5dyf?file=Demo.tsx 7.0.0: https://stackblitz.com/edit/react-yp5dyf-1hxyj2?file=Demo.tsx

Current behavior

The bottom pinned row appears below the header

Expected behavior

The bottom pinned row should stay at the bottom of the grid

Context

I'm trying to display a grid of data with a pinned row at the bottom with the totals for each of the columns

Your environment

No response

Search keywords: pinned pin

[bdamicoei]

This is also a problem for us, and we cannot upgrade until this is fixed.

[michelengelen]

We could unset the height for the case when it should be 1, like this:

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index 2fc1b43d1..8ba65fa76 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -522,6 +522,8 @@ export const useGridVirtualScroller = () => {
       } else {
         size.height = contentHeight;
       }
+    } else if (height === 1) {
+      size.height = undefined;
     }

     return size;

any objections @romgrk ?

---

Another option would use the autoHeight prop on the data grid @BrianWhiting.

OR you could use the aggregation feature: Aggregation

[bdamicoei]

@michelengelen Would this also cover the case if there was only 1 row, and a bunch of a blank space?

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.

[bdamicoei]

Was this actually completed?