<script>
import { writable } from 'svelte/store';
import { Render, Subscribe, createTable, createRender, DataBodyRow } from 'svelte-headless-table';
import { createSamples } from './createSamples';
import EditableCell from './EditableCell.svelte';
const data = writable(createSamples(100));
const updateData = (rowDataId, columnId, newValue) => {
if (['age', 'visits', 'progress'].includes(columnId)) {
newValue = parseInt(newValue);
if (isNaN(newValue)) {
// Refresh data to reset invalid values.
$data = $data;
return;
}
}
if (columnId === 'status') {
if (!['relationship', 'single', 'complicated'].includes(newValue)) {
// Refresh data to reset invalid values.
$data = $data;
return;
}
}
// In this case, the dataId of each item is its index in $data.
// You can also handle any server-synchronization necessary here.
const idx = parseInt(rowDataId);
const currentItem = $data[idx];
const key = columnId; // Cast as `keyof YourDataItem`
const newItem = {...currentItem, [key]: newValue};
console.log(newItem);
$data[idx] = newItem;
$data = $data;
// Handle any server-synchronization.
}
const table = createTable(data);