Inserting a page break in a dynamic table

OL Connect Professional Designer
1

Hi,

I’m trying to insert a page break into a table when a certain requirement is met, at the moment i have been attempting this with just a standard table to see if i could get a table to break across pages and i can not. i am currently trying this statement which i believe i found on a different post on here, and also tried it on a page, i can get a normal page to split, but not tables. has anyone done this before, im guessing im just not using the correct css command.

image

2

In case your table is actually a Dynamic Table you can apply the CSS property and value page-break-after: always; to the <tr>-element as shown in the example below:

<table id="example" data-column-resize="" data-hide-when-empty="" style="width: 100%;" data-expander="2019">
	<tbody>
		<tr style="page-break-after: always;" data-repeat="detail">
			<td>{{rowNumber}}</td> 
		</tr>
	</tbody>
</table>

Another option is to apply the following CSS:

.after {
	page-break-after: always;
}

And apply a Standard Script like the following one instead:

Standard Script

Name: Example
Selector: #example tbody tr

var rowNumber = this.record.fields.rowNumber;

if (rowNumber == 3) {
	this.addClass("after");
}

Scope: [Each matched element]

NOTE: Tested in PReS Connect version 2023.1

3

thank you @Marten

ill give this a go.

1 Like
4

Assuming you are not using a dynamic table (a table to creates rows based on the line items in detail table in your Data Model) I would suggest to add the data-breakable attribute to the elements.

<tr data-breakable="">
    <td>row 1</td> 
    <td></td>
    <td></td>
</tr>
<tr data-breakable="">
    <td>row 2</td> 
    <td></td>
    <td></td>
</tr>
<tr data-breakable="">
    <td>row 3</td> 
    <td></td>
    <td></td>
</tr>

Note that it is not possible to split a single cell across pages. The separation always happens between rows.

5

Cheers. i used the script and css class and got everything working as desired, thanks for your help