Table

Responsive layout for tabular content.

Published

Last updated: 5.3.0

Github

NPM

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

Basic table

A basic table is composed of table head, body, footer, rows, cells, and caption.

Important Notes:

Take a look at real examples of tables currently on our sites

Demo

Light

This is the table caption.
This is a header cell in table header	This is a header cell in table header	This is a header cell in 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.
This is a regular cell in table footer.	This is a regular cell in table footer.	This is a regular cell in table footer.

Dark

This is the table caption.
This is a header cell in table header	This is a header cell in table header	This is a header cell in 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.
This is a regular cell in table footer.	This is a regular cell in table footer.	This is a regular cell in table footer.

Twig

{% 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 %}

HTML

Not available in plain HTML. Please use Twig.

Table with headers

When appropriate, create top and side table headers.

Important Notes:

When using the table cell template, set header prop to true to create a table header cell.

Use table header cells in the table head row to create top headers.

Use table header cell as the first child of each table body or footer row to create side headers.

Use the sticky_headers prop on the table to make either top or side headers sticky. Sticky top headers are sticky when there is vertical scrolling within the table. Sticky side headers are sticky when there is horizontal scrolling within the table.

Take a look at real examples of tables currently on our sites

Demo

This is the table caption.
Top table header	Top table header	Top table header
Side table header	This is a regular cell.	This is a regular cell.
Side table header	This is a regular cell.	This is a regular cell.
Side table header	This is a regular cell.	This is a regular cell.
Side table header	This is a regular cell in table footer.	This is a regular cell in table footer.

Twig

{% set header %}
  {% set cells %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'Top table header',
      header: true,
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'Top table header',
      header: true,
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'Top 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: 'Side table header',
      header: true,
    } 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: 'Side table header',
      header: true,
    } 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: 'Side table header',
      header: true,
    } 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: 'Side table header',
      header: true,
    } 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 {
  sticky_headers: 'side',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  footer: {
    content: footer,
  },
  caption: {
    content: 'This is the table caption.',
  },
} only %}

HTML

Not available in plain HTML. Please use Twig.

Borderless table

If a design calls for borderless tables, use the borderless prop to remove all borders.

Important Notes:

Take a look at real examples of tables currently on our sites

Demo

This is a header cell in table header	This is a header cell in table header	This is a header cell in 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-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 %}

{% include '@bolt-components-table/table.twig' with {
  borderless: true,
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
} only %}

HTML

Not available in plain HTML. Please use Twig.

Table column width

Use inline style on the table header cells to set a specific column width.

Important Notes:

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, change the table component’s container to block display to render a full width table. Use u-bolt-block utility class or inline style.

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-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

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

{# Change the table component's container to block display to render a full width table #}
{% include '@bolt-components-table/table.twig' with {
  header: {
    content: header_percent,
  },
  body: {
    content: [
      row,
    ],
  },
  attributes: {
    class: 'u-bolt-block',
  },
} only %}

HTML

Not available in plain HTML. Please use Twig.

table

table docs

Table

Responsive layout for tabular content.

table

table headers

table borderless

table column width

table

table docs Show Code Hide Code

Table

Responsive layout for tabular content.

table Show Code Hide Code

table headers Show Code Hide Code

table borderless Show Code Hide Code

table column width Show Code Hide Code

table docs

table

table headers

table borderless

table column width