Problem when printing the table, not all rows are displayed.

[TSchaefer78]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps: 1. 2. 3.

Current behavior 😯

Hello,

I have a problem when printing the muidatagrid table. Not all rows of the table are displayed in the print preview. Often only part of the last line is missing.

I installed version 5.17.21.

This problem occurs in Microsoft Edge, Google Chrome browsers. Firefox shows all lines in the print preview without a border.

Please urgently for help.

Best regards Tom Shepherd

Expected behavior 🤔

all rows of the table should be printed out

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

No response

[m4theushw]

Could you provide a CodeSandbox with a minimal reproduction? Are you using dynamic row height?

[TSchaefer78]

Yes, I use the automatic line height.

Unfortunately, I can't provide a sandbox example.

<StyledDataGrid rows={maintenanceMachinesIntervals ? maintenanceMachinesIntervals : ''} columns={columns} sx={{ '@media print': { '.MuiDataGrid-main': { color: 'rgba(0, 0, 0, 0.87)' }, }, }} slots={{ }} slotProps={{ }} autoHeight={true} getRowHeight={() => 'auto'} getRowId={(rows) => rows.id} components={{Toolbar: CustomToolbar}} hideFooter={true} disableAddFilterButton disableColumnFilter style={{fontSize: "0.9rem"}} filterModel={filt} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(newModel) => setColumnVisibilityModel(newModel) } componentsProps={{ row: { onClick: (e, params) => {handleTableRow(e, params)} }, cell: { /* onMouseEnter: (params, event) => {console.log(params.target.innerText)} / / onMouseEnter: (params, event) => {handleTableCell(params, event)} / onClick: (params, event) => {handleTableCell(params, event)} / onMouseLeave: handlePopperClose */ } }} />

[dashty94]

I have the same issue. When using getRowHeight often some of the rows in the end are not displayed.

[korpthidrandir]

Same issue with this sample: https://next--material-ui-x.netlify.app/x/react-data-grid/export/#ExcelExportWithWebWorker Not all rows are printed

[liminkai]

I have the same issue. When using getRowHeight often some of the rows in the end are not displayed.

[ayushjain6]

I was facing the same issue fixed it by using these styles

    @media print {
        body {
          -webkit-print-color-adjust: exact !important;
          print-color-adjust: exact !important;
        }
        
        .MuiDataGrid-main,
        .MuiDataGrid-virtualScroller {
          overflow: visible !important;
          height: auto !important;
        }
      }