mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!

https://mui.com/x/

4.17k stars 1.3k forks source link

[DataGrid] Not rendering rows when 'printing' with chrome headless #9933

Open david-ic3 opened 1 year ago

david-ic3 commented 1 year ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹

Not an easy one to reproduce as it happens using chrome headless to generate a pdf in the server (linux). Feel free to let us know how to process to reproduce this.

Current behavior 😯

Using chrome headless (for printing) the DataGrid is not showing rows, headers are fine.

disableVirtualization flag does not change the behaviour
The data grid has 245 rows and can show up to 10 rows without the need of a scrollbar
5 rows is fine
11 rows is fine (even though we have a scrollbar)
50 rows is not fine

Expected behavior 🤔

Showing all visible rows

Context 🔦

No response

Your environment 🌎

No response

Order ID or Support key 💳 (optional)

19458

DanailH commented 1 year ago

@david-ic3 thanks for raising this! I think this happens because the printing logic requires a layout. Basically, you are only seeing the first couple of rows because the rest are virtualized, then again adding thedisableVirtualization should solve the issue but it doesn't because probably it needs to recalculate the height of the grid. either way, I think what you are looking for is the PDF export feature which we haven't started working on yet.

One possible solution tho might be to add autoHeight prop to the grid so that you don't have virtualization and all the rows are rendered without a scrollbar. Let me know if this works for you.

david-ic3 commented 1 year ago

@DanailH , this is part of our printing a page and the table is one of the components of the widget. Unfortunatly the export to PDF will not solve the issue.

Row heights are fixed so we would have expect disableVirtualization to work (actually even with variable height imho)

The way we are sorting this out is calculating the actual height for the table and only adding the needed rows to the table. But this is a hack and sooner or later we are going to have to support filtering and sorting, both changes the table order and size.

It's still a bit of a pain...

DanailH commented 1 year ago

Did you try with the autoHeight prop added when printing?