Bolt Design System

Table with headers

When appropriate, create top and side table headers.

Important Notes:

When using the table cell template, set header prop to true to create a table header cell.

Use table header cells in the table head row to create top headers.

Use table header cell as the first child of each table body or footer row to create side headers.

Use the sticky_headers prop on the table to make either top or side headers sticky. Sticky top headers are sticky when there is vertical scrolling within the table. Sticky side headers are sticky when there is horizontal scrolling within the table.

Take a look at real examples of tables currently on our sites

Demo

This is the table caption.
Top table header	Top table header	Top table header
Side table header	This is a regular cell.	This is a regular cell.
Side table header	This is a regular cell.	This is a regular cell.
Side table header	This is a regular cell.	This is a regular cell.
Side table header	This is a regular cell in table footer.	This is a regular cell in table footer.

Twig

{% set header %}
  {% set cells %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'Top table header',
      header: true,
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'Top table header',
      header: true,
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'Top table header',
      header: true,
    } only %}
  {% endset %}
  {% include '@bolt-components-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

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

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

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

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

{% include '@bolt-components-table/table.twig' with {
  sticky_headers: 'side',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  footer: {
    content: footer,
  },
  caption: {
    content: 'This is the table caption.',
  },
} only %}

HTML

Not available in plain HTML. Please use Twig.