ractive-ez-table/demo/app.js

Ractive Ez UI Table

import Ractive 		from 'ractive';
import                   'ractive-ez-panel';
import EzComponent 	from '../index.js';
import 				     '../themes/blue.less';

window.onload = function() {
	
	var instance = new Ractive({
		el: document.querySelector("#container"),
		template: document.querySelector("#template").innerHTML,
		
		data: function() {
			
			var data = require("./data.js");
			
			var cols = [
				{ name: "name", label: "Name", path: "name", width: "150px", isVisible: true },
				{ name: "gender", label: "Gender", path: "gender", width: "50px", isVisible: true,
					groupValueTemplate: "{{#if value == 'male' }}Dude{{else}}Gal{{/if}}" },
				{ name: "company", label: "Company", path: "company", width: "100px", isVisible: true },
				{ name: "email", label: "Email", path: "email", width: "150px", isVisible: true },
				{ name: "phone", label: "Phone", path: "phone", width: "100px", isVisible: true },
				{ name: "address", label: "Address", path: "address", width: "250px", isVisible: true },
				{ name: "balance", label: "Balance", path: "balance", width: "50px", isVisible: true },
				{ name: "active", label: "Active", path: "isActive", width: "25px", editTemplate: '<input type="checkbox" checked="{{isActive}}">', isVisible: true },
				{ name: "age", label: "Age", path: "age", width: "25px", viewTemplate: '<span style="color: {{ eyeColor }}">{{ age }}</span>',  editTemplate: '<input type="number" value="{{age}}">', isVisible: true },
				{ name: "position", label: "Position", path: "latitude", width: "100px", viewTemplate: '<span style="color: red">{{ latitude }}</span>, <span style="color: blue">{{ longitude }}</span>', isVisible: true }
			];
			
			return {
				items: data,
				columns: cols,
				groups: [cols[7]],
				sortColumn: null,
				selectedItems: []
			};
		
		},
		
		oninit: function() {
			
			setTimeout(() => {
				this.set("selectedItems.0.isActive", false);
				console.log(this.get("items.1.isActive"), this.get("selectedItems.0"));
			}, 3000);

			setInterval(() => localStorage["ractive-ez-table"] = JSON.stringify(this.findComponent("EzTable").getConfiguration()), 5000);

			this.findComponent("EzTable").setConfiguration(JSON.parse(localStorage["ractive-ez-table"] || "{}"));
			
		},
		
		handleDropItem: function(sourceItem, targetItem) {
			console.log("Dropping", sourceItem, targetItem);
		}
	});
	
};