CODEWITHSUNDEEP
javascriptreactjsreact-virtualized
guergana
guergana

Reputation: 374

How to print ReactVirtualized Grids?

Is there a function / setting for printing ReactVirtualized Lists? I want to either print the whole content of the list (the rows are lazy loaded but maybe someone knows how to do it) or print what fits in a page without having to set the pixel dimensions.

I looked up the docs and couldn't find anything.

Thanks.

Upvotes: 2

Views: 1864

Answers (2)

Shai Kimchi
Shai Kimchi

Reputation: 786

I've found a way to do it using the above solution with media-query, css-vars and the overscanRowCount property. (sounds a lot, but it is actually very short)

  • Have a state for print mode (true/false)
  • When true, set the react-virtualized property to the max number of rows (this will only be relevant if using the above css)
  • Using css-vars, pass the calculated height of the table to css
  • In css media query - print mode, set the height according to the passed css-var
  • Call print() only after the react lifecycle completes render (Don't worry, the render will not be shown on the browser window)

... I used css modules, but it can be done in pure css. ... I hope this is clear enough

   if (printMode) {        
        window.requestAnimationFrame(() => {
            //requestAnimationFrame is important because window.print is an async function
            window.print();
        })
    }
.paper123 {
    height: 400px;    
    width: 100%
}

@media print {
    .paper123 {
        height: var(--mh) !important; /*the calculated height passed as css-var */
        width: 100%
    }
    :global(.ReactVirtualized__Grid) {
        margin: none !important;
        overflow: visible !important;
        display: block;
        height: auto !important;
    }
}
/* React code */  
<div >
                <Paper className={style.paper123} style={{ "--mh": 48 * (rows.length + 1) + 'px' }}>
                    < VirtualizedTable
                        rowCount={rows.length}
                        rowGetter={({ index }) => rows[index]}
                        columns={columns}
                        overscanRowCount={!printMode ? 40 : rows.length} //overscanRowCount property means that you can define the max number of rows prerendered in the virtualized-table
                    />
                </Paper >
            </div>

Upvotes: 1

Ange Loron
Ange Loron

Reputation: 1203

I had a similar problem some month ago and I ended up making it work with a print button that runs a function that changes the CSS to display the entire list on the page (i.e: removed the scrolling) and then reload the list in full.

.ReactVirtualized__Grid {
    margin: none !important;
    overflow: visible !important;
    display: block;
    height: auto !important; //OR PUT A HUGE AMOUNT WHERE YOUR LIST WILL ALWAYS FIT (9999999px)
}

There might be a cleaner way to do it but I did not find any and that worked out fine for what I needed.

Upvotes: 2

Related Questions