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.
   • Use the Insertion Point drop-down to select where to insert the table.

     • At cursor position inserts it where the cursor is located in the template.

     • Before element inserts it before the HTML element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be before the <p> tag.*

     • After start tag inserts it within the current HTML element, at the beginning, just after the start tag.*

     • Before end tag inserts it within the current HTML element, at the end, just before the end tag.*

     • After element inserts it after the element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be after the end tag of the paragraph (</p>).*

     * If the current element is located inside another element, use the Elements drop-down to select which element is used for the insertion location. The list displays every element in the breadcrumbs, from the current selection point down to the root of the body.

     Note: HTML has some restrictions as to which types of elements are allowed as children of other elements. For example, a paragraph element is not allowed to have children that are block level elements - like a Div or a Table. If inserting content at the selected location would produce invalid HTML the final result may be different than expected. For example, when you insert a Div into a paragraph, the paragraph gets split in two. This means you end up with two paragraphs with the Div in between.

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 to the header or footer 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.
2. If the table already has a header/footer:
   1. Right-click the header of the table if you want to add a header row, or the footer of the table 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.
   If the table doesn't have a header/footer, add it (see Adding a header or footer) and proceed with the next step.
   To determine if a table has a header and/or footer, expand the table on the Outline pane.
3. Right-click the new row and choose Row. 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 (select: Show) 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.

Adding leading and trailing space to a Detail Table

The best way to add extra space at the top or bottom of a detail table is to set the Table's top or bottom margin, respectively (see Styling a table).
Do not use empty lines (<br>) or paragraphs (<p>) to add trailing space to a table. In Print output they might end up on a next page without any other visible content, which would still be printed because lines and paragraphs must be treated as content, even when they are empty.

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 the row 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 to the header or footer 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="").​