table docs

Table

Content container for tabular content.

Published Last updated: 5.8.1 Change log Github NPM
Twig Usage
{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a header cell in table header',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a header cell in table header',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a header cell in 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: '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: '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: '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: 'This is a regular cell in table footer.',
    } only %}
      {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell in table footer.',
    } only %}
      {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell in table footer.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  footer: {
    content: footer,
  },
  caption: {
    content: 'This is the table caption.',
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Table (table.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
borderless

Removes all borders from the table.

boolean false
full_width

Update the table to render full width of its container.

boolean false
sticky_headers

Enables/disables sticky table headers.

string none
  • top, side, none
format

Display either a regular table or a more complex numeric table.

string regular
  • regular or numeric
fixed_width_table

The table's layout ignores the content and instead uses the table's width. Makes each column of the same width. With this prop table doesn't have horizontal scroll but squeezes on smaller screens.fixed_width_columns doesn't work with this prop together.

boolean false
fixed_width_columns

Sets the number of columns that will be the width of the longest text.

string none
  • none, first, second, first-two
caption

Generates a table caption <caption> element.

any
header

Generates a table head <thead> element.

object
    • content

      Content must be a table row. Use table-row.twig to render a single table row.

    • attributes
body

Generates a main table content <tbody> element.

object
    • content

      Content must be a collection of table rows. Use table-row.twig to render table rows.

    • attributes
footer

Generates a table footer <tfoot> element.

object
    • content

      Content must be a collection of table rows. Use table-row.twig to render table rows.

    • attributes
Table Row (table-row.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content

Generates a single table row <tr> element. Use table-cell.twig to render table cells inside the table row.

object
Table Cell (table-cell.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content

Generates a table cell <td> element. To render a button which triggers expanding hidden rows, pass table-expand-button.twig as the content. To render a button which triggers sorting, pass table-sorting-button.twig as the content.

any
header

Generates a table cell as a table header <th> element if set to true. <th> elements can be used in table head, table body, or table footer.

boolean false
filters

Generates space for a popover filter button. It is recommended to pass the Button element and Popover component here.

object
Install Install
npm install @bolt/elements-table
Dependencies @bolt/core-v3.x

table

Table Element with Rows Only This is the most basic usage of the Table Element. Important Notes: Take a look at real examples of tables currently on our sitesThe Table Element is designed to work with both Twig and vanilla HTML (Twig is the recommended method). Demo
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
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: '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: '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: '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>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
</table>

table caption

Table Element with a Caption An example of a Table Element with a table caption. Important Notes: Twig: Use the caption prop to add a <caption>.HTML: Add a <caption> into the <table> to render a table caption. Demo
This is the table caption.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
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: '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: '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: '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,
    ],
  },
  caption: {
    content: 'This is the table caption.',
  },
} only %}
HTML
<table class="e-bolt-table">
  <caption>This is the table caption.</caption>
  <tbody>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
</table>

table top header

Table Element with Top Headers An example of a Table Element with a top header. Important Notes: Twig: Use the header.content prop to render a top header row.HTML: Add a <thead> with <th> elements to the <table> to render a top header row. Demo
Top table header. Top table header. Top table header.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
Twig
{% set header %}
  {% set cells %}
    {% 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: '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: '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: '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 {
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  }
} only %}
HTML
<table class="e-bolt-table">
  <thead>
    <tr>
      <th>Top table header.</th>
      <th>Top table header.</th>
      <th>Top table header.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
</table>

table side header

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>

table top side headers

Table Element with Top and Side Headers An example of a Table Element with top and side headers. Important Notes: Refer to the Table Element with Top Header page for information on adding a top header.Refer to the Table Element with Side Header page for information on adding a side header.Twig/HTML: To align the table columns correctly, include a blank <th> to the <thead> as the first cell. 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.
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 %}

{% include '@bolt-elements-table/table.twig' with {
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
} 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>
</table>

table headers footers

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>

table borderless

Table Element Borderless An example of a Table Element with no borders between cells. Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the headers.Twig: Use the borderless boolean prop to remove the table borders.HTML: Add a e-bolt-table--borderless class to the <table> to remove the table borders. Demo
Description Team Vehicle Form
Optimus Prime The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron. Autobots Peterbilt Truck
Bumblebee One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons. Autobots VW Beetle
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: 'Description',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Team',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Vehicle Form',
      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: 'Optimus Prime',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Autobots',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Peterbilt Truck',
    } 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: 'Bumblebee',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'One of Optimus Prime\'s most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.'
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Autobots',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'VW Beetle',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  borderless: true,
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--borderless">
  <thead>
    <tr>
      <td></td>
      <th>Description</th>
      <th>Team</th>
      <th>Vehicle Form</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Optimus Prime</th>
      <td>The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.</td>
      <td>Autobots</td>
      <td>Peterbilt Truck</td>
    </tr>
    <tr>
      <th>Bumblebee</th>
      <td>One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.</td>
      <td>Autobots</td>
      <td>VW Beetle</td>
    </tr>
  </tbody>
</table>

table format variations

Table Element Numeric Formatting An example of a Table Element with numeric data styling. Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the format prop to style the table in numeric format.HTML: Add a e-bolt-table--numeric class to the <table> to style the table in numeric format. Demo

Regular Format

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Numeric Format

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5
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 {
  format: 'numeric',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  footer: {
    content: footer,
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--numeric">
  <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>

table full width

Table Element with Full Width Display An example of a Table Element with a full width layout. Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the side and top headers.Twig: Use the full_width boolean prop to make a table display full width.HTML: Add a e-bolt-table--full-width class to the <table> to make the table display full width. Demo
Column 1 Column 2 Column 3
Row 1 R1C1 R12 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R32 R3C3
Twig
{% set header_with_space %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Column 1',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Column 2',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Column 3',
      header: true,
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row1_with_header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Row 1',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R1C1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R12',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R1C3',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row2_with_header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Row 2',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R2C1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R2C2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R2C3',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row3_with_header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Row 3',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R3C1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R32',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R3C3',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  full_width: true,
  header: {
    content: header_with_space
  },
  body: {
    content: [
      row1_with_header,
      row2_with_header,
      row3_with_header
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--full-width">
  <thead>
    <tr>
      <th>
      </th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>R1C1</td>
      <td>R12</td>
      <td>R1C3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>R2C1</td>
      <td>R2C2</td>
      <td>R2C3</td>
    </tr>
    <tr>
      <th>Row 3</th>
      <td>R3C1</td>
      <td>R32</td>
      <td>R3C3</td>
    </tr>
  </tbody>
</table>

table sticky headers

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>

table column fixed width

Table Element with Flexible Start Columns An example of a Table Element with modified first two column widths. Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the fixed_width_columns prop to adjust the column widths.HTML: Add a e-bolt-table--fixed-width-columns--first, e-bolt-table--fixed-width-columns--second or e-bolt-table--fixed-width-columns--first-two class to the <table> to adjust the column widths.The fixed_width_table boolean prop will disable the fixed_width_columns column adjustments. Refer to the Table Element with a Fixed Width Layout page for information.The pink table cell backgrounds found on this page are for demonstration purposes only. Demo

Set column widths to be flexible.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first column to be as wide as the longest text.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the second column to be as wide as the longest text.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first two columns to be as wide as the longest text.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first column to be as wide as the longest text (with header).

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the second column to be as wide as the longest text (with header).

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first two columns to be as wide as the longest text (with header).

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Fixed Width Table Prop Override.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5
Twig
{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Prop',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Number',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Description',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Type',
    } 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: 'attributes',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>object</code>',
    } 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: 'headers',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>object</code>',
    } 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: 'rows',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '3',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>array</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row4 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'format',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '4',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>string</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  fixed_width_columns: 'first-two',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
      row4,
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--fixed-width-columns--first-two">
  <thead>
    <tr>
      <th>
      </th>
      <th>Pts</th>
      <th>Reb</th>
      <th>Ast</th>
      <th>Stl</th>
      <th>Blk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Michael Jordan</td>
      <td>70</td>
      <td>10</td>
      <td>2</td>
      <td>5</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Toni Kukoc</td>
      <td>21</td>
      <td>15</td>
      <td>10</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Steve Kerr</td>
      <td>5</td>
      <td>2</td>
      <td>20</td>
      <td>5</td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>91</td>
      <td>27</td>
      <td>32</td>
      <td>13</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>

table fixed width table

Table Element with a Fixed Width Layout An example of a Table Element with even column widths. Important Notes: Refer to the Table Element with Top Header page for information on adding a top header.Twig: Use the fixed_width_table boolean prop to update the table to display numeric data.HTML: Add a e-bolt-table--fixed-width-table class to the <table> to force the table to render in a fixed layout. Demo
Prop Number Description Type
attributes 1 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
headers 2 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
rows 3 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. array
format 4 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. string
Twig
{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Prop',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Number',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Description',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Type',
    } 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: 'attributes',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>object</code>',
    } 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: 'headers',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>object</code>',
    } 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: 'rows',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '3',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>array</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row4 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'format',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '4',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>string</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  fixed_width_table: true,
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
      row4,
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--fixed-width-table">
  <thead>
    <tr>
      <th scope="col">Prop</th>
      <th scope="col">Number</th>
      <th scope="col">Description</th>
      <th scope="col">Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>attributes</td>
      <td>1</td>
      <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
      <td><code>object</code></td>
    </tr>
    <tr>
      <td>headers</td>
      <td>2</td>
      <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
      <td><code>object</code></td>
    </tr>
    <tr>
      <td>rows</td>
      <td>3</td>
      <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
      <td><code>array</code></td>
    </tr>
    <tr>
      <td>format</td>
      <td>4</td>
      <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
      <td><code>string</code></td>
    </tr>
  </tbody>
</table>

table custom column width

Table Element with Column Width Use inline style on the table header cells to set a specific column width. Important Notes: Refer to the Table Element with Top Header page for information on adding a top header. Column width should be set on the table header cells in the table head rather than any other regular table cells. CSS width and min-width have different effects on table column widths, experiment and pick one that works for a particular use case. Since table is not forced to be full width by default, use the Full Width Table layout. Refer to the Table Element with Full Width Display page for information on this prop. Take a look at real examples of tables currently on our sites. Demo Pixel value width
250px wide column 250px wide column 250px wide column 250px wide column
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
Percent value width
15% wide column 25% wide column 45% wide column 15% wide column
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
Percent value width + full width table container (block display)
15% wide column 25% wide column 45% wide column 15% wide column
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
Twig
{# Use inline style to set a width on a table header cell #}
{% set header_250px %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{# Do not set widths for body row cells #}
{% set row %}
  {% set cells %}
    {% 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 %}
    {% 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 %}

{# Change the table component's container to block display to render a full width table #}
{% include '@bolt-elements-table/table.twig' with {
  header: {
    content: header_percent,
  },
  body: {
    content: [
      row,
    ],
  },
  attributes: {
    class: 'u-bolt-block',
  },
} only %}
HTML
<table class="e-bolt-table">
  <thead>
    <tr>
      <th style="width: 250px;">250px wide column</th>
      <th style="width: 250px;">250px wide column</th>
      <th style="width: 250px;">250px wide column</th>
      <th style="width: 250px;">250px wide column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td> This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
</table>