package.json

@@ -2,14 +2,14 @@
   "name": "calque",
   "dependencies": {
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.1",
+    "@solidjs/router": "^0.15.2",
     "@solidjs/start": "^1.0.10",
     "dexie": "^4.0.10",
     "iterator-helpers-polyfill": "^3.0.1",
     "sitemap": "^8.0.0",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.3",
-    "ts-pattern": "^5.5.0",
+    "ts-pattern": "^5.6.0",
     "vinxi": "^0.4.3"
   },
   "engines": {

src/app.css

@@ -150,6 +150,16 @@ code {
   border-radius: var(--radii-m);
 }
 
+ins {
+  background-color: oklch(from var(--succ) l c h / .1);
+  color: oklch(from var(--succ) .1 .2 h);
+}
+
+del {
+  background-color: oklch(from var(--fail) l c h / .1);
+  color: oklch(from var(--fail) .1 .2 h);
+}
+
 @property --hue {
   syntax: '<angle>';
   inherits: false;

src/components/filetree.tsx

@@ -71,14 +71,14 @@ export const Tree: Component<{ entries: Entry[], children: readonly [(folder: Ac
 const _Tree: Component<{ entries: Entry[], children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element] }> = (props) => {
     const context = useContext(TreeContext);
 
-    return <For each={props.entries.sort(sort_by('kind'))}>{
+    return <For each={props.entries.toSorted(sort_by('kind'))}>{
         entry => <>
             <Show when={entry.kind === 'folder' ? entry : undefined}>{
                 folder => <Folder folder={folder()} children={props.children} />
             }</Show>
 
             <Show when={entry.kind === 'file' ? entry : undefined}>{
-                file => <span use:selectable={{ value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
+                file => <span use:selectable={{ key: file().id, value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
             }</Show>
         </>
     }</For>

src/components/grid/grid.tsx

@@ -1,28 +1,28 @@
 import { Accessor, createContext, createEffect, createMemo, createSignal, JSX, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { deepCopy, deepDiff, Mutation } from "~/utilities";
-import { SelectionMode, Table, Column as TableColumn, TableApi } from "~/components/table";
+import { SelectionMode, Table, Column as TableColumn, TableApi, CellEditors, CellEditor, createDataSet, DataSet, DataSetNode } from "~/components/table";
 import css from './grid.module.css';
 
 export interface Column<T extends Record<string, any>> extends TableColumn<T> {
-    editor?: (cell: { id: keyof T, value: T[keyof T] }) => JSX.Element;
+    editor?: (cell: { row: number, column: keyof T, value: T[keyof T], mutate: (next: T[keyof T]) => any }) => JSX.Element;
 }
 
 export interface GridApi<T extends Record<string, any>> extends TableApi<T> {
     readonly mutations: Accessor<Mutation[]>;
-    remove(keys: string[]): void;
+    remove(keys: number[]): void;
-    insert(prop: string): void;
+    insert(row: T, at?: number): void;
-    addColumn(name: string): void;
+    addColumn(column: keyof T): void;
 }
 
 interface GridContextType<T extends Record<string, any>> {
-    readonly rows: Accessor<T[]>;
+    readonly rows: Accessor<DataSetNode<keyof T, T>[]>;
     readonly mutations: Accessor<Mutation[]>;
-    // readonly selection: Accessor<SelectionItem[]>;
+    readonly selection: TableApi<T>['selection'];
-    mutate(prop: string, value: string): void;
+    mutate<K extends keyof T>(row: number, column: K, value: T[K]): void;
-    remove(props: string[]): void;
+    remove(rows: number[]): void;
-    insert(prop: string): void;
+    insert(row: T, at?: number): void;
-    addColumn(name: string): void;
+    addColumn(column: keyof T, value: T[keyof T]): void;
 }
 
 const GridContext = createContext<GridContextType<any>>();
@@ -30,65 +30,68 @@ const GridContext = createContext<GridContextType<any>>();
 const useGrid = () => useContext(GridContext)!;
 
 type GridProps<T extends Record<string, any>> = { class?: string, groupBy?: keyof T, columns: Column<T>[], rows: T[], api?: (api: GridApi<T>) => any };
+// type GridState<T extends Record<string, any>> = { data: DataSet<T>, columns: Column<T>[], numberOfRows: number };
 
 export function Grid<T extends Record<string, any>>(props: GridProps<T>) {
     const [table, setTable] = createSignal<TableApi<T>>();
-    const [state, setState] = createStore<{ rows: T[], columns: Column<T>[], snapshot: T[], numberOfRows: number }>({
+    const data = createMemo(() => createDataSet(props.rows));
-        rows: [],
-        columns: [],
-        snapshot: [],
-        numberOfRows: 0,
-    });
 
-    const mutations = createMemo(() => {
+    const rows = createMemo(() => data().value());
-        // enumerate all values to make sure the memo is recalculated on any change
+    const mutations = createMemo(() => data().mutations());
-        Object.values(state.rows).map(entry => Object.values(entry));
+    const columns = createMemo(() => props.columns);
-
-        return deepDiff(state.snapshot, state.rows).toArray();
-    });
-
-    createEffect(() => {
-        setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
-        setState('snapshot', props.rows);
-    });
-
-    createEffect(() => {
-        setState('columns', props.columns);
-    });
-
-    createEffect(() => {
-        setState('numberOfRows', Object.keys(state.rows).length);
-    });
-
-    const rows = createMemo(() => state.rows);
-    const columns = createMemo(() => state.columns);
 
     const ctx: GridContextType<T> = {
         rows,
         mutations,
-        // selection,
+        selection: createMemo(() => table()?.selection() ?? []),
 
-        mutate(prop: string, value: string) {
+        mutate<K extends keyof T>(row: number, column: K, value: T[K]) {
+            data().mutate(row, column, value);
         },
 
-        remove(props: string[]) {
+        remove(rows: number[]) {
+            // setState('rows', (r) => r.filter((_, i) => rows.includes(i) === false));
         },
 
-        insert(prop: string) {
+        insert(row: T, at?: number) {
+            if (at === undefined) {
+                // setState('rows', state.rows.length, row);
+            } else {
+
+            }
         },
 
-        addColumn(id: keyof T): void {
+        addColumn(column: keyof T, value: T[keyof T]): void {
+            // setState('rows', { from: 0, to: state.rows.length - 1 }, column as any, value);
         },
     };
 
-    const cellEditors = createMemo(() => Object.fromEntries(state.columns.filter(c => c.editor !== undefined).map(c => [c.id, c.editor!] as const)));
+    const cellEditors = createMemo(() => Object.fromEntries(
+        props.columns
+            .filter(c => c.editor !== undefined)
+            .map(c => {
+                const Editor: CellEditor<T, keyof T> = ({ row, column, value }) => {
+                    const mutate = (next: T[keyof T]) => {
+                        console.log('KAAS', { next })
+
+                        ctx.mutate(row, column, next);
+                    };
+
+                    return c.editor!({ row, column, value, mutate });
+                };
+
+                return [c.id, Editor] as const;
+            })
+    ) as any);
 
     return <GridContext.Provider value={ctx}>
         <Api api={props.api} table={table()} />
 
-        <Table api={setTable} class={`${css.grid} ${props.class}`} rows={rows()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
+        <form style="all: inherit; display: contents;">
+            <Table api={setTable} class={`${css.grid} ${props.class}`} rows={data()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
                 cellEditors()
             }</Table>
+        </form>
     </GridContext.Provider>;
 };
 
@@ -105,14 +108,14 @@ function Api<T extends Record<string, any>>(props: { api: undefined | ((api: Gri
         return {
             ...table,
             mutations: gridContext.mutations,
-            remove(props: string[]) {
+            remove(rows: number[]) {
-                gridContext.remove(props);
+                gridContext.remove(rows);
             },
-            insert(prop: string) {
+            insert(row: T, at?: number) {
-                gridContext.insert(prop);
+                gridContext.insert(row, at);
             },
-            addColumn(name: string): void {
+            addColumn(column: keyof T, value: T[keyof T]): void {
-                gridContext.addColumn(name);
+                gridContext.addColumn(column, value);
             },
         };
     });

src/components/grid/index.tsx

@@ -1,4 +1,4 @@
 
-export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode } from '../table';
+export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode, SortingFunction, SortOptions, GroupingFunction, GroupOptions } from '../table';
 export type { GridApi, Column } from './grid';
 export { Grid } from './grid';

src/components/table/dataset.ts

@@ -1,27 +1,115 @@
+import { Accessor, createMemo } from "solid-js";
+import { createStore, NotWrappable, StoreSetter } from "solid-js/store";
+import { snapshot } from "vinxi/dist/types/runtime/storage";
+import { deepCopy, deepDiff, Mutation } from "~/utilities";
 
 
-export type DataSetRowNode<T> = { kind: 'row', key: string, value: T }
+export type DataSetRowNode<K, T> = { kind: 'row', key: K, value: T }
-export type DataSetGroupNode<T> = { kind: 'group', key: string, groupedBy: keyof T, nodes: DataSetNode<T>[] };
+export type DataSetGroupNode<K, T> = { kind: 'group', key: K, groupedBy: keyof T, nodes: DataSetNode<K, T>[] };
-export type DataSetNode<T> = DataSetRowNode<T> | DataSetGroupNode<T>;
+export type DataSetNode<K, T> = DataSetRowNode<K, T> | DataSetGroupNode<K, T>;
 
-export type DataSet<T extends Record<string, any>> = DataSetNode<T>[];
+export interface SortingFunction<T> {
+    (a: T, b: T): -1 | 0 | 1;
+}
+export interface SortOptions<T extends Record<string, any>> {
+    by: keyof T;
+    reversed: boolean;
+    with?: SortingFunction<T>;
+}
 
-export const createDataSet = <T extends Record<string, any>>(data: T[]): DataSetNode<T>[] => {
+export interface GroupingFunction<T> {
-    return Object.entries(data).map<DataSetRowNode<T>>(([key, value]) => ({ kind: 'row', key, value }));
+    (nodes: DataSetRowNode<keyof T, T>[]): DataSetNode<keyof T, T>[];
-};
+}
+export interface GroupOptions<T extends Record<string, any>> {
+    by: keyof T;
+    with: GroupingFunction<T>;
+}
+interface DataSetState<T extends Record<string, any>> {
+    value: DataSetRowNode<keyof T, T>[];
+    snapshot: DataSetRowNode<keyof T, T>[];
+    sorting?: SortOptions<T>;
+    grouping?: GroupOptions<T>;
+}
 
-type SortingFunction<T> = (a: T, b: T) => -1 | 0 | 1;
+export interface DataSet<T extends Record<string, any>> {
-type SortOptions<T extends Record<string, any>> = { by: keyof T, reversed: boolean, with: SortingFunction<T> };
+    data: T[];
-export const toSorted = <T extends Record<string, any>>(dataSet: DataSet<T>, sort: SortOptions<T>): DataSet<T> => {
+    value: Accessor<DataSetNode<keyof T, T>[]>;
-    const sorted = dataSet.toSorted((a, b) => sort.with(a.value[sort.by], b.value[sort.by]));
+    mutations: Accessor<Mutation[]>;
+    sort: Accessor<SortOptions<T> | undefined>;
 
-    if (sort.reversed) {
+    // mutate<K extends keyof T>(index: number, value: T): void;
-        sorted.reverse();
+    mutate<K extends keyof T>(index: number, prop: K, value: T[K]): void;
+
+    setSorting(options: SortOptions<T> | undefined): void;
+    setGrouping(options: GroupOptions<T> | undefined): void;
+}
+
+const defaultComparer = <T>(a: T, b: T) => a < b ? -1 : a > b ? 1 : 0;
+function defaultGroupingFunction<T>(groupBy: keyof T): GroupingFunction<T> {
+    return (nodes: DataSetRowNode<keyof T, T>[]): DataSetNode<keyof T, T>[] => Object.entries(Object.groupBy(nodes, r => r.value[groupBy] as PropertyKey))
+        .map(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! } as DataSetGroupNode<keyof T, T>));
+}
+
+export const createDataSet = <T extends Record<string, any>>(data: T[]): DataSet<T> => {
+    const nodes = data.map<DataSetRowNode<keyof T, T>>((value, key) => ({ kind: 'row', key: key as keyof T, value }));
+
+    const [state, setState] = createStore<DataSetState<T>>({
+        value: deepCopy(nodes),
+        snapshot: nodes,
+        sorting: undefined,
+        grouping: undefined,
+    });
+
+    const value = createMemo(() => {
+        const sorting = state.sorting;
+        const grouping = state.grouping;
+
+        let value = state.value as DataSetNode<keyof T, T>[];
+
+        if (sorting) {
+            const comparer = sorting.with ?? defaultComparer;
+
+            value = value.filter(entry => entry.kind === 'row').toSorted((a, b) => comparer(a.value[sorting.by], b.value[sorting.by]));
+
+            if (sorting.reversed) {
+                value.reverse();
+            }
         }
 
-    return sorted;
+        if (grouping) {
-};
+            const implementation = grouping.with ?? defaultGroupingFunction(grouping.by);
 
-type GroupingFunction<T> = (nodes: DataSetRowNode<T>[]) => DataSetNode<T>[];
+            value = implementation(value as DataSetRowNode<keyof T, T>[]);
-type GroupOptions<T extends Record<string, any>> = { by: keyof T, with: GroupingFunction<T> };
+        }
-export const toGrouped = <T extends Record<string, any>>(dataSet: DataSet<T>, group: GroupOptions<T>): DataSet<T> => group.with(dataSet as any);
+
+        return value;
+    });
+
+    const mutations = createMemo(() => {
+        // enumerate all values to make sure the memo is recalculated on any change
+        Object.values(state.value).map(entry => Object.values(entry));
+
+        return deepDiff(state.snapshot, state.value).toArray();
+    });
+    const sort = createMemo(() => state.sorting);
+
+    return {
+        data,
+        value,
+        mutations,
+        sort,
+
+        mutate(index, prop, value) {
+            console.log({ index, prop, value });
+            // setState('value', index, 'value', prop as any, value);
+        },
+
+        setSorting(options) {
+            setState('sorting', options);
+        },
+
+        setGrouping(options) {
+            setState('grouping', options)
+        },
+    };
+};

src/components/table/index.tsx

@@ -1,5 +1,5 @@
 
-export type { Column, TableApi } from './table';
+export type { Column, TableApi, CellEditor, CellEditors } from './table';
-export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
+export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode, SortingFunction, SortOptions, GroupingFunction, GroupOptions } from './dataset';
 export { SelectionMode, Table } from './table';
-export { createDataSet, toSorted, toGrouped } from './dataset';
+export { createDataSet } from './dataset';

src/components/table/table.tsx

@@ -1,50 +1,42 @@
 import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
-import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
+import { selectable, SelectionItem, SelectionProvider, useSelection } from "~/features/selectable";
-import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
+import { DataSetRowNode, DataSetNode, DataSet } from './dataset';
-import { createStore } from "solid-js/store";
 import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
 import css from './table.module.css';
 
-selectable
+selectable;
 
 export type Column<T> = {
     id: keyof T,
     label: string,
     sortable?: boolean,
     group?: string,
-    readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
+    readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
 };
 
-type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
+export type CellEditor<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
-export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element };
+export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: CellEditor<T, K> };
 
 export interface TableApi<T extends Record<string, any>> {
-    readonly selection: Accessor<SelectionItem<T>[]>;
+    readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
-    readonly rows: Accessor<T[]>;
+    readonly rows: Accessor<DataSet<T>>;
     readonly columns: Accessor<Column<T>[]>;
     selectAll(): void;
     clear(): void;
 }
 
-const TableContext = createContext<{
+interface TableContextType<T extends Record<string, any>> {
-    readonly rows: Accessor<any[]>,
+    readonly rows: Accessor<DataSet<T>>,
-    readonly columns: Accessor<Column<any>[]>,
+    readonly columns: Accessor<Column<T>[]>,
-    readonly selection: Accessor<any[]>,
+    readonly selection: Accessor<SelectionItem<keyof T, T>[]>,
     readonly selectionMode: Accessor<SelectionMode>,
-    readonly groupBy: Accessor<string | undefined>,
+    readonly cellRenderers: Accessor<CellEditors<T>>,
-    readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
-    readonly cellRenderers: Accessor<CellEditors<any>>,
-
-    setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
-}>();
-
-const useTable = () => useContext(TableContext)!
-
-function defaultGroupingFunction<T>(groupBy: keyof T) {
-    return (nodes: DataSetRowNode<T>[]): DataSetNode<T>[] => Object.entries(Object.groupBy<any, DataSetRowNode<T>>(nodes, r => r.value[groupBy]))
-        .map<DataSetGroupNode<T>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! }));
 }
 
+const TableContext = createContext<TableContextType<any>>();
+
+const useTable = <T extends Record<string, any>>() => useContext(TableContext)! as TableContextType<T>
+
 export enum SelectionMode {
     None,
     Single,
@@ -53,46 +45,27 @@ export enum SelectionMode {
 type TableProps<T extends Record<string, any>> = {
     class?: string,
     summary?: string,
-    rows: T[],
+    rows: DataSet<T>,
     columns: Column<T>[],
-    groupBy?: keyof T,
-    sort?: {
-        by: keyof T,
-        reversed?: boolean,
-    },
     selectionMode?: SelectionMode,
     children?: CellEditors<T>,
     api?: (api: TableApi<T>) => any,
 };
 
 export function Table<T extends Record<string, any>>(props: TableProps<T>) {
-    const [selection, setSelection] = createSignal<T[]>([]);
+    const [selection, setSelection] = createSignal<SelectionItem<keyof T, T>[]>([]);
-    const [state, setState] = createStore({
-        sort: props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined,
-    });
 
-    createEffect(() => {
+    const rows = createMemo(() => props.rows);
-        setState('sort', props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined);
-    });
-
-    const rows = createMemo<T[]>(() => props.rows ?? []);
     const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
     const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
-    const groupBy = createMemo(() => props.groupBy as string | undefined);
     const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});
 
-    const context = {
+    const context: TableContextType<T> = {
         rows,
         columns,
         selection,
         selectionMode,
-        groupBy,
-        sort: createMemo(() => state.sort),
         cellRenderers,
-
-        setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined) {
-            setState('sort', setter);
-        },
     };
 
     return <TableContext.Provider value={context}>
@@ -104,30 +77,13 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
     </TableContext.Provider>;
 };
 
-type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: T[] };
+type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: DataSet<T> };
 
 function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
-    const table = useTable();
+    const table = useTable<T>();
 
     const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
     const columnCount = createMemo(() => table.columns().length);
-    const nodes = createMemo<DataSetNode<T>[]>(() => {
-        const columns = table.columns();
-        const groupBy = table.groupBy();
-        const sort = table.sort();
-
-        let dataset = createDataSet(props.rows);
-
-        if (sort) {
-            dataset = toSorted(dataset, { by: sort.by, reversed: sort.reversed ?? false, with: (a, b) => a < b ? -1 : a > b ? 1 : 0 })
-        }
-
-        if (groupBy) {
-            dataset = toGrouped(dataset, { by: groupBy, with: columns.find(({ id }) => id === groupBy)?.groupBy ?? defaultGroupingFunction(groupBy) });
-        }
-
-        return dataset;
-    });
 
     return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
         <Show when={props.summary}>{
@@ -138,7 +94,7 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
         <Head />
 
         <tbody class={css.main}>
-            <For each={nodes()}>{
+            <For each={props.rows.value()}>{
                 node => <Node node={node} depth={0} />
             }</For>
         </tbody>
@@ -154,13 +110,11 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
 };
 
 function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
-    const table = useTable();
+    const table = useTable<T>();
-    const selectionContext = useSelection<SelectionItem<T>>();
+    const selectionContext = useSelection<T>();
 
     const api: TableApi<T> = {
-        selection: createMemo(() => {
+        selection: selectionContext.selection,
-            return selectionContext.selection();
-        }),
         rows: table.rows,
         columns: table.columns,
         selectAll() {
@@ -209,7 +163,7 @@ function Head(props: {}) {
 
             <For each={table.columns()}>{
                 ({ id, label, sortable }) => {
-                    const sort = createMemo(() => table.sort());
+                    const sort = createMemo(() => table.rows().sort());
                     const by = String(id);
 
                     const onPointerDown = (e: PointerEvent) => {
@@ -245,7 +199,7 @@ function Head(props: {}) {
     </thead>;
 };
 
-function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) {
+function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T, T>, depth: number, groupedBy?: keyof T }) {
     return <Switch>
         <Match when={props.node.kind === 'row' ? props.node : undefined}>{
             row => <Row key={row().key} value={row().value} depth={props.depth} groupedBy={props.groupedBy} />
@@ -257,11 +211,11 @@ function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, dept
     </Switch>;
 }
 
-function Row<T extends Record<string, any>>(props: { key: string, value: T, depth: number, groupedBy?: keyof T }) {
+function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, depth: number, groupedBy?: keyof T }) {
-    const table = useTable();
+    const table = useTable<T>();
-    const context = useSelection();
+    const context = useSelection<T>();
+    const columns = table.columns;
 
-    const values = createMemo(() => Object.entries(props.value));
     const isSelected = context.isSelected(props.key);
 
     return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
@@ -271,17 +225,17 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
             </th>
         </Show>
 
-        <For each={values()}>{
+        <For each={columns()}>{
-            ([k, value]) => <td class={css.cell}>{table.cellRenderers()[k]?.({ value }) ?? value}</td>
+            ({ id }) => <td class={'css.cell'}>{table.cellRenderers()[id]?.({ row: props.key as number, column: id, value: props.value[id] }) ?? props.value[id]}</td>
         }</For>
     </tr>;
 };
 
-function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {
+function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
     const table = useTable();
 
     return <details open>
-        <summary style={{ '--depth': props.depth }}>{props.key}</summary>
+        <summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
 
         <For each={props.nodes}>{
             node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />

src/entry-server.tsx

@@ -36,7 +36,7 @@ export default createHandler(({ nonce }) => {
     // style: `${base} data: `,
   } as const;
 
-  event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; '))
+  // event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; '))
 
   return { nonce };
 });

src/features/selectable/index.tsx

@@ -1,4 +1,4 @@
-import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, Setter, Signal, useContext } from "solid-js";
+import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, ParentProps, Setter, Signal, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { isServer } from "solid-js/web";
 import css from "./index.module.css";
@@ -16,26 +16,33 @@ enum SelectionMode {
     Toggle,
 }
 
-export interface SelectionContextType<T extends object = object> {
+export interface SelectionItem<K, T> {
-    readonly selection: Accessor<T[]>;
+    key: K;
+    value: Accessor<T>;
+    element: WeakRef<HTMLElement>;
+};
+
+export interface SelectionContextType<T extends object> {
+    readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
     readonly length: Accessor<number>;
-    select(selection: string[], options?: Partial<{ mode: SelectionMode }>): void;
+    select(selection: (keyof T)[], options?: Partial<{ mode: SelectionMode }>): void;
     selectAll(): void;
     clear(): void;
-    isSelected(key: string): Accessor<boolean>;
+    isSelected(key: keyof T): Accessor<boolean>;
 }
-interface InternalSelectionContextType {
+interface InternalSelectionContextType<T extends object> {
     readonly latest: Signal<HTMLElement | undefined>,
     readonly modifier: Signal<Modifier>,
     readonly selectables: Signal<HTMLElement[]>,
-    add(key: string, value: object, element: HTMLElement): void;
+    readonly keyMap: Map<string, keyof T>,
+    add(key: keyof T, value: Accessor<T>, element: HTMLElement): string;
 }
-export interface SelectionHandler<T extends object = object> {
+export interface SelectionHandler<T extends object> {
     (selection: T[]): any;
 }
 
-const SelectionContext = createContext<SelectionContextType>();
+const SelectionContext = createContext<SelectionContextType<any>>();
-const InternalSelectionContext = createContext<InternalSelectionContextType>();
+const InternalSelectionContext = createContext<InternalSelectionContextType<any>>();
 
 export function useSelection<T extends object = object>(): SelectionContextType<T> {
     const context = useContext(SelectionContext);
@@ -46,15 +53,17 @@ export function useSelection<T extends object = object>(): SelectionContextType<
 
     return context as SelectionContextType<T>;
 };
-const useInternalSelection = () => useContext(InternalSelectionContext)!;
+function useInternalSelection<T extends object>() {
-
+    return useContext(InternalSelectionContext)! as InternalSelectionContextType<T>;
-interface State {
-    selection: string[];
-    data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
 }
 
-export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: boolean }> = (props) => {
+interface State<T extends object> {
-    const [state, setState] = createStore<State>({ selection: [], data: [] });
+    selection: (keyof T)[];
+    data: SelectionItem<keyof T, T>[];
+}
+
+export function SelectionProvider<T extends object>(props: ParentProps<{ selection?: SelectionHandler<T>, multiSelect?: boolean }>) {
+    const [state, setState] = createStore<State<T>>({ selection: [], data: [] });
     const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
     const length = createMemo(() => state.data.length);
 
@@ -62,7 +71,7 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
         props.selection?.(selection().map(({ value }) => value()));
     });
 
-    const context: SelectionContextType = {
+    const context: SelectionContextType<T> = {
         selection,
         length,
         select(selection, { mode = SelectionMode.Normal } = {}) {
@@ -92,17 +101,29 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
         clear() {
             setState('selection', []);
         },
-        isSelected(key: string) {
+        isSelected(key) {
             return createMemo(() => state.selection.includes(key));
         },
     };
 
-    const internal: InternalSelectionContextType = {
+    const keyIdMap = new Map<keyof T, string>();
+    const idKeyMap = new Map<string, keyof T>();
+    const internal: InternalSelectionContextType<T> = {
         modifier: createSignal<Modifier>(Modifier.None),
         latest: createSignal<HTMLElement>(),
         selectables: createSignal<HTMLElement[]>([]),
-        add(key: string, value: Accessor<any>, element: HTMLElement) {
+        keyMap: idKeyMap,
-            setState('data', data => [...data, { key, value, element: new WeakRef(element) }]);
+        add(key, value, element) {
+            if (keyIdMap.has(key) === false) {
+                const id = createUniqueId();
+
+                keyIdMap.set(key, id);
+                idKeyMap.set(id, key);
+            }
+
+            setState('data', state.data.length, { key, value, element: new WeakRef(element) });
+
+            return keyIdMap.get(key)!;
         },
     };
 
@@ -180,31 +201,31 @@ const Root: ParentComponent = (props) => {
     return <div ref={setRoot} tabIndex={0} onKeyDown={onKeyboardEvent} onKeyUp={onKeyboardEvent} class={css.root}>{c()}</div>;
 };
 
-export const selectable = (element: HTMLElement, options: Accessor<{ value: object, key?: string }>) => {
+export function selectable<T extends object>(element: HTMLElement, options: Accessor<{ value: T, key: keyof T }>) {
-    const context = useSelection();
+    const context = useSelection<T>();
-    const internal = useInternalSelection();
+    const internal = useInternalSelection<T>();
 
-    const key = options().key ?? createUniqueId();
+    const key = options().key;
     const value = createMemo(() => options().value);
     const isSelected = context.isSelected(key);
 
-    internal.add(key, value, element);
+    const selectionKey = internal.add(key, value, element);
 
-    const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
+    const createRange = (a?: HTMLElement, b?: HTMLElement): (keyof T)[] => {
         if (!a && !b) {
             return [];
         }
 
         if (!a) {
-            return [b!.dataset.selecatableKey!];
+            return [b!.dataset.selecatableKey! as keyof T];
         }
 
         if (!b) {
-            return [a!.dataset.selecatableKey!];
+            return [a!.dataset.selecatableKey! as keyof T];
         }
 
         if (a === b) {
-            return [a!.dataset.selecatableKey!];
+            return [a!.dataset.selecatableKey! as keyof T];
         }
 
         const nodes = internal.selectables[0]();
@@ -212,7 +233,7 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
         const bIndex = nodes.indexOf(b);
         const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
 
-        return selection.map(n => n.dataset.selectionKey!);
+        return selection.map(n => internal.keyMap.get(n.dataset.selecatableKey!)!);
     };
 
     createRenderEffect(() => {
@@ -256,13 +277,13 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
     });
 
     element.classList.add(css.selectable);
-    element.dataset.selectionKey = key;
+    element.dataset.selectionKey = selectionKey;
 };
 
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
-            selectable: { value: object, key?: string };
+            selectable: { value: object, key: any };
         }
     }
 }

src/global.d.ts

@@ -4,10 +4,10 @@ interface FileSystemHandle {
     getUniqueId(): Promise<string>;
 }
 
-declare module "solid-js" {
+// declare module "solid-js" {
-    namespace JSX {
+//     namespace JSX {
-        interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+//         interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
-            indeterminate?: boolean;
+//             indeterminate?: boolean;
-        }
+//         }
-    }
+//     }
-}
+// }

src/routes/(editor).tsx

@@ -92,11 +92,15 @@ export default function Editor(props: ParentProps) {
             </nav>
 
             <section>
-                <ErrorBoundary fallback={err => <ErrorComp error={err} />}>
                 <FilesProvider>
                     {props.children}
                 </FilesProvider>
-                </ErrorBoundary>
+
+                {/* <ErrorBoundary fallback={err => <ErrorComp error={err} />}>
+                    <FilesProvider>
+                        {props.children}
+                    </FilesProvider>
+                </ErrorBoundary> */}
             </section>
         </main>
 
@@ -112,6 +116,8 @@ const ErrorComp: Component<{ error: Error }> = (props) => {
             cause => <>{cause().description}</>
         }</Show>
 
+        {props.error.stack}
+
         <a href="/">Return to start</a>
     </div>;
 };

src/routes/(editor)/experimental/grid.module.css

@@ -8,6 +8,8 @@
         z-index: 1;
         padding: var(--padding-xl);
         background-color: var(--surface-300);
+        max-inline-size: 25vw;
+        overflow: auto;
 
         & > ul {
             padding: 0;

src/routes/(editor)/experimental/grid.tsx

@@ -1,8 +1,10 @@
 import { Sidebar } from '~/components/sidebar';
 import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
 import { people, Person } from './experimental.data';
+import { Component, createEffect, createMemo, createSignal, For, Match, Switch } from 'solid-js';
+import { Created, debounce, Deleted, MutarionKind, Mutation, Updated } from '~/utilities';
+import { createDataSet, Table } from '~/components/table';
 import css from './grid.module.css';
-import { createMemo, createSignal } from 'solid-js';
 
 export default function GridExperiment() {
     const columns: Column<Person>[] = [
@@ -27,7 +29,10 @@ export default function GridExperiment() {
             id: 'email',
             label: 'Email',
             sortable: true,
-            editor: ({ value }) => <input value={value} />,
+            editor: ({ value, mutate }) => <input value={value} oninput={debounce(e => {
+                console.log('WHAAAAT????', e);
+                return mutate(e.target.value.trim());
+            }, 100)} />,
         },
         {
             id: 'address',
@@ -55,9 +60,30 @@ export default function GridExperiment() {
 
     const mutations = createMemo(() => api()?.mutations() ?? [])
 
+    // createEffect(() => {
+    //     console.log(mutations());
+    // });
+
     return <div class={css.root}>
-        <Sidebar as="aside" label={'Mutations'} class={css.sidebar}>
+        <Sidebar as="aside" label={'Grid options'} class={css.sidebar}>
-            {mutations().length}
+            <fieldset>
+                <legend>Commands</legend>
+
+                <button onclick={() => api()?.insert({ id: 'some guid', name: 'new person', address: '', country: '', currency: '', email: 'some@email.email', phone: '' })}>add row</button>
+                <button onclick={() => api()?.remove(api()?.selection()?.map(i => i.key as any) ?? [])} disabled={api()?.selection().length === 0}>Remove {api()?.selection().length} items</button>
+            </fieldset>
+
+            <fieldset>
+                <legend>Selection ({api()?.selection().length})</legend>
+
+                <pre>{JSON.stringify(api()?.selection().map(i => i.key))}</pre>
+            </fieldset>
+
+            <fieldset>
+                <legend>Mutations ({mutations().length})</legend>
+
+                <Mutations mutations={mutations()} />
+            </fieldset>
         </Sidebar>
 
         <div class={css.content}>
@@ -65,3 +91,15 @@ export default function GridExperiment() {
         </div>
     </div >;
 }
+
+type M = { kind: MutarionKind, key: string, original?: any, value?: any };
+const Mutations: Component<{ mutations: Mutation[] }> = (props) => {
+    const columns: Column<M>[] = [{ id: 'key', label: 'Key' }, { id: 'original', label: 'original' }, { id: 'value', label: 'Value' }];
+
+    const rows = createMemo(() => createDataSet<M>(props.mutations));
+
+    return <Table rows={rows()} columns={columns} groupBy='kind'>{{
+        original: ({ value }) => <del>{value}</del>,
+        value: ({ value }) => <ins>{value}</ins>,
+    }}</Table>
+};

src/routes/(editor)/experimental/table.tsx

@@ -1,19 +1,20 @@
 import { Sidebar } from '~/components/sidebar';
-import css from './table.module.css';
+import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, GroupOptions, SelectionMode, SortOptions, Table } from '~/components/table';
-import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, SelectionMode, Table } from '~/components/table';
 import { createStore } from 'solid-js/store';
 import { Person, people } from './experimental.data';
+import css from './table.module.css';
+import { createEffect, createMemo, For } from 'solid-js';
 
 export default function TableExperiment() {
     const columns: Column<Person>[] = [
         {
             id: 'id',
             label: '#',
-            groupBy(rows: DataSetRowNode<Person>[]) {
+            groupBy(rows: DataSetRowNode<keyof Person, Person>[]) {
-                const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<Person>[] => nodes.every(n => n._key.includes('.') === false)
+                const group = (nodes: (DataSetRowNode<keyof Person, Person> & { _key: string })[]): DataSetNode<keyof Person, Person>[] => nodes.every(n => n._key.includes('.') === false)
                     ? nodes
                     : Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
-                        .map<DataSetGroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
+                        .map<DataSetGroupNode<keyof Person, Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
 
                 return group(rows.map(row => ({ ...row, _key: row.value.id })));
             },
@@ -50,10 +51,20 @@ export default function TableExperiment() {
         },
     ];
 
-    const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Person, sort?: { by: keyof Person, reversed?: boolean } }>({
+    const [store, setStore] = createStore<{ selectionMode: SelectionMode, group?: GroupOptions<Person>, sort?: SortOptions<Person> }>({
         selectionMode: SelectionMode.None,
-        // groupBy: 'value',
+        group: undefined,
-        // sortBy: 'key'
+        sort: undefined,
+    });
+
+    const rows = createMemo(() => createDataSet(people));
+
+    createEffect(() => {
+        rows().setGrouping(store.group);
+    });
+
+    createEffect(() => {
+        rows().setSorting(store.sort);
     });
 
     return <div class={css.root}>
@@ -74,7 +85,7 @@ export default function TableExperiment() {
                 <label>
                     Group by
 
-                    <select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
+                    <select value={store.group?.by ?? ''} oninput={e => setStore('group', 'by', (e.target.value || undefined) as any)}>
                         <option value=''>None</option>
                         <For each={columns}>{
                             column => <option value={column.id}>{column.label}</option>
@@ -89,7 +100,7 @@ export default function TableExperiment() {
                 <label>
                     by
 
-                    <select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Entry, reversed: prev?.reversed } : undefined)}>
+                    <select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Person, reversed: prev?.reversed } : undefined)}>
                         <option value=''>None</option>
                         <For each={columns}>{
                             column => <option value={column.id}>{column.label}</option>
@@ -106,9 +117,7 @@ export default function TableExperiment() {
         </Sidebar>
 
         <div class={css.content}>
-            <Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
+            <Table class={css.table} rows={rows()} columns={columns} selectionMode={store.selectionMode} />
-                // email: (cell) => <input type="email" value={cell.value} />,
-            }}</Table>
         </div>
     </div >;
 }

src/utilities.ts

@@ -56,7 +56,7 @@ export enum MutarionKind {
 }
 export type Created = { kind: MutarionKind.Create, key: string, value: any };
 export type Updated = { kind: MutarionKind.Update, key: string, value: any, original: any };
-export type Deleted = { kind: MutarionKind.Delete, key: string };
+export type Deleted = { kind: MutarionKind.Delete, key: string, original: any };
 export type Mutation = Created | Updated | Deleted;
 
 export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, path: string[] = []): Generator<Mutation, void, unknown> {
@@ -74,7 +74,7 @@ export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, pa
         }
 
         if (keyA && keyB === undefined) {
-            yield { key: path.concat(keyA.toString()).join('.'), kind: MutarionKind.Delete };
+            yield { key: path.concat(keyA.toString()).join('.'), kind: MutarionKind.Delete, original: valueA };
 
             continue;
         }
@@ -93,7 +93,7 @@ export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, pa
 
         yield ((): Mutation => {
             if (valueA === null || valueA === undefined) return { key, kind: MutarionKind.Create, value: valueB };
-            if (valueB === null || valueB === undefined) return { key, kind: MutarionKind.Delete };
+            if (valueB === null || valueB === undefined) return { key, kind: MutarionKind.Delete, original: valueA };
 
             return { key, kind: MutarionKind.Update, value: valueB, original: valueA };
         })();