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