Responsive Table with Vue and Flexbox - css

Question

Im attempting to implement the following Flexbox table from Vasan Subramanian with vue.
That table is built manually, but That doesnt give much help when trying to make a component of it.
So Im willing to make it dinamically. and my first obstacle is to group each pair of two rows inside one div. Like the following
<div class="Table">
<div class="Table-row Table-header">
<div class="Table-row-item" v-for="key in cols" v-bind:style="{'flex-basis':basis, 'flex-grow':key.grow}">
<a #click="sortBy(key)">{{key.title}} <i v-if="key.sortField==sort" class="{{reverse==1?'fa fa-sort-desc':'fa fa-sort-asc'}}" aria-hidden="true"></i></a>
</div>
</div>
The previous code gives the normal table header
<div class="Table-row-item">
firstname
</div>
<div class="Table-row-item">
lastname
</div>
<div class="Table-row-item">
email
</div>
<div class="Table-row-item">
company
</div>
Im trying to achieve the following:
<div class=divider>
<div class="Table-row-item">
firstname
</div>
<div class="Table-row-item">
lastname
</div>
</div>
<div class=divider>
<div class="Table-row-item">
email
</div>
<div class="Table-row-item">
company
</div>
</div>
My Issue is I dont know how to represent that in code.
Any help would be very appreciated. I couldnt find any good examples about responsive tables with Flexbox. just the previous and this other from Jonathan Lehman An excellent Lecture using Sass.

Answer 1

You want to group your columns, and then loop over the columns within each group. Use a computed to do the grouping. Your grow specification doesn't quite fit this model; it seems like you want to have one grow spec per group, but I don't know exactly what the goal is there.
This code makes column groups of whatever size you choose and puts them in your dividers.
new Vue({
el: '.Table',
data: {
columns: ['firstname', 'lastname', 'email', 'company'].map((n) => ({
title: n,
sortField: n
})),
perDivider: 2,
basis: '50%',
grow: 1,
sort: null
},
computed: {
colGroups: function() {
return this.by(this.perDivider, this.columns);
}
},
methods: {
by: function(n, arr) {
const result = [];
for (var i = 0; i < arr.length; i += n) {
result.push(arr.slice(i, i + n));
}
return result;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div class="Table">
Table here
<div class="Table-row Table-header">
<div class="Table-row-item" v-for="colGroup in colGroups" v-bind:style="{'flex-basis':basis, 'flex-grow':grow}">
<a v-for="key in colGroup" #click="sortBy(key)">
{{key.title}} <i v-if="key.sortField==sort" class="{{reverse==1?'fa fa-sort-desc':'fa fa-sort-asc'}}" aria-hidden="true"></i>
</a>
</div>
</div>
</div>

Answer 2

I Started with a computed property
odd(){
var numberOdds = 0;
var arr = [];
for (var i = 0; i < this.cols.length; i++) {
if (i % 2 == 0) {
numberOdds++;
}
}
var j=0;
for (i=0;i<numberOdds;i++){
this.arr[i]=j;
j+=2;
}
return numberOdds;
}
so..
<div class="Table">
<div class="Table-row Table-header">
<div class="divider" v-for="number in odd">
{{cols[arr[number]].title}}
{{cols[arr[number]+1].title}}
</div>
</div>
<div class="Table-row" v-for="item in items.data" >
<div class="divider" v-for="number in odd">
<div class="Table-row-item">
{{item[cols[arr[number]].name]}}
</div>
<div class="Table-row-item">
{{item[cols[arr[number]+1].name]}}
</div>
</div>
</div>
</div>
This works. testing purposes