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.

Sign up for GitHub

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

Jump to bottom

[data grid] Print export fails when footer is set to hidden #13015

Open
sambbaahh opened this issue May 6, 2024 · 1 comment · May be fixed by #13034
Open

[data grid] Print export fails when footer is set to hidden #13015

sambbaahh opened this issue May 6, 2024 · 1 comment · May be fixed by #13034
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Export good first issue Great for first contributions. Enable to learn the contribution process. regression A bug, but worse

Comments

@sambbaahh
Copy link
Contributor

sambbaahh commented May 6, 2024 •
edited by github-actions bot

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-xezygx?file=Demo.jsx

Steps:

  1. Press 'Export'
  2. Press 'Print'

Current behavior

An error is displayed in the console:

"
Error in /turbo_modules/@mui/x-data-grid@7.3.2/node/hooks/features/export/useGridPrintExport.js (136:23)
Cannot read properties of null (reading 'style')
"

Expected behavior

Print all the rows that are in the datagrid and hide footer

Context

I am trying to hide the footer in the print export. But hideFooter: true breaks the data grid. And when set to false, it works as expected.

This error appeared after updating to the latest version. Before I was using version 6.11.1 and it worked.

Your environment

npx @mui/envinfo 
Tested with the latest versions of Firefox and Google Chrome.

  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.37 
    @mui/core-downloads-tracker:  5.15.16 
    @mui/icons-material: ^5.11.16 => 5.15.11
    @mui/lab: ^5.0.0-alpha.137 => 5.0.0-alpha.166
    @mui/material: ^5.15.15 => 5.15.16
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid: ^7.3.2 => 7.3.2
    @mui/x-date-pickers: ^7.3.2 => 7.3.2
    @types/react: ^18.2.59 => 18.2.59
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Search keywords: print export
@sambbaahh sambbaahh added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 6, 2024
@michelengelen
Copy link
Member

Hey @sambbaahh and thanks for raising this issue.
I can confirm that this is a regression.

It happens because the selector is not returning an element, since we do not render it when using the hideFooter option anymore.

With this diff it can be fixed:

diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
index 5ba08b587..7f9805da8 100644
--- a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
+++ b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
@@ -183,9 +183,11 @@ export const useGridPrintExport = (
       const gridFooterElement: HTMLElement | null = gridClone.querySelector(
         `.${gridClasses.footerContainer}`,
       );
-      gridFooterElement!.style.position = 'absolute';
-      gridFooterElement!.style.width = '100%';
-      gridFooterElement!.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+      if (gridFooterElement) {
+        gridFooterElement.style.position = 'absolute';
+        gridFooterElement.style.width = '100%';
+        gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+      }

       // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
       // prevents us to do it

Since this is a relatively small fix I will open this up for the community to work on it.

@michelengelen michelengelen changed the title Print export fails when footer is set to hidden [data grid] Print export fails when footer is set to hidden May 6, 2024
@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. regression A bug, but worse feature: Export and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 6, 2024
@tarunrajput tarunrajput linked a pull request May 6, 2024 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Export good first issue Great for first contributions. Enable to learn the contribution process. regression A bug, but worse
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DataGrid] fix Print export fails when footer is set to hide tarunrajput/mui-x
2 participants
@michelengelen @sambbaahh