I'm using Alpine.js v3 and I'm trying to create a table based on a json. However, the structure of my json makes me use nested x-for inside my <table>.
Knowing that x-for must contain only one root element, this causes problems for the display of my articles. With <div> this would not be a problem, but the particular structure of tables is creating an issue: it is impossible (?) to add a tag to my articles without breaking the table.
- I thought about wrapping everything with
<tr><td colspan="5"><tbody>but even that break the table. - Another solution was to nest
<table>elements. If it do works, it breaks the alignment of the parents columns, plus copy/pasting the table to another editor also breaks.
Do you have any suggestion?
My json:
{
"articles": {
"CHAPTER I": {
"title": "GENERAL PROVISIONS",
"articles": {
"Article 1": {
"title": "Subject matter",
"paragraphs": {
"p_1": "This Regulation lays down:",
"(a)": "rules for the placing on the market of products with digital elements to ensure the cybersecurity of such products; ",
"(b)": "essential requirements for the design, development and production of products with digital elements, and obligations for economic operators in relation to these products with respect to cybersecurity;"
}
}
}
}
}
}
My html:
<table>
<thead>
<tr>
<th></th>
<th>Commission<br></th>
<th>Parliament</th>
<th>Council</th>
<th>Comments</th>
</tr>
</thead>
<template x-for="(chapter, number) in file.articles">
<tbody>
<tr>
<td colspan="5">
<h3 x-text="number + ': ' + chapter.title"></h3>
</td>
</tr>
<template x-for="(article, number) in chapter.articles">
<tr>
<td colspan="5">
<h4 x-text="number + ': ' + article.title"></h4>
</td>
</tr>
<template x-for="(paragraph, nb_paragraph) in article.paragraphs">
<tr>
<td x-text="nb_paragraph"></td>
<td x-text="paragraph"></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>
</template>
</tbody>
</template>
</table>