To illustrate various cases we’ll use the financial portfolio sample data which contains nested data. The following Data Model shows an extract of the data. It consists of three levels: InstrumentClass > Sector > Holding.

The image below shows the setup in the new Dynamic Table Builder. A row is created for each level and the accompanying fields are added to the respective rows.

Empty fields are added to the first two rows to make sure that all rows have the same number of columns. This allows us to set a background color for the last column and have this color stretch the height of the table. A class was set on each row to simplify adding custom styles once the table has been added to the template.

On clicking Finish the <table> element is added to the template. A <tr> element is created for each Row in the Dynamic Table Builder and <td> elements are added for the Fields. Underwater the accompanying data-repeat and data-field attributes are set for these elements. (More information on these attributes can be found in the Dynamic Tables reinvented how-to.)

The image below shows the table in Preview mode. Custom CSS styles were created to apply formatting to the different levels. The first level (InstrumentClass) is formatted in uppercase, the text of the second level (Sector) is made bold.

One of the things that instantly stands out is the fact that the “Banks” sector is floating at the bottom of the first page. The accompanying sublevels are on the next page.

This can be avoided by prohibiting page breaks after <tr> elements with the “Sector” class. To achieve, this simply set the page-break-after CSS property to avoid in a CSS file (or set it in the style attribute of the <tr> element).
The following snippet shows how to set this property in a CSS style sheet (make sure the CSS file is linked to the section).

.Sector {
 font-weight: bold;
 page-break-after: avoid;
}

Now, in Preview mode, the template looks like this:

To make the table more clear, it could be helpful to repeat the data of the first level (the InstrumentClass level) on subsequent pages. This is where the data-show-row attribute comes into play. This attribute causes a row – i.e. a line filled with data – to appear only before and/or after a page break if its subtable gets split over multiple pages.

In the Dynamic Table Builder, there is a button on each row to make this setting.

The default setting is Initial, which means that the row has no data-show-row attribute and will only appear directly above its subtable.

To get an extra row after a page break, we must add another row in the Dynamic Table Builder, associate it with the InstrumentClass level and use the button to set its data-show-row attribute to After page break.

The merged result looks like this.

The previous part showed how to put the data of the InstrumentClass level in a transport line on subsequent pages. Let’s take a look at how we can complement that data with the text “(continued from previous page)”.

As explained in another how-to (Dynamic Tables reinvented), the data-field attribute links an element in a Dynamic Table to a data field. When a template is merged with data, the entire content of that element gets replaced with the respective data value. Any added text would disappear.

That’s why we need to remove the data-field attribute from the table cell if we want to add some text to the value. Removing the data-field attribute can be done very easily on the Attributes pane: select the table cell in Design mode and then set Field to None.

Now, put a <span> element in the table cell and link that span to the data field: select the span, then choose the Field on the Attributes pane. This way the data value is written to the span element.

The ‘continued from’ text fragment can be added outside of the <span>, but it is a good idea to wrap that text in a <span> too, so that you can give it a class and use that to overwrite the formatting.

The design looks like this:

The merged result: