search

bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.72k stars 782 forks source link

How to print entire rows? #658

Closed hongz1 closed 3 weeks ago

hongz1 commented 2 years ago

I am using react-window with react-virtualized-auto-sizer and looking for advise how to make print button to print table rows. Thanks.

bduffany commented 2 years ago

You could use something like react-to-print https://www.npmjs.com/package/react-to-print

in the trigger prop you could pass a component that renders all table rows as a regular list (not using react-window).

react-to-print has a onBeforeGetContent prop, where you could return a Promise that completes after you have rendered the full list for printing. You could pass a callback to the printable table component that resolves the Promise once it is rendered for print.

Example: https://codesandbox.io/s/mutable-lake-l4ig36?file=/src/App.tsx (note the styles in index.css as well, to hide the printable table contents for screen media while the print dialog is open)