Table Element with Headers and Footer An example of a Table Element with top and side headers and a table footer. Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the headers.Twig: Use the footer prop to render a footer row.HTML: Add a <tfoot> to the <table> to render a footer row. Demo
Top table header. Top table header. Top table header.
Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
Side table header. This is a table footer cell. This is a table footer cell. This is a table footer cell.
Twig
{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Top table header.',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Top table header.',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Top table header.',
      header: true,
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row1 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Side table header.',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row2 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Side table header.',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row3 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Side table header.',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set footer %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Side table header.',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a table footer cell.',
    } only %}
      {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a table footer cell.',
    } only %}
      {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a table footer cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  sticky_headers: 'side',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  footer: {
    content: footer,
  },
} only %}
HTML
<table class="e-bolt-table">
  <thead>
    <tr>
      <th></th>
      <th>Top table header.</th>
      <th>Top table header.</th>
      <th>Top table header.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Side table header.</th>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <th>Side table header.</th>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <th>Side table header.</th>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Side table header.</th>
      <td>This is a table footer cell.</td>
      <td>This is a table footer cell.</td>
      <td>This is a table footer cell.</td>
    </tr>
  </tfoot>
</table>