Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[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 #12925

Open
BrianWhiting opened this issue Apr 26, 2024 · 5 comments
Assignees
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Row pinning Related to the data grid Row pinning feature

Comments

@BrianWhiting
Copy link

BrianWhiting commented Apr 26, 2024

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

@BrianWhiting BrianWhiting added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 26, 2024
@bdamicoei
Copy link

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

@michelengelen michelengelen changed the title 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 [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 Apr 29, 2024
@michelengelen michelengelen added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Row pinning Related to the data grid Row pinning feature labels Apr 29, 2024
@michelengelen
Copy link
Member

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

@michelengelen michelengelen added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 29, 2024
@bdamicoei
Copy link

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

Copy link

github-actions bot commented May 6, 2024

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

@github-actions github-actions bot closed this as completed May 6, 2024
@bdamicoei
Copy link

Was this actually completed?

@romgrk romgrk reopened this May 6, 2024
@romgrk romgrk removed the status: waiting for author Issue with insufficient information label May 6, 2024
@romgrk romgrk self-assigned this May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Row pinning Related to the data grid Row pinning feature
Projects
None yet
Development

No branches or pull requests

4 participants