I have problem with nest the expandable row components in my table.Currently I just created <TableSubRow />
in my <TableRow />
component, then in <TableSubRow />
i created <TableSecondSubRow />
.
TableSection.vue
<template><tbody><TableRow v-for="(row, index) in p.rowsList" @send-time-log-element="(value) => e('sendTimeLogElement', value)" @send-expand-status="sendExpandStatus" @send-selected-row="sendSelectedRow(row)" :key="index" :headers="p.headers" :row="row" :tasksTitle="p.tasksTitle" :sub-tasks-title="p.subTasksTitle" :expandCell="p.expandCell" :secondExpandCell="p.secondExpandCell" :same-cell-titles="p.sameCellTitles" :theme="p.theme" /></tbody></template>
TableRow.vue
<template><tr><!-- row template (doesn't matter in this case) --></tr><TableSubRow v-for="element in p.row[p.tasksTitle]" v-if="rowExpanded" @send-time-log-element="(value) => e('sendTimeLogElement', value)" @change-check-status="checkRow(element)" :key="element" :element="element" :headers="p.headers" :row="p.row" :tasksTitle="p.tasksTitle" :sub-tasks-title="p.subTasksTitle" :expand-cell="p.expandCell" :second-expand-cell="p.secondExpandCell" :same-cell-titles="p.sameCellTitles" :theme="p.theme" /></template>
TableSubRow.vue
<template><tr><!-- sub row template --></tr><TableSecondSubRow v-if="isExpanded" @send-time-log-element="(value) => e('sendTimeLogElement', value)" @change-check-status="checkRow(p.element)" :headers="p.headers" :row="p.element" :tasksTitle="p.tasksTitle" :expand-cell="p.expandCell" :second-expand-cell="p.secondExpandCell" :same-cell-titles="p.sameCellTitles" /></template>
In this case i had to send props for each subrow (e.g. for expand status), which is really bad I think.Of course it works for static defined amount of subrows.
How could I make dynamic expandable rows like on screen above?
I tried to create dynamic subrow component with subrow component (like recurrence?), but i had many issues there and didn't have enough time for this.
Now I need dynamic expandable table and cannot define subrows static in code.It should be created automatically by backend data (nested objects or something like that).