CASE: Shared table definitions in HTML

To keep consistency across your template set, you might want to store your table definitions in shared parts that are accessible by all reconciliations. This improves maintainability as the table definition only needs to be adjusted in 1 place to update your complete template set.

The approach slightly differs between markdown tables and HTML tables. For markdown tables, you can put the table definition as you would normally define it, in a capture statement in the shared part.

 {% capture main_table_definition %}
 |:--30%--
 |:--20%--
 |:--10%--
 |--15%--
 |--25%---:+
 {% endcapture %}

In your reconciliation template you can now include this table definition by printing the local variable you created in the capture statement

{% stripnewlines %}
  {{ main_table_definition }}
  {% newline %}
  | column A
  | column B
  | column C
  | column D
  | column E
{% endstripnewlines %}

For HTML tables this works slightly different as the table definition is part of the first row, which means the content of the first row would be the same for all tables making use of this table definition. To bypass this, you can make the content of these columns variable by printing local variables that are defined in the reconciliations themselves.

The table definition in the shared part can look like this:

{% capture table_definition %}
    <thead>
      <tr>
       <th class="usr-align-left usr-width-30 usr-line-bottom">{{ content_column_A }}</th>
       <th class="usr-align-right usr-width-20 usr-line-bottom">{{ content_column_B }}</th>
       <th class="usr-align-right usr-width-10 usr-line-bottom">{{ content_column_C }}</th>
       <th class="usr-align-right usr-width-15 usr-line-bottom">{{ content_column_D }}</th>
       <th class="usr-align-right usr-width-25 usr-line-bottom">{{ content_column_E }}</th>
      </tr>
    </thead>
{% endcapture %}

In the reconciliation itself, you need to define the local variables before including the shared part, in order to print the content of this first row.

{% assign content_column_A = "" %}
{% assign content_column_B = "Brown" %}
{% assign content_column_C = "Yellow" %}
{% assign content_column_D = "Purple" %}
{% assign content_column_E = "Black" %}

{% include "shared/table_definitions" %}

<table class="usr-width-100">
  {{ table_definition }}
  <tbody>
    <tr>
      <td class="usr-align-left">Jackets</td>
      <td class="usr-align-right">20</td>
      <td class="usr-align-right">30</td>
      <td class="usr-align-right">40</td>
      <td class="usr-align-right">50</td>
    </tr>
  </tbody>
</table>

Output: