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

[sambbaahh]

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/[email protected]/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

[michelengelen]

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.

[github-actions[bot]]

:warning: 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.

@sambbaahh: 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.

[noobDev31]

@MBilalShafi / @michelengelen Hi, from which version of @mui/x-data-grid-premium this fix is available?