Return to Revisions

The first thing I noticed is that the format of the data is a collection of columns with rows. The variable maxNumCols seems mis-leading. A more appropriate name for that variable would be maxNumRows because it describes how many rows are needed.

In terms of reducing the transformations needed, one option to consider is finding the maximum number of rows in a column and using that with v-for _with a Range to determine how many rows to add. Then looping over the content would eliminate the need to create recordArraySchema and dataTable - which would reduce the complexity from \$O(n^2)\$ to just \$O(n)\$.

<table border="1">
 <tbody>
 <tr v-for="r in maxNumRows">
 <td v-for="(column, index) in content" :key="index">
 <span v-if="column[r - 1]">{{column[r - 1].row}}</span>
 </td>
 </tr>
 </tbody>
</table>

Obviously this would require saving maxNumRows in the data collection.

Instead of using Function.apply() the spread syntax can be used to determine the maximum number of rows.

const rowLengths = data.map(r => r.length);
this.maxNumRows = Math.max(...rowLengths);

And instead of using let for variables that are only assigned once, it is wise to use const and then if it is determined that it needs to be re-assigned, use let. This helps avoid accidental re-assignment.