[Vuejs]-Responsive Table with Vue and Flexbox

by

0👍

✅

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}}&nbsp;<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>

0👍

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

Leave a comment