Vue.component('demo-grid', {
	template: '#grid-template',
	props: {
		data: Array,
		columns: Array,
		filterKey: String
	},
	data() {
		const sortOrders = {};
		this.columns.forEach((key) => sortOrders[key] = 1);
		return {
			sortKey: '',
			sortOrders: sortOrders
		};
	},
	computed: {
		filteredData() {
			const sortKey = this.sortKey;
			const filterKey = this.filterKey && this.filterKey.toLowerCase();
			const order = this.sortOrders[sortKey] || 1;
			let data = this.data;
			if (filterKey) {
				data = data.filter((row) =>
					Object.keys(row).some((key) =>
						String(row[key]).toLowerCase().includes(filterKey)
					)
				);
			}
			if(sortKey) {
				data = data.slice().sort((a, b) => {
					a = a[sortKey];
					b = b[sortKey];
					return (a === b ? 0 : a > b ? 1 : -1) * order;
				});
			}
			return data;
		}
	},
	filters: {
		capitalize(str) {
			return str.charAt(0).toUpperCase() + str.slice(1);
		}
	},
	methods: {
		sortBy(key) {
			this.sortKey = key;
			this.sortOrders[key] *= -1;
		}
	}
});
const demo = new Vue({
	data: {
		searchQuery: '',
		gridColumns: ['name', 'power'],
		gridData: [
			{name: 'Chuck Norris', power: Infinity},
			{name: 'Bruce Lee', power: 9000},
			{name: 'Jackie Chan', power: 7000},
			{name: 'Jet Li', power: 8000}
		]
	}
});
document.addEventListener('DOMContentLoaded', (event) =>
	demo.$mount('#demo')
);