Bolt Design System

Twig Usage

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

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

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

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

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

{% include '@bolt-components-table/table.twig' with {
  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`	—
sticky_headers	Enables/disables sticky table headers.	`string`	`none`	`top`, `side`, `none`
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` —
caption	Generates a table caption <caption> element.	`any`	—	—

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/components-table

Dependencies

@bolt/core-v3.x

Table

Responsive layout for tabular content.