How to generating table that will have 3 columns per row

I use Vue 2.

I generate table from the collection:

  <table class="table table-striped table-bordered">
      <tbody>
        <tr v-for="(type, typeIndex) in getAllUpgradeTypes" :key="typeIndex">
          <td>
            <imageDesc
              style="margin-left: 10px"
              :title="type"
              :text="'Select an Option'"
              :zoneId="selectedZone.id"
            />
          </td>
        </tr>
      </tbody>
    </table>
    

Currently, the table created with multiple rows, each row has only one column and shows one item inside the column.

My question how can I generate a table which will contain 3 columns per row?

1 thought on “How to generating table that will have 3 columns per row”

  1. You need a second v-for on the <td> element. If you just want to hardcode the number 3 rather than base it off some data, you can do that:

    <td v-for="column in 3" :key="column">
    

    So for example, you could do something like this:

    <tr v-for="(type, typeIndex) in getAllUpgradeTypes" :key="typeIndex">
      <td v-for="column in 3">
        <imageDesc
          style="margin-left: 10px"
          :title="type"
          :text="'Select an Option'"
          :zoneId="selectedZone.id"
        />
      </td>
    </tr>
    
    Reply

Leave a Comment