Inserting a page break into of in React app

Asked May 06 '18 at 22:09

Active Aug 07 '18 at 23:43

Viewed 8,322 times

0

So basically, my table has a bunch of sub-headers and I want a page break to be inserted after so many of these subsections and prevent an automatic page break in the middle of one of the sections. It looks this roughly. The gray areas are the sub-headers where a page break would be before if it was like the 4th, 8th, 12th, etc. subsection.

There are two main issues I am running into which may or may not be unique to React. Also, I am using Bootstrap.

1) The `<div>` as a child of `<table>`, `<tbody>`, `<thead>` issue:

My initial thinking was to just insert `<div className='pagebreak'>` after every 4th `<th>`. This will trigger the error (paraphrased) as a `<div> cannot be a child of <table>/<tbody>/<thead>`.

So doing something like the following is not permitted:

`let i = 1; return _.map(section, s => { i++; return ( <table> <tbody> <tr> <th colSpan='6'>{s.subSectionTitle}</th> </tr> <tr> <td>{s.data1}</td> <td>{s.data2}</td> <td>{s.data3}</td> <td>{s.data4}</td> <td>{s.data5}</td> <td>{s.data6}</td> </tr> { i = 4 ? <div className='pagebreak'></div> : null } </tbody> </table> ) })`

A few other bright ideas I had that didn't work was to do something like:

`{ i = 4 ? <tr className='pagebreak'></tr> : null }`

Or:

`{ i = 4 ? <th><td className='pagebreak'></th></tr> : null }`

Or:

`{ i = 4 ? <tr><th><div className='pagebreak'></div></th></tr> : null }`

While these will get around there error, they don't do anything. It will ignore the `pagebreak`

It seems like you cannot put any kind of page break inside of a `<table>` tag.

2) Creating a new `<table>` for every subsection.

It will just look like crap because column widths will vary from table to table unless I make the widths static which I don't want to do. Want to keep them dynamic while having all the columns widths be the same through out, which is determined by the max width of a data point within a given column.

That being said, this does work in that it actually inserts a page break:

`return ( <table> <tbody> <tr> <th colSpan='6'>{s.subSectionTitle}</th> </tr> <tr> <td>{s.data1}</td> <td>{s.data2}</td> <td>{s.data3}</td> <td>{s.data4}</td> <td>{s.data5}</td> <td>{s.data6}</td> </tr> </tbody> </table> <div className='pagebreak'></div> <table> <tbody> <tr> <th colSpan='6'>{s.subSectionTitle}</th> </tr> <tr> <td>{s.data1}</td> <td>{s.data2}</td> <td>{s.data3}</td> <td>{s.data4}</td> <td>{s.data5}</td> <td>{s.data6}</td> </tr> </tbody> </table> )`

Any suggestions for how to handle this?

html css twitter-bootstrap reactjs

edited May 07 '18 at 16:03

cjones

asked May 06 '18 at 22:09
cjones

8,384

17

81

175

`
` also I think that you should return all within a single wrapper element, not two tables and a DIV – Roko C. Buljan May 06 '18 at 22:12

Fixed the tag. That is what I would like to do, preferably in the middle of the `

`, but see issue 1). It does not take it.
– cjones May 06 '18 at 22:26

Question

So basically, my table has a bunch of sub-headers and I want a page break to be inserted after so many of these subsections and prevent an automatic page break in the middle of one of the sections. It looks this roughly. The gray areas are the sub-headers where a page break would be before if it was like the 4th, 8th, 12th, etc. subsection.

There are two main issues I am running into which may or may not be unique to React. Also, I am using Bootstrap.

1) The <div> as a child of <table>, <tbody>, <thead> issue:

My initial thinking was to just insert <div className='pagebreak'> after every 4th <th>. This will trigger the error (paraphrased) as a <div> cannot be a child of <table>/<tbody>/<thead>.

So doing something like the following is not permitted:

let i = 1;

return _.map(section, s => {
    i++;
    return (
        <table>
            <tbody>
                <tr>
                    <th colSpan='6'>{s.subSectionTitle}</th>
                </tr>
                <tr>
                    <td>{s.data1}</td>
                    <td>{s.data2}</td>
                    <td>{s.data3}</td>
                    <td>{s.data4}</td>
                    <td>{s.data5}</td>
                    <td>{s.data6}</td>
                </tr>
                { i = 4 ? <div className='pagebreak'></div> : null }
            </tbody>
        </table>
    )
})

A few other bright ideas I had that didn't work was to do something like:

{ i = 4 ? <tr className='pagebreak'></tr> : null }

Or:

{ i = 4 ? <th><td className='pagebreak'></th></tr> : null }

Or:

{ i = 4 ? <tr><th><div className='pagebreak'></div></th></tr> : null }

While these will get around there error, they don't do anything. It will ignore the pagebreak

It seems like you cannot put any kind of page break inside of a <table> tag.

2) Creating a new <table> for every subsection.

It will just look like crap because column widths will vary from table to table unless I make the widths static which I don't want to do. Want to keep them dynamic while having all the columns widths be the same through out, which is determined by the max width of a data point within a given column.

That being said, this does work in that it actually inserts a page break:

    return (
        <table>
            <tbody>
                <tr>
                    <th colSpan='6'>{s.subSectionTitle}</th>
                </tr>
                <tr>
                    <td>{s.data1}</td>
                    <td>{s.data2}</td>
                    <td>{s.data3}</td>
                    <td>{s.data4}</td>
                    <td>{s.data5}</td>
                    <td>{s.data6}</td>
                </tr>
            </tbody>
        </table>
        <div className='pagebreak'></div>
        <table>
            <tbody>
                <tr>
                    <th colSpan='6'>{s.subSectionTitle}</th>
                </tr>
                <tr>
                    <td>{s.data1}</td>
                    <td>{s.data2}</td>
                    <td>{s.data3}</td>
                    <td>{s.data4}</td>
                    <td>{s.data5}</td>
                    <td>{s.data6}</td>
                </tr>
            </tbody>
        </table>   
    )

Any suggestions for how to handle this?

`
` also I think that you should return all within a single wrapper element, not two tables and a DIV — Roko C. Buljan, May 06 '18 at 22:12
Fixed the tag. That is what I would like to do, preferably in the middle of the `

score 2 · Answer 1 · answered Aug 07 '18 at 23:43

Building on Rounin's response to show what worked in a React example:

@media print {

    tr {
        display: block;
    }

    .pagebreak {
        break-after: always !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
    }
}

// component.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import styles from '../assets/scss/app.scss';

class TestPrint extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test'
            ]
        }
    }

    renderContent() {
        let i = 0;
        return this.state.data.map((d) => {
            i++
            if (i % 10 === 0) {
                return (
                    <tr key={i} className='pagebreak'>
                        <td key={i}>{i} - {d}</td>
                    </tr>                    
                )
            } else {
                return (
                    <tr key={i}>
                        <td key={i}>{i} - {d}</td>
                    </tr>
                )
            }
        });
    }

    render() {
        return (
            <table>
                <tbody>
                    { this.renderContent() }
                </tbody>
            </table>
        )
    }
}

ReactDOM.render(<TestPrint />, document.getElementById('app'));

Hi, `tr {display: block;}` mess with the style of the table. How did you fix that? — Elvis Jr, Jul 30 '21 at 15:35

Rounin · Accepted Answer · 2018-06-08T16:48:00.037

This is correct:

a <div> cannot be a child of <table> or <tbody> or <thead>

But there is nothing to stop you from marking-up and styling your table so that every so often you have a row, styled as a block level element, which represents a page-break, declared in the CSS using:

page-break-before: always;

and which contains a single content-less data-cell, using:

<td colspan="7">

You can also avoid page breaks in conventional table rows, using:

page-break-before: avoid

Working Example:

table {
border-collapse: collapse;
}

td {
height: 12px;
padding: 6px 24px;
border: 1px solid rgb(0, 0, 0);
}

tr {
page-break-before: avoid;
}

tr.page-break {
display: block;
page-break-before: always;
}

tr.page-break td {
border: 1px solid rgba(0, 0, 0, 0);
}

<table>
<tr class="page-break">
<td colspan="7">
</tr>

<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
</tr>

<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
<td>B7</td>
</tr>

<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
</tr>

<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
<td>D7</td>
</tr>

<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
<td>E7</td>
</tr>

<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
<td>F7</td>
</tr>

<tr class="page-break">
<td colspan="7">
</tr>

<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
<td>G7</td>
</tr>
</table>

Further Reading on page-break-* properties:

https://css-tricks.com/almanac/properties/p/page-break/

Thanks! Took me a while to get back to this, but this got me going in the right direction. I did add an answer for what worked in a React setup in case anyone else needs it. — cjones, Aug 07 '18 at 23:38

2 Answers2

Linked