how to add a page if the react component has horizontal scrolling

[Yyana22]

const [currentPage, setCurrentPage] = useState(1)
const onClickPrint = useReactToPrint({
    content: () => tableRef.current,
    documentTitle: `Page ${currentPage}`,
    onAfterPrint: () => {
        setCurrentPage(currentPage + 1)
    },
});

<WrapTable ref={tableRef}>

export const WrapTable = styled(Box)`
    height: 100%;
    min-height: 200px;
    @media print {
        .no-print {
            display: none !important;
        }
        overflow: visible;
        width: 100%;
    }
`

[MatthewHerbst]

Hello. I'm not sure I understand the question. Could you make a Codesandbox or similar showing the problem? Thanks!

[Yyana22]

https://codesandbox.io/p/github/Yyana22/reactToPrint/draft/dreamy-mendel?workspaceId=13bb0f41-e663-4f5e-bc57-4c188715646b

https://github.com/Yyana22/reactToPrint/tree/master/

It is necessary that when printing the entire table is displayed (if there is a horizontal scroll, what does not fit goes to the next page)

[MatthewHerbst]

Could you make the Codesandbox public please? The link above doesn't seem to work for me due to a permissions error.

How would you like to display the entire table though? If there are too many columns it has to change how it looks somehow. Maybe that means multiple pages (horizontal or vertical), maybe it means something else, changing the component during printing for example

[Yyana22]

https://codesandbox.io/p/github/Yyana22/reactToPrint/master?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm15afppf00063x6jk1ifcquv%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm15afppe00023x6j9k9alhzk%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm15afppe00043x6jbp75in0x%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm15afppe00053x6jjqdo13w7%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm15afppe00023x6j9k9alhzk%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm15afppe00013x6jlm94f6f4%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm15afppe00023x6j9k9alhzk%2522%252C%2522activeTabId%2522%253A%2522cm15afppe00013x6jlm94f6f4%2522%257D%252C%2522cm15afppe00053x6jjqdo13w7%2522%253A%257B%2522id%2522%253A%2522cm15afppe00053x6jjqdo13w7%2522%252C%2522activeTabId%2522%253A%2522cm15afrfo000d3x6jvtvp6cjk%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522cm15afrfo000d3x6jvtvp6cjk%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm15afppe00043x6jbp75in0x%2522%253A%257B%2522id%2522%253A%2522cm15afppe00043x6jbp75in0x%2522%252C%2522activeTabId%2522%253A%2522cm15afppe00033x6jjjg6k7jc%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm15afppe00033x6jjjg6k7jc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522NEW_TERMINAL%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522cm15afuau000k3x6jpbrfgpm6%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[MatthewHerbst]

That works, thanks!

What do you want the solution to look like?

[Yyana22]

I want that when printing, if there is a horizontal scroll, the content on the right that does not fit will be transferred to the next line (if this is possible)