Table Element with Sticky Headers An example of a Table Element with sticky headers. Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the sticky_headers prop to add in sticky functionality to the table headers.HTML: Add a e-bolt-table--sticky-side-headers or e-bolt-table--sticky-top-headers class to the <table> to apply a sticky header. Demo
Pts Reb Ast Stl Blk Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1 70 10 2 5 1
Toni Kukoc 21 15 10 3 4 21 15 10 3 4
Steve Kerr 5 2 20 5 0 5 2 20 5 0
Total 91 27 32 13 5 91 27 32 13 5
Number Date Created Author Type Title Closed Solved Replies Votes Last activity by
324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ ✅ 35 162 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the discussion. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ 66 12 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ ✅ 35 162 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the discussion. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ 66 12 Firstname Lastname
324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ ✅ 35 162 Firstname Lastname
324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ ✅ 35 162 Firstname Lastname
324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ ✅ 35 162 Firstname Lastname
324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. ✅ ✅ 35 162 Firstname Lastname
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: 'Pts',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Reb',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Ast',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Stl',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Blk',
      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: 'Michael Jordan',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '70',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '10',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '1',
    } 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: 'Toni Kukoc',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '21',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '15',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '10',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '3',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '4',
    } 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: 'Steve Kerr',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '20',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '0',
    } 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: 'Total',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '91',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '27',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '32',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '13',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } 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 e-bolt-table--sticky-side-headers">
  <thead>
    <tr>
      <td></td>
      <th>Pts</th>
      <th>Reb</th>
      <th>Ast</th>
      <th>Stl</th>
      <th>Blk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Michael Jordan</th>
      <td>70</td>
      <td>10</td>
      <td>2</td>
      <td>5</td>
      <td>1</td>
    </tr>
    <tr>
      <th>Toni Kukoc</th>
      <td>21</td>
      <td>15</td>
      <td>10</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <th>Steve Kerr</th>
      <td>5</td>
      <td>2</td>
      <td>20</td>
      <td>5</td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>91</td>
      <td>27</td>
      <td>32</td>
      <td>13</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>