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

Closed
BrianWhiting opened this issue Apr 26, 2024 · 6 comments · Fixed by #13313
Assignees
Labels
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 plan: Pro Impact at least one Pro user regression A bug, but worse

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
@cherniavskii cherniavskii added plan: Pro Impact at least one Pro user regression A bug, but worse and removed bug 🐛 Something doesn't work labels Jun 18, 2024
Copy link

github-actions bot commented Jul 9, 2024

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@BrianWhiting: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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 plan: Pro Impact at least one Pro user regression A bug, but worse
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants