Vue Grid

vue-grid.js

var dataGridComponent = Vue.extend({
	template: [
		'<table id="{{ id }}" class="{{ class }}">',
			'<thead>',
				'<tr>',
					'<th v-for="column in columns" v-on:click="sortBy(column)">',
						'{{ renderHeaderCell(column) }}',
					'</th>',
					'<th v-if="actions | presentObject">&nbsp;</th>',
				'</tr>',
			'</thead>',
			'<tbody>',
				'<tr v-for="row in rows">',
					'<td v-for="column in columns">',
						'{{{ renderCell(row, column) }}}',
					'</td>',
					'<td v-if="actions | presentObject">',
						'<div class="btn-group">',
							'{{{ renderActions(row) }}}',
						'</div>',
					'</td>',
				'</tr>',
			'</tbody>',
		'</table>'
	].join(''),
	props: {
		id: String,
		class: String,
		columns: Array,
		rows: Array,
		headers: {
			type: Object,
			default: function () {
				return {}
			}
		},
		transforms: {
			type: Object,
			default: function () {
				return {}
			}
		},
		actions: {
			type: Object,
			default: function () {
				return {}
			}
		}
	},
	methods: {
		renderHeaderCell: function(column) {
			if(column in this.headers) {
				return this.headers[column];
			} else {
				return Vue.options.filters.capitalize(column)
			}
		},
		renderCell: function(row, column) {
			if(column in this.transforms) {
				return this.transforms[column](row[column]);
			} else {
				return row[column];
			}
		},
		renderActions: function(row) {
			btns = [];
			for(key in this.actions) {
				action = this.actions[key];
				btns.push('<a href="' + eval(action.href) + '" class="' + action.class + '">' + ('label' in action ? action.label : Vue.options.filters.capitalize(key)) + '</a>');
			}
			console.log(btns);
			return btns.join('');
		}
	}
});
Vue.component('data-grid', dataGridComponent);

var dataPaginationComponent = Vue.extend({
	template: '',
	props: ['']
});
Vue.component('data-pagination', dataPaginationComponent);

Vue.filter('emptyObject', function (object) {
  return jQuery.isEmptyObject(object)
});
Vue.filter('presentObject', function (object) {
  return !jQuery.isEmptyObject(object)
});

function booleanIcon(value) {
	klass = ( value == true ? 'ok' : 'remove' );
	return '<span class="glyphicon glyphicon-' + klass + '"></span>';
}