runes
<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);
const EditableCellLabel /*: DataLabel<Sample>*/ = ({ column, row, value }) =>
createRender(EditableCell, {
row,
column,
value,
onUpdateValue: updateData,
})
const columns = table.createColumns([
table.group({
header: 'Name',
columns: [
table.column({
header: 'First Name',
cell: EditableCellLabel,
accessor: 'firstName',
}),
table.column({
header: () => 'Last Name',
cell: EditableCellLabel,
accessor: 'lastName',
}),
],
}),
table.group({
header: 'Info',
columns: [
table.column({
header: 'Age',
cell: EditableCellLabel,
accessor: 'age',
}),
table.column({
header: 'Status',
cell: EditableCellLabel,
id: 'status',
accessor: (item) => item.status,
}),
table.column({
header: 'Visits',
cell: EditableCellLabel,
accessor: 'visits',
}),
table.column({
header: 'Profile Progress',
cell: EditableCellLabel,
accessor: 'progress',
}),
],
}),
]);
const { headerRows, pageRows, tableAttrs, tableBodyAttrs } =
table.createViewModel(columns);
</script>
<div class="overflow-x-auto">
<table {...$tableAttrs} class="demo">
<thead>
{#each $headerRows as headerRow (headerRow.id)}
<Subscribe attrs={headerRow.attrs()} let:attrs>
<tr {...attrs}>
{#each headerRow.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<th {...attrs}>
<div>
<Render of={cell.render()} />
</div>
</th>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</thead>
<tbody {...$tableBodyAttrs}>
{#each $pageRows as row (row.id)}
<Subscribe attrs={row.attrs()} let:attrs>
<tr {...attrs}>
{#each row.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<td {...attrs}>
<Render of={cell.render()} />
</td>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</tbody>
</table>
</div>
<style>
table {
border-spacing: 0;
border-top: 1px solid black;
border-left: 1px solid black;
}
th, td {
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0.5rem;
}
</style>
import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";
import { writable } from 'svelte/store';
import {
Render,
Subscribe,
createTable,
createRender,
DataBodyRow
} from 'svelte-headless-table';
import { createSamples } from './createSamples';
import EditableCell from './EditableCell.svelte';
var root_4 = $.template(`<th><div><!></div></th>`);
var root_2 = $.template(`<tr></tr>`);
var root_8 = $.template(`<td><!></td>`);
var root_6 = $.template(`<tr></tr>`);
var root = $.template(`<div class="overflow-x-auto"><table><thead></thead><tbody></tbody></table></div>`);
export default function App($$anchor, $$props) {
$.push($$props, false);
const $$stores = $.setup_stores();
const $data = () => $.store_get(data, "$data", $$stores);
const $tableAttrs = () => $.store_get(tableAttrs, "$tableAttrs", $$stores);
const $headerRows = () => $.store_get(headerRows, "$headerRows", $$stores);
const $tableBodyAttrs = () => $.store_get(tableBodyAttrs, "$tableBodyAttrs", $$stores);
const $pageRows = () => $.store_get(pageRows, "$pageRows", $$stores);
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.
$.store_set(data, $data());
return;
}
}
if (columnId === 'status') {
if (!['relationship', 'single', 'complicated'].includes(newValue)) {
// Refresh data to reset invalid values.
$.store_set(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);
$.store_mutate(data, $.untrack($data)[idx] = newItem, $.untrack($data));
$.store_set(data, $data()); // Handle any server-synchronization.
};
const table = createTable(data);
const EditableCellLabel = (
{
column, /*: DataLabel<Sample>*/
row,
value
}
) => createRender(EditableCell, {
row,
column,
value,
onUpdateValue: updateData
});
const columns = table.createColumns([
table.group({
header: 'Name',
columns: [
table.column({
header: 'First Name',
cell: EditableCellLabel,
accessor: 'firstName'
}),
table.column({
header: () => 'Last Name',
cell: EditableCellLabel,
table.svelte-13nmc7k {
border-spacing: 0;
border-top: 1px solid black;
border-left: 1px solid black;
}
th.svelte-13nmc7k, td.svelte-13nmc7k {
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0.5rem;
}
- {
-
- {
- type: "Script"
- start: 0
- end: 2600
- context: "default"
-
} - module:
-
}
