<figure tabindex="0" role="group" aria-labelledby="figure-2">
<div class="table-container " tabindex="0" role="group">
<table>
<tbody>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</tbody>
</table>
</div>
<figcaption id="figure-2">Figure 2. Caption here</figcaption>
</figure>
<figure tabindex="0" role="group"{{#with caption}} aria-labelledby="{{id}}"{{/with}}>
{{> (lookup . 'componentHandle') contextData }}
{{#with caption}}<figcaption id="{{id}}">{{{data}}}</figcaption>{{/with}}
</figure>
.caption
margin: $spacing3 0
text-align: left
color: $textgrey
font-size: $fontSize16
font-style: italic
figcaption
@extend .caption
{
"componentHandle": "@table",
"contextData": {
"rows": [
{
"cells": [
{
"data": "Cell 1.1"
},
{
"data": "Cell 1.2"
},
{
"data": "Cell 1.3"
}
]
},
{
"cells": [
{
"data": "Cell 2.1"
},
{
"data": "Cell 2.2"
},
{
"data": "Cell 2.3"
}
]
},
{
"cells": [
{
"data": "Cell 3.1"
},
{
"data": "Cell 3.2"
},
{
"data": "Cell 3.3"
}
]
}
]
},
"caption": {
"id": "figure-2",
"data": "Figure 2. Caption here"
}
}