{% 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 %}
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
|
|
format
|
Display either a regular table or a more complex numeric table. |
string
|
regular
|
|
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. |
boolean
|
false
|
|
fixed_width_columns
|
Sets the number of columns that will be the width of the longest text. |
string
|
none
|
|
caption
|
Generates a table caption <caption> element. |
any
| — |
|
header
|
Generates a table head <thead> element. |
object
| — |
|
body
|
Generates a main table content <tbody> element. |
object
| — |
|
footer
|
Generates a table footer <tfoot> element. |
object
| — |
|
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
| — |
|
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
| — |
|
npm install @bolt/elements-table