
<script>
	import {Route, router, meta} from 'tinro';
	import {Meteor} from "meteor/meteor";
	import FlexTable from "./FlexTable.svelte";
	import {useTracker} from "meteor/rdb:svelte-meteor-data";
	import {writable} from "svelte/store";

	const columns = [
		{
			key: "_id",
			title: "ID",
			value: v => v._id,
			minWidth: 20,
			weight: 1,
		}, {
			key: "text",
			title: "Text",
			value: v => v.text,
			minWidth: 100,
			weight: 1,
		}
	];

	let rows = writable([
		{
			_id: "1",
			text: "A"
		},
		{
			_id: "2",
			text: "B"
		},
		{
			_id: "3",
			text: "C"
		},
		{
			_id: "4",
			text: "D"
		},
	]);

	const getRowKey = (row) => row._id;
	let edited = writable(null);
	let text = "";
	const addRow = () => {
		$rows[$rows.length] = {_id: "" + ($rows.length + 1), text};
		text = "";
	}
</script>
<Route path="/">
	<div class="container">
		<div class="row col-12 table">
			<FlexTable columns="{columns}" bind:rows="{$rows}" rowKey="{getRowKey}" edited="{edited}">
				My Editor....
			</FlexTable>
		</div>
	</div>
	<div class="container">
		<div class="row col-12">
			<input type="text" bind:value={text}/>
			<button type="button" on:click={addRow}>Add</button>
		</div>
	</div>
</Route>
