<script>
	import { onMount } from 'svelte';

	var spreadsheet = null;

	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 update(instance, cell, x, y, value) {
		console.log({instance,cell,x,y,value});
		console.log(spreadsheet[0].getData());
	}

	let loading = true;
	let module  = null;

	async function load(){
	    try {
			const module = await import('jspreadsheet-ce'); // path or package name
		    await import('jspreadsheet-ce/dist/jspreadsheet.css');

			let jspreadsheet = module.default ?? module;
			let element = document.getElementById('spreadsheet');
			console.log(element);
			spreadsheet = jspreadsheet(element, config);
	    } catch (e) {
			console.log(e);
	    } finally {
			loading = false;
	    }
	}


	onMount(load);
</script>

{#if loading}
Loading…
{:else}

{/if}
<div id="spreadsheet">Spreadsheet loading…</div>