<script>
	import { onMount } from 'svelte';
	import jspreadsheet from "jspreadsheet-ce";
    import "jspreadsheet-ce/dist/jspreadsheet.css";

	var spreadsheet = null;

	function update(instance, cell, x, y, value) {
		console.log({instance,cell,x,y,value});
		console.log(spreadsheet[0].getData());
	}


	const config = {
	    worksheets: [{
	            data: [
	                ["1","Sum of A:","=SUM(A1:A99)"],
	                ["2"],
	                ["3"],
	                ["4"]
	            ],
	            columns: [
	                { type: 'autonumber', title: 'amount' },
	                { type: 'text', width: '350px', title: 'description', align: 'right' },
	                { type: 'text', width: '250px', title: 'value' },
	            ],
	            // Name of the worksheet
	            worksheetName: 'Albums'
	    }],
	    onchange: update
	};

	function load(){
		spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), config);
	}

	onMount(load);
</script>

<div id="spreadsheet"></div>