Table Element with Side Headers
An example of a Table Element with a side header.
Important Notes:
Twig: Use the header
boolean prop in the table cell element to apply a side header.HTML: Add a <th>
cell to a <tr>
to render a side header column (must be the first cell in a row).
Demo
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.
|
Twig
{% 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 %}
{% include '@bolt-elements-table/table.twig' with {
body: {
content: [
row1,
row2,
row3,
],
},
} only %}
HTML
<table class="e-bolt-table">
<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>
</table>