Creating running totals is easy once you get the hang of it. Consider the following Dynamic Table design.

The table contains a <thead>, <tbody> and <tfoot> section. The Source view in the Designer reveals the HTML structure below.

<table id="table" class="table--minimalist" data-detail="" data-expander="2019">
 <thead>
  <tr>
   <th>Number</th>
   <th>Description</th>
   <th>Unit Price</th>
   <th>Quantity</th>
   <th>Total</th>
  </tr>
 </thead>
 <tbody>
  <tr data-repeat="detail">
   <td data-field="Number">@Number@</td>
   <td data-field="Description">@Description@</td>
   <td data-field="UnitPrice">@UnitPrice@</td>
   <td data-field="Quantity">@Quantity@</td>
   <td data-field="Total">@Total@</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan=3></td>
   <td data-sum="detail.Quantity">@QtySum@</td>
   <td data-sum="detail.Total">@TotalSum@</td>
  </tr>
 </tfoot>
</table>

Creating transport lines for these two cells is just as simple as creating the running total: simply copy the respective row to the <thead> element. Without making any modifications you’ll notice that the transport line is shown on the first page. As the values start with 0 or 0.00 this doesn’t make sense. Adding the data-show-row attribute with the after-break value to the transport line omits the row on the first page.

<thead>
 <tr>
  <th>Number</th>
  <th>Description</th>
  <th>UnitPrice</th>
  <th>Quantity</th>
  <th>Total</th>
 </tr>
 <tr data-show-row="after-break">
  <td colspan="3"></td>
  <td data-sum="detail.Quantity" style="text-align: right;">@QtySum@</td>
  <td data-sum="detail.Total" style="text-align: right;">@TotalSum@</td>
 </tr>
</thead>

The merged result:

Adding data-show-row="before-break" to the <tr> in the <tfoot> omits that row from the last page. Note that the data-show-row options can be set via the Attributes pane. To reveal these options simply select a <tr> element via the breadcrumbs or on the Outline pane.

By default the values are formatted following their data type, e.g. currency values are formatted as such. With the introduction of various new data- attributes a new option to format values was also added. Formatting values is achieved with the data-format attribute. In case you want to omit the currency symbol simply add data-format="currency-nosymbol". Other value formats are: uppercase, lowercase, date-short, date-medium, date-long and patterns like pattern(‘#,##0.00;(#,##0.00)’). Check the online documentation for the full details.

<tbody>
    <tr data-repeat="detail">
        <td data-field="Number">@Number@</td>
        <td data-field="Description" data-format="uppercase">@Description@</td>
        <td data-field="UnitPrice">@UnitPrice@</td>
        <td data-field="Quantity">@Quantity@</td>
        <td data-format="currency-nosymbol" data-field="Total">@Total@</td>
    </tr>
</tbody>
<tfoot>
    <tr data-show-row="before-break">
        <td colspan="3"></td>
        <td data-sum="detail.Quantity">@QtySum@</td>
        <td data-sum="detail.Total" data-format="currency-nosymbol">@TotalSum@</td>
    </tr>
</tfoot

The observing reader may have noticed the Format option in the screenshot of the Attributes pane under Running totals. This means that this option can also be set via the user interface for elements with the data-field or data-sum attribute.

Yes, the data-sum attribute also works with sub-detail tables! This is demonstrated in the following HTML snippet and screenshot.

<tr class="InstrumentClass" data-repeat="InstrumentClass">
 <td></td>
 <td data-field="description" data-format="lowercase">@description@</td>
 <td></td>
 <td></td>
</tr>
<tr class="Sector" data-repeat="InstrumentClass.Sector">
 <td></td>
 <td data-field="description" data-format="uppercase">@description@</td>
 <td></td>
 <td></td>
</tr>
<tr class="Holding" data-repeat="InstrumentClass.Sector.Holding">
 <td data-field="code">@code@</td>
 <td data-field="r1r2">@r1r2@</td>
 <td data-field="holding">@holding@</td>
 <td data-field="value" data-format="currency-nosymbol">@value@</td>
</tr>
<tr style="page-break-before: avoid" data-repeat="InstrumentClass.Sector">
 <td></td>
 <td></td>
 <td style="font-weight: bold">Total</td>
 <td data-sum="InstrumentClass.Sector.Holding.value" style="font-weight: bold" data-format="currency-nosymbol"> @value@ </td>
</tr>