Как распечатать ReactVirtualized Grids?

У меня была аналогичная проблема несколько месяцев назад, и в итоге я заставил ее работать с кнопкой печати, которая запускает функцию, которая изменяет CSS для отображения всего списка на странице (т.е. удаляет прокрутку), а затем перезагружает список полностью.

.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)
}

Может быть, есть более чистый способ сделать это, но я его не нашел, и это отлично сработало для того, что мне было нужно.

Я нашел способ сделать это, используя приведенное выше решение с медиа-запросом, css-vars и свойством overscanRowCount. (звучит много, но на самом деле очень коротко)

• Иметь состояние для режима печати (true/false)
• Если установлено значение true, установите для свойства react-virtualized максимальное количество строк (это будет актуально только при использовании вышеуказанного css)
• Используя css-vars, передайте рассчитанную высоту таблицы в css
• В css media query - режим печати, установить высоту в соответствии с переданным css-var
• Вызовите print() только после того, как жизненный цикл реакции завершит рендеринг (не волнуйтесь, рендеринг не будет отображаться в окне браузера)

... Я использовал css-модули, но это можно сделать и на чистом css. ... Я надеюсь, что это достаточно ясно

   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>