Quantcast
Channel: Active questions tagged row - Stack Overflow
Viewing all articles
Browse latest Browse all 446

Vue 3 - How to create infinite nested (expandable rows) table?

$
0
0

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.

enter image description here

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).


Viewing all articles
Browse latest Browse all 446

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>