Vue.js simple grid component example

by yyx990803

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <table v-component="grid" v-with="gridOptions"></table>
</div>
<p style="font-size:12px">* You can click on the headers to sort the table.</p>

<script type="text/x-template" id="grid-template">
    <table>
        <thead>
            <tr>
                <th v-repeat="columns" v-on="click:sortBy(key)">{{header}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-repeat="data">
                <!-- access outer loop's data using $parent -->
                <td v-repeat="columns">{{$parent[key]}}</td>
            </tr>
        </tbody>
    </table>
</script>

CSS

body {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    color: #444;
}
table {
    border: 2px solid #42b983;
    border-radius: 3px;
    background-color: #fff;
}
th {
    background-color: #42b983;
    color: #fff;
    cursor: pointer;
}
td {
    background-color: #f3f3f3;
}
th, td {
    padding: 10px 20px;
}

JavaScript

// raw data
var data = [
    { name: 'Chuck Norris', power: Infinity },
    { name: 'Bruce Lee', power: 9000 },
    { name: 'Jacky Chang', power: 7000 },
    { name: 'Jet Li', power: 8000 }
]

// register the grid component
// use `replace: true` because without the wrapping <table>
// the template won't be parsed properly
Vue.component('grid', {
    template: '#grid-template',
    replace: true,
    created: function () {
        this.ascending = {}
    },
    methods: {
        sortBy: function (key) {
            var asc = this.ascending[key] = !this.ascending[key]
            this.data.sort(function (a, b) {
                var res = a[key] > b[key]
                if (asc) res = !res
                return res ? 1 : -1
            })
        }
    }
})

// bootstrap the demo
new Vue({
    el: '#demo',
    data: {
        gridOptions: {
            data: data,
            columns: [
                { header: 'Name', key: 'name' },
                { header: 'Power', key: 'power' }
            ]
        }
    }
})