[Vuejs]-How to create different length columns for each row in a table using css/js?

by

0👍

You can pre-process the lists before making the table. Such as:

let preprocessed = [];

for(let i = 0; i < list1.length || i < list2.length || i < list3.length; i++){
    let this_row = [];

    if(list1[i])
        this_row.push(list1[i]);
    else
        this_row.push(null);

    if(list2[i])
        this_row.push(list2[i]);
    else
        this_row.push(null);

    if(list3[i])
        this_row.push(list3[i]);
    else
        this_row.push(null);

    preprocessed.push(this_row);
}

Now you have a single list to iterate through, where each element is a list of the elements at that respective index in the original lists.

<template>
    <table>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>    
        <template v-for='elems in preprocessed'>
            <tr>
                <template v-for='elem in elems'>
                    <td v-if="elem !== null">{{ elem.id }}</td>
                    <td v-if="elem === null"></td>
                </template>
            </tr>
        </template>
    </table>
</template>

Note: This is all untested, but should give you an idea..

0👍

By default, HTML tables displays the header to the top and the data from left to right.

To reverse it, you should try something like this 

<template>
  <table>
    <tbody>
      <tr>
        <td>Header 1</td>
        <td v-for="job in list1">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 2</td>
        <td v-for="job in list2">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 3</td>
        <td v-for="job in list3">{{ job.id }}</td>
      </tr>
    </tbody>
  </table>
</template>

Leave a comment