Detail Table

In invoice templates, a Detail Table (also called a dynamic table) is an essential element. A Detail Table is different from a standard table in that it has a variable number of rows; it is dynamic. In a Print context it will automatically overflow into as many pages as necessary to output all rows and it can display a transport line.

Detail Tables are only available when the loaded record set or data mapping configuration contains transactional data in one or more detail tables (see Loading data).

Creating a Detail Table

To create a Detail Table:

1. Open the Insert Detail Table dialog. There are several ways to do that:
   • Drag the data field that contains the name of the detail table into the template.
   • On the menu select Insert > Table > Detail.
   • On the toolbar, click the Insert detail table button.
2. Enter the table's desired attributes:
   • ID: A unique identifier for the table. IDs are used to access the table from scripts and as CSS selectors for style rules.
   • Class: A class identifier for the table. Classes can be shared between elements and are used to access the table from scripts and as CSS selectors for style rules.
   • Detail Table: Use the drop-down to select which detail table to display within the Detail Table.
   • Width: Enter the width of the table.

   A Detail Table is always inserted at the cursor position.

3. Click Next and select which fields should show up in the Detail Table.

   The order of the fields indicates in which order columns are displayed in the Detail Table, from left to right. Select a line and then use the Up and Down buttons to change the order of the columns.

   You could change the placeholder for each data field as well; just click a placeholder to edit it.

4. Click Next and check Calculate Subtotals to enable the options for a (sub)total at the end and (in Print sections) transport lines. The options are:

   • Column: Use the drop-down list to select the field that contains the currency value to be used to calculate the subtotal of the table. This field generally contains the result of item prices multiplied by the quantity.
   • Field name: Type the name to display in the footer when displaying that page's subtotal.
   • Show in footer: Check to display the subtotal in the footer of the table at the bottom of each page and at the end of the table.
   • Show in header (transportline): Check to display the subtotal of the previous page at the top of the table.

5. Click Next and select the styling attributes. Use the drop-down to select the desired table style. Choose No Style if you want to style the table yourself.

6. Check the option Hide when empty to make the table invisible when there are no data to display in it.

7. Click Finish to add the table to the section.

When a Detail Table is added, a script is created for each of the columns containing a placeholder for a field that is to be replaced. These scripts are placed inside a folder named after the table's ID, on the Scripts pane.

Adding a row at the bottom or the top of a Detail Table

Sometimes you'll want to add one or more rows to the header or footer of a Detail Table: to add taxes and/or the total of the invoice to the table, for example, or to add a custom message. A header or footer row can be added to a Detail Table as follows:

1. In the workspace, open the Design tab. Right-click the first line of the table if you want to add a header row, or the last line if you want to add a footer row.
2. On the shortcut menu select Row > Insert below or Insert above. The new row will be added to either the header or footer.
3. Right-click the row and choose Row > Show. Now you have the following options:
   • A header row marked as a Transport line will not appear at the very top of the table, but only on following pages if the table gets split over multiple pages. Note that only the first row that is marked as Transport line will be taken into account. To make a header row appear at the start of the table and on following pages, make sure that it is not marked as Transport line.
   • A footer row can appear before each page break (Before page break), if the table gets split over multiple pages, or only at the end of the table (At end of table), or before each page break and at the end (Always).

You can fill additional rows as usual. You could for example drag a data field to the new row (see Variable Data) or type in the cells.

Examples

For a few examples of how to adjust the default subtotals footer and (transport line) header, see the following how-to: Custom footer with subtotal at the end.

Styling a Detail Table

The Insert Detail Table wizard lets you select a style, but if you want to apply a different style to the table, choose No Style when creating the table. Then the style of a Detail Table is completely customizable: you can change the font, font size and color, the borders, the cell padding (the distance between the edge of the cell and its content), and the background color or image of the table and its cells. See Styling a table.

Change detail line formatting based upon a data field value

An example of how to change the formatting of a line in a Detail Table, based upon a data field value, is given in the following how-to: Change detail line formatting based upon a data field value.

Resizing a Detail Table

To change the width of a Detail Table or of a column in a Detail Table, select it (see Selecting an element) and type the desired width as a percentage in the respective field on the Attributes pane.

The height of the Detail Table is adjusted automatically to the amount of data added to it in Preview mode or when generating output.

It is however possible to change the height of the rows: click in the row and type the desired height in the respective field on the Attributes pane. All line item rows will have the same height.

Hiding an empty Detail Table

The number of rows in a Detail Table is variable, as it depends on a detail table in the data. You might want the Detail Table to be hidden when there are no data to display. There are two ways to achieve that.

• When creating a Detail Table, you can check the option Hide when empty. (See Creating a Detail Table.)
• For an existing Detail Table you can check the option Hide when empty on the Attributes pane.

HTML elements and attributes

In HTML, a Detail Table is just a normal <table> element with rows and cells (see HTML element: table). But apart from the native attributes of a table, row and cell element, some data- attributes can be seen in detail tables:

• data-detail: The name of the detail table in the data, for example: data-detail="products".
• data-repeat: The row will be repeated if it has this attribute: data-repeat="".
• data-showin: This attribute determines the visibility of of a header or footer in different situations, if the table gets split over multiple pages:
  • header will make the row show up at the top of the table on the first page only.
  • footer will make the row show up in the footer of the table on the last page only.
  • break used in a row in the <thead> section of a table indicates that the row should not be displayed at the top of the table on the first page, but only on following pages. Used on a row in the <tfoot> section, it indicates that the row should be displayed before each page-break. This value may be combined with footer or header, for example: data-showin="footer, break", to make the row show up on every page.
  Note that these options can also be set via the user interface: right-click on the row and select Row > Show; see Adding a row at the bottom or the top of a Detail Table.
• data-breakable: this attribute is added to every copied row (in preview mode or when creating output), in each of them with a unique ID as its value. This is required by the pagination routines of Connect to split the table across pages.
• data-column-resize, if present, indicates that the columns may be resized (data-column-resize="").​
• data-show-row="all": Shows a row in a (nested) detail table on subsequent pages, as long as there are data for that level on a page.