67 lines
1.2 KiB
Svelte
67 lines
1.2 KiB
Svelte
|
|
<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>
|