how to dynamically add row after cell 5 vue.js

Question

I am currently working on my app. I am using vue v2 I'm trying to create a dynamic table where I can add rows and Sub rows on button click. Currently i can insert row without problem but if 1 cell has long text that took 2 rows it messed up

I am trying to achieve this:

Here is my current result:

<button @click="addMe">add row</button>
<table>
      <thead>
        <tr title="first">
          <th style="width:50px">cell1</th>
          <th style="width:150px">cell2</th>
          <th>cell3</th>
          <th>cell4</th>
          <th>cell5</th>
          <th>cell6</th>
          <th>cell7</th>
          <th>cell8</th>
          <th>cell9</th>
          <th>cell10</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.score }}</td>
          <td>{{ item.profile }}</td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                superlongtextcell5
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell6
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell7
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell8
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell9
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell10
              </td>
            </tr>
          </td>
        </tr>
      </tbody>
    </table>

    data() {
      return {
        list: [1],
        data: [
          { name: "row1 cell1" },
          { name: "row2 cell1" },
          { name: "row3 cell1" },
          { name: "row4 cell1" },
          { name: "row5 cell1" }
        ]
      }
    },
    methods: {
      addMe() {
        this.list.push(1);
      }
    }

is it possible to do? thank you

Answer 1

thank you for you suggestion, i refactor it as per my need i can achieve it by putting new table inside outer table

    <table>
      <thead>
        <tr title="first">
          <th>cell1</th>
          <th>cell2</th>
          <th>cell3</th>
          <th>cell4</th>
          <th>cell5</th>
          <th>cell6</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.score }}</td>
          <td>{{ item.profile }}</td>
          <template>
           <table>
             <td>vertically-align1</td>
             <td>vertically-align2</td>
           </table>
          </template>
        </tr>
      </tbody>
    </table>

Answer 2

I don't think the problem lies in Vue, you may just have to vertically align the cells or whatever you prefer and clean up the HTML.

Vertical align

Replace vertical-align:bottom with vertical-align:top here to see: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_valign_css

Use table for extra tr tags

You are mixing td and tr in an incorrect way. A tr tag may never be inside a td tag.

<td class="new-td">
  <tr v-for="item in list" :key="item">
    <td>
      row1
      superlongtextcell5
    </td>
  </tr>
</td>

If you need the rows for layout reasons, you should put a table inside the table:

<td class="new-td">
  <table>
    <tr v-for="item in list" :key="item">
      <td>
        row1
        superlongtextcell5
      </td>
    </tr>
  </table>
</td>

You can give the table inside the table a design with no borders, margins or paddings and that will create as many rows within the cell as you like.