[data grid] exportDataAsPrint prints empty pages if the rows height is altered with media print CSS #19572
Description
Steps to reproduce
Steps:
- Set up a table with a decent amount of rows (20-30)
- With media print rule, try to dynamically change the row height either directly or with padding. In my case, I'm trying to make the rows appear condensed:
- Trigger the PDF export with exportDataAsPrint
Win 11, latest Chrome 140.0.3485.54, muix/data-grid-premium 8.11.2.
Current behavior
You'll notice that the rows' height is indeed changed, but under-the-hood JS clearly reserved the original height for the rows:
Expected behavior
The number of pages is adjusted to the condensed version of the table; no empty pages exist.
Context
I'm trying to control the CSS of the exported PDF.
Your environment
npx @mui/envinfo
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.17.0 - ~\AppData\Local\Volta\tools\image\node\20.17.0\node.EXE
npm: 10.8.2 - ~\AppData\Local\Volta\tools\image\node\20.17.0\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (140.0.3485.54)
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.1 => 11.14.1
@mui/core-downloads-tracker: 7.3.2
@mui/icons-material: ^7.2.0 => 7.3.2
@mui/material: ^7.2.0 => 7.3.2
@mui/private-theming: 7.3.2
@mui/styled-engine: 7.3.2
@mui/system: ^7.2.0 => 7.3.2
@mui/types: 7.4.6
@mui/utils: 7.3.2
@mui/x-charts: ^7.3.2 => 7.29.1
@mui/x-charts-vendor: 7.20.0
@mui/x-data-grid: 8.11.2
@mui/x-data-grid-premium: ^8.11.2 => 8.11.2
@mui/x-data-grid-pro: 8.11.2
@mui/x-date-pickers: 8.11.2
@mui/x-date-pickers-pro: ^8.11.2 => 8.11.2
@mui/x-internals: 7.29.0
@mui/x-license: ^8.11.2 => 8.11.2
@mui/x-telemetry: 8.11.2
@mui/x-virtualizer: 0.1.6
@types/react: ^18.3.3 => 18.3.24
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.7.3 => 5.9.2
Search keywords: data grid, mui-x