Recommended | Not Recommended |
---|---|
Purpose-Driven: Use tables for displaying tabular data, not for layout or design. | Avoid Ambiguity: Make sure the data in each cell is clear and unambiguous, reducing the need for additional explanatory text or elements. |
Header Rows/Columns: Always include headers to clarify the data's context and improve accessibility. | No Complex Structures: Refrain from nesting tables or including other complex HTML elements within table cells, such as buttons or dropdowns unless they are crucial for data manipulation within the table's context |
Simplify Data: Keep data points concise and straightforward to enhance readability. | Avoid Overcrowding: Limit the data to concise, relevant points. Do not overload tables with heavy media, long text blocks, or multiple data points within a single cell. |
{% 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
|
|
full_width
|
Update the table to render full width of its container. |
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
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. |
{% 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 %}
<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>
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. |
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. |
{% 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 %}
<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>
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. |
{% 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 %}
<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>
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. |
{% 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 %}
<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>
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 |
{% 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 %}
<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>
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 |
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 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 %}
<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>
Column 1 | Column 2 | Column 3 | |
---|---|---|---|
Row 1 | R1C1 | R12 | R1C3 |
Row 2 | R2C1 | R2C2 | R2C3 |
Row 3 | R3C1 | R32 | R3C3 |
{% 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 %}
<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>
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 | Type | 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 |
{% 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 %}
<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>
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 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 %}
<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>
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
|
{% 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 %}
<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>
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. |
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. |
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. |
{# 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 %}
<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>