Is nesting tables with bootstrap Vue a good way to achieve this? - html

Question

I had to solve a specific problem that I'm going to explain using an image to better understand the question.
Basically the result that I wanted to obtain is this:
The white rows are the main items and the gray ones are subitems of the main. To achieve this with Bootstrap Vue tables I pass to the main table (the one contained in every accordion tab) the array with all the main items, and every main item has his subItems set contained in an array. Now to render the grey rows for every white row I used the row details slot in which I put another b-table that receives as items the subItems of the main row.
This solution looks fine but it comes with some important problems:
first of all I had to reset the row-details padding in order to align the outer table with the inner table, but it still has some differences in width (if you look close between the TDs there are some differences)
as second point, the most important one, every row has to be selectable only one per time, in order to modify the infos contained inside. At the moment I set the outer table selectable with only one row per time, and same for the inner tables, but since these are more than one it creates conflicts every time I select rows on different subitems or if I select a main item together with one or more subitems.
Now my question is:
before I proceed finding a solution maintaining the actual structure that I built, I was wondering if there is a better way to achieve this without nesting tables and at the same time maintaining the actual look of the entire table.
If this can help, I post the piece of code related to the result seen in the above image:
// OUTER TABLE
<b-table
:items="dataTable.itemsOnDesktop"
:fields="billOfMaterialsType == '2' ? dataTable.fields : dataTable.fieldsA1"
:selectable="isSelectable"
#row-selected="onRowSelected"
ref="selectableTable"
outlined
sticky-header="700px"
head-variant="light"
select-mode="single"
stacked="md"
selected-variant="danger"
details-td-class="row-details-styling"
id="outer-project-table"
bordered
fixed
:busy="tableBusy"
>
.
.
.
<template
v-if="billOfMaterialsType == '2'"
#row-details="row"
>
// INNER TABLE
<b-table
id="inner-project-table"
hover
table-variant="secondaryLight"
selected-variant="danger"
select-mode="single"
#row-selected="onRowSelected"
:selectable="isSelectable"
thead-class="hidden_header"
:fields="dataTable.fields"
:items="row.item.node.bomiteminfoSet.edges"
:ref="`innerTable-${row.item.node.id}`"
bordered
small
fixed
>
.
.
.
</b-table>
</template>
</b-table>
And here it is a short example of the dataTable.itemsOnDesktop json structure:
[{
"node": {
"id": "Qk9NSXRllE2vZGU6MjA2MzU=",
"code": "1.4.7.2.a",
"description": " INTONACO COMPLETO AL CIVILE PREMISCELATO A PROIEZIONE ...",
"quantity": "1290.00",
"unitOfMeasurement": "m2",
"bomiteminfoSet": {
"edges": [{
"node": {
"id": "Qk9YinRlbUalk87230mGlOjExOTkx",
"code": null,
"description": "PORZIONE BURLOTTI\npiano interrato, piano terra",
"parts": "955.00",
"length": null,
"width": null,
"heightOrWeight": null,
"unitOfMeasurement": null,
"quantity": "955.00"
}
},
{
"node": {
"id": "Qk9ld5RlSXRlbUaOb2RlOjExOTky",
"code": null,
"description": "PORZIONE LAZZARINI\npiano terra",
"parts": "335.00",
"length": null,
"width": null,
"heightOrWeight": null,
"unitOfMeasurement": null,
"quantity": "335.00"
}
}]
}
},
"isActive": true,
"_showDetails": true
}]
Let me know your ideas about this, I would really appreciate it.