Table

Content container for tabular content.

Published

Last updated: 5.8.0

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

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

npm install @bolt/elements-table

Dependencies

@bolt/core-v3.x

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 sites

The 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 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 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 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 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 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 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 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 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 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	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 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 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 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>

table

table docs

Table

Content container for tabular content.

table

table caption

table top header

table side header

table top side headers

table headers footers

table borderless

table format variations

Regular Format

Numeric Format

table full width

table sticky headers

table column fixed width

Set column widths to be flexible.

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

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

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

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

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

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

Fixed Width Table Prop Override.

table fixed width table

table custom column width

table

table docs Show Code Hide Code

Table

Content container for tabular content.

table Show Code Hide Code

table caption Show Code Hide Code

table top header Show Code Hide Code

table side header Show Code Hide Code

table top side headers Show Code Hide Code

table headers footers Show Code Hide Code

table borderless Show Code Hide Code

table format variations Show Code Hide Code

Regular Format

Numeric Format

table full width Show Code Hide Code

table sticky headers Show Code Hide Code

table column fixed width Show Code Hide Code

Set column widths to be flexible.

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

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

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

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

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

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

Fixed Width Table Prop Override.

table fixed width table Show Code Hide Code

table custom column width Show Code Hide Code

table docs

table

table caption

table top header

table side header

table top side headers

table headers footers

table borderless

table format variations

table full width

table sticky headers

table column fixed width

table fixed width table

table custom column width