A Dynamic Table's data- attributes

In HTML, a Dynamic Table is a normal <table> element with rows and cells (see HTML element: table). But apart from the native attributes of a table, rows and cells, it has some proprietary data- attributes which make it dynamic.

These data- attributes are set automatically on a new table that is made with the Dynamic Table Wizard that was introduced in version 2020.1.
They can be changed via the Attributes pane, depending on which element is selected (see Selecting an element), or directly in the template's HTML via the Source tab.

Tip: Just like other attributes, data- attributes can be used as selector; see Using scripts in Dynamic Tables.

Note: When a Dynamic Table is filled with expressions instead of placeholders, no data- attributes are added to cells. See Expressions or placeholders?

The table below lists the availabe data- attributes.

Tip: A number of these attributes can be set in Design mode on the Attributes pane after selecting a table, row or cell (see Selecting an element).

Attribute Element Function
data-column-resize <table>
  • Indicates that the columns may be resized in Design mode via drag-and-drop. This attribute has no value.
    		•
    data-detail <table>

    This attribute identifies a table as a Dynamic Table. It has no value.

    In tables made with an OL Connect version older than 2020.1, this attribute's value is the name of a detail table in the data.
    data-expander=
    "2019"         		<table>

    Specifies that the table should be expanded using the expander that was introduced in OL Connect version 2020.1.

    Most of the data- attributes listed here require the Dynamic Table to have the data-expander="2019" attribute.
    Tables made with an OL Connect version older than 2020.1 don't have this attribute. Tables without this attribute are expanded using the previous expander, which doesn't support all of the attributes listed here. (See Differences in Dynamic Tables made with previous Connect versions).
    data-field Table cells and other HTML elements within repeating rows:
    <td>, <span>, etc.

    This attribute associates a data field with the element, e.g. data-field="InstrumentClass". The data field's current value will automatically replace the contents of the element when generating output (or previewing).

    By default this attribute is placed on cells. In order to mix data and text in a cell, move the data-field attribute from the cell itself to an element inside it. See:Mixing text and data in a cell with a direct link to a data field.

    Note: This attribute is not used when a Dynamic Table is filled with expressions. See Expressions or placeholders?
    data-format <td> (a table cell)

    Defines how a value must be formatted; e.g. data-format="date-short" displays a date value using the format for a short date. See: Formatting values.

    The available formats depend on the data type of the corresponding field in the Data Model (see Data types).
    They correspond to the options given in the Text Script Wizard. For a detailed description see: Formatting variable data.

    • Integer, Float, Currency:
      • grouped
      • number-ungrouped
      • currency
      • currency-nosymbol
      • pattern('some pattern') (see Number patterns)
    • String:
      • uppercase
      • lowercase
      • propercase.

      Note that it is not possible to set a format on an HTMLString value.
    • Date:
      • date-short
      • date-medium
      • date-long
      • time-short
      • time-medium
      • time-long
      • datetime-short
      • datetime-medium
      • datetime-long
      • pattern('some pattern') (see Date and time patterns).

    Note: This attribute is not used when a Dynamic Table is filled with expressions. See Expressions or placeholders?
    data-hide-when-empty

    <table>

    Hide the table if it is empty. A table is considered empty if the detail record is empty. Note that any additional text is not taken into account.
    See: Hiding an empty Dynamic Table.
    data-keep-when-empty

    <tr> (a table row)

    Hide the row if it is empty. A row is considered empty if all elements with a data-field attribute in that row refer to empty data fields. Note that any additional text is not taken into account.
    See: Hiding an empty table row.
    data-repeat=
    "name of detail table"

    <tr> (a table row) in the body of the table (<tbody>)

    Note that this attribute is not supported for rows in the header or footer of a table (<thead>, <tfoot>).

    A row with this attribute is repeated for each record in the detail table that is specified in the attribute's value.
    Example: data-repeat="products".
    The name of a nested detail table should include all its parent tables, starting at the root and separated with dots.
    Example: data-repeat="InstrumentClass.Sector.Holding".

    Note: Empty records/data fields are skipped by default.
    This attribute cannot be used as a selector for template scripts, since it gets removed when the table is expanded, which happens before template scripts run.

    data-script <tr> (a table row), <td> (a table cell), <span>

    When creating a script for a row, cell or span in a Dynamic Table this attribute is set on the element and used as selector (see Quick-start a script with the Create script button). Its value is the name of a data field; e.g. data-script="ID".

    Note: This attribute is not used when a Dynamic Table is filled with expressions. See Expressions or placeholders?
    data-show-row <tr> (a table row)

    When set on a row in the body of the table (<tbody>), this attribute causes a row (a line with data) to appear before and/or after a page break if a sub-table runs over multiple pages.
    This is particularly useful in tables with several levels and long nested tables.

    Initially this attribute is omitted. A row without this attribute will be displayed once per record in a detail table.

    This attribute can be set to the following values:

    • all: Show the row before and after a page break.
    • after-break: Show the row after a page break.
    • before-break: Show the row before a page break.

    • start-of-table: Only show the row at the start of the table.

    On a row in the header (<thead>) or footer (<tfoot>) of the table, this attribute can also be set to the following value:

    • end-of-table: Only show this row on the last page.
    data-sum

    <td> (a table cell) in the header or footer of a table

    Adds a running total (i.e. a subtotal) to a table cell after pagination. Its value consists of the path to a numeric field in a detail table, for example: data-sum="Items.Amount" will calculate a subtotal based on the "Amount" field in the "Items" detail table.
    See also: Adding subtotals.
    data-breakable <tr> (a table row)
  • This attribute is added by the software to every copied row (in Preview mode or in 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.
    		•

    Differences in Dynamic Tables made with previous Connect versions

    In Dynamic Tables made with Connect before version 2020.1:

    • There is no data-expander attribute on the <table> element.

    • The data-detail attribute on the <table> element specifies the name of the detail table. (In tables made with Connect 2020.1 and up, this attribute has no value.)

    • The data-show-row attribute can only have the value: all.

    • The data-field, data-format, data-keep-when-empty, data-script and data-sum attributes cannot be used.

    • The data-showin attribute determines the visibility of a header row or footer row if the table gets split over multiple pages. Its possible values are header, footer and break; break may be combined with footer or header, for example: data-showin="footer, break", to make the row show up on every page.