[Vuejs]-Mini pivot grid in Vue without external library

0👍

I chose to do something really simple.

My HTML:

<div id="app">
<v-app style="padding: 12px;" id="inspire">
    <div class="table-responsive">
        <table class="table-hover" style="width:800px;" v-if="matrix">
            <thead>
                <tr>
                    <th>Length of Haul in Miles</th>
                    <th>501+</th>
                    <th>301-500</th>
                    <th>201-300</th>
                    <th>50-200</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Current Rate</td>
                    <td>{{ currentRate[0] | simpleDecimal }}</td>
                    <td>{{ currentRate[1] | simpleDecimal }}</td>
                    <td>{{ currentRate[2] | simpleDecimal }}</td>
                    <td>{{ currentRate[3] | simpleDecimal }}</td>
                </tr>
                <tr>
                    <td>Next Rate</td>
                    <td>{{ nextRate[0] | simpleDecimal }}</td>
                    <td>{{ nextRate[1] | simpleDecimal }}</td>
                    <td>{{ nextRate[2] | simpleDecimal }}</td>
                    <td>{{ nextRate[3] | simpleDecimal }}</td>
                </tr>
            </tbody>
        </table>
</v-app>

and my JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {  
    return {
            matrix: [
                    {
                            "currentRate": 0.41,
                            "miles": 501,
                            "nextRate": 0.42
                    },
                    {
                            "currentRate": 0.43,
                            "miles": 301,
                            "nextRate": 0.44
                    },
                    {
                            "currentRate": 0.47,
                            "miles": 201,
                            "nextRate": 0.48
                    },
                    {
                            "currentRate": 0.5,
                            "miles": 51,
                            "nextRate": 0.51
                    }
            ]     
    }
  },
  computed: {
    currentRate: function () {
            return this.matrix.map(function(rate) {
                return rate.currentRate;
            });
    },
    nextRate: function () {
            return this.matrix.map(function(rate) {
                return rate.nextRate;
            });
    },
  },
    filters: {
        simpleDecimal(value) {
            return value.toFixed(2).replace(/^0+/, '');
        }
    }
});

Result:

enter image description here

Leave a comment