From b23db1d5a88d9236e678851036ddee452f8e04ff Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Thu, 12 Dec 2024 16:40:13 +0100
Subject: [PATCH] Kaas

---
 src/components/colorschemepicker.module.css   |   1 +
 src/components/grid.module.css                | 128 --------
 src/components/grid.tsx                       | 280 ------------------
 src/components/grid/grid.module.css           |   0
 src/components/grid/grid.tsx                  | 129 ++++++++
 src/components/grid/index.tsx                 |   4 +
 src/components/table/index.tsx                |   2 +-
 src/components/table/table.module.css         | 155 +++++-----
 src/components/table/table.tsx                | 141 +++++----
 src/features/command/index.tsx                |  59 ++--
 src/features/file/grid.module.css             | 128 --------
 src/features/file/grid.tsx                    |   5 +-
 src/features/menu/index.tsx                   |   8 +-
 src/global.d.ts                               |   8 +
 src/routes/(editor)/experimental.tsx          | 127 +-------
 .../{ => experimental}/experimental.data.ts   |   0
 .../grid.module.css}                          |   0
 src/routes/(editor)/experimental/grid.tsx     |  67 +++++
 .../(editor)/experimental/table.module.css    |  36 +++
 src/routes/(editor)/experimental/table.tsx    | 114 +++++++
 src/routes/editor.module.css                  |   5 -
 21 files changed, 579 insertions(+), 818 deletions(-)
 delete mode 100644 src/components/grid.module.css
 delete mode 100644 src/components/grid.tsx
 create mode 100644 src/components/grid/grid.module.css
 create mode 100644 src/components/grid/grid.tsx
 create mode 100644 src/components/grid/index.tsx
 rename src/routes/(editor)/{ => experimental}/experimental.data.ts (100%)
 rename src/routes/(editor)/{experimental.module.css => experimental/grid.module.css} (100%)
 create mode 100644 src/routes/(editor)/experimental/grid.tsx
 create mode 100644 src/routes/(editor)/experimental/table.module.css
 create mode 100644 src/routes/(editor)/experimental/table.tsx

diff --git a/src/components/colorschemepicker.module.css b/src/components/colorschemepicker.module.css
index b586f43..af89340 100644
--- a/src/components/colorschemepicker.module.css
+++ b/src/components/colorschemepicker.module.css
@@ -8,6 +8,7 @@
     padding: var(--padding-s);
 
     & select {
+        flex: 1 1 auto;
         border: none;
         background-color: inherit;
         border-radius: var(--radii-m);
diff --git a/src/components/grid.module.css b/src/components/grid.module.css
deleted file mode 100644
index 05c99e3..0000000
--- a/src/components/grid.module.css
+++ /dev/null
@@ -1,128 +0,0 @@
-.table {
-    position: relative;
-    display: grid;
-    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
-    align-content: start;
-    padding-inline: 1px;
-    margin-inline: -1px;
-
-    block-size: 100%;
-    overflow: clip auto;
-
-    background-color: var(--surface-600);
-
-    & input[type="checkbox"] {
-        margin: .1em;
-    }
-
-    & textarea {
-        resize: vertical;
-        min-block-size: max(2em, 100%);
-        max-block-size: 50em;
-
-        background-color: var(--surface-600);
-        color: var(--text-1);
-        border-color: var(--text-2);
-        border-radius: var(--radii-s);
-
-        &:has(::spelling-error, ::grammar-error) {
-            border-color: var(--fail);
-        }
-
-        & ::spelling-error {
-            outline: 1px solid var(--fail);
-            text-decoration: yellow underline;
-        }
-    }
-
-    & .cell {
-        display: grid;
-        padding: .5em;
-        border: 1px solid transparent;
-        border-radius: var(--radii-m);
-
-        &:has(textarea:focus) {
-            border-color: var(--info);
-        }
-
-        & > span {
-            align-self: center;
-        }
-    }
-
-    & :is(.header, .main, .footer) {
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-    }
-
-    & .header {
-        position: sticky;
-        inset-block-start: 0;
-        background-color: var(--surface-600);
-        border-block-end: 1px solid var(--surface-300);
-    }
-
-    & .row {
-        --bg: var(--text);
-        --alpha: 0;
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-        border: 1px solid transparent;
-        background-color: color(from var(--bg) srgb r g b / var(--alpha));
-
-        &:has(> .cell > :checked) {
-            --bg: var(--info);
-            --alpha: .1;
-            border-color: var(--bg);
-
-            & span {
-                font-variation-settings: 'GRAD' 1000;
-            }
-
-            & + :has(> .cell> :checked) {
-                border-block-start-color: transparent;
-            }
-
-            &:has(+ .row > .cell > :checked) {
-                border-block-end-color: transparent;
-            }
-        }
-
-        &:hover {
-            --alpha: .2 !important;
-        }
-    }
-
-    & details {
-        display: contents;
-
-        &::details-content {
-            grid-column: span calc(2 + var(--columns));
-            display: grid;
-            grid-template-columns: subgrid;
-        }
-
-        &:not([open])::details-content {
-            display: none;
-        }
-
-        & > summary {
-            grid-column: 2 / span calc(1 + var(--columns));
-            padding: .5em;
-            padding-inline-start: calc(var(--depth) * 1em + .5em);
-
-        }
-
-        & > .row > .cell > span {
-            padding-inline-start: calc(var(--depth) * 1em);
-        }
-    }
-}
-
-@property --depth {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
-}
\ No newline at end of file
diff --git a/src/components/grid.tsx b/src/components/grid.tsx
deleted file mode 100644
index c0e0c2a..0000000
--- a/src/components/grid.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
-import { createStore, produce, unwrap } from "solid-js/store";
-import { SelectionProvider, useSelection, selectable } from "../features/selectable";
-import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
-import css from './grid.module.css';
-
-selectable // prevents removal of import
-
-type Rows = Map<string, Record<string, string>>;
-type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
-
-type Insertion = { kind: 'row', key: string } | { kind: 'column', value: string };
-
-export interface GridContextType {
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
-    readonly mutations: Accessor<Mutation[]>;
-    readonly selection: Accessor<SelectionItem[]>;
-    mutate(prop: string, lang: string, value: string): void;
-    remove(props: string[]): void;
-    insert(insertion: Insertion): void;
-}
-
-export interface GridApi {
-    readonly selection: Accessor<Record<string, Record<string, string>>>;
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
-    readonly mutations: Accessor<Mutation[]>;
-    selectAll(): void;
-    clear(): void;
-    remove(keys: string[]): void;
-    insert(insertion: Insertion): void;
-}
-
-const GridContext = createContext<GridContextType>();
-
-const useGrid = () => useContext(GridContext)!;
-
-export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
-    const [selection, setSelection] = createSignal<SelectionItem[]>([]);
-    const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, columns: string[], snapshot: Rows, numberOfRows: number }>({
-        rows: {},
-        columns: [],
-        snapshot: new Map,
-        numberOfRows: 0,
-    });
-
-    const mutations = createMemo(() => {
-        // enumerate all values to make sure the memo is recalculated on any change
-        Object.values(state.rows).map(entry => Object.values(entry));
-
-        return deepDiff(state.snapshot, state.rows).toArray();
-    });
-    const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
-    const columns = createMemo(() => state.columns);
-
-    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 ctx: GridContextType = {
-        rows,
-        mutations,
-        selection,
-
-        mutate(prop: string, lang: string, value: string) {
-            setState('rows', prop, lang, value);
-        },
-
-        remove(props: string[]) {
-            setState('rows', produce(rows => {
-                for (const prop of props) {
-                    delete rows[prop];
-                }
-
-                return rows;
-            }));
-        },
-
-        insert(prop: string) {
-            setState('rows', produce(rows => {
-                rows[prop] = Object.fromEntries(state.columns.slice(1).map(lang => [lang, '']));
-
-                return rows
-            }))
-        },
-
-        addColumn(name: string): void {
-            setState(produce(state => {
-                state.columns.push(name);
-                state.rows = Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, { ...row, [name]: '' }]));
-
-                return state;
-            }))
-        },
-    };
-
-    return <GridContext.Provider value={ctx}>
-        <SelectionProvider selection={setSelection} multiSelect>
-            <Api api={props.api} />
-
-            <_Grid class={props.class} columns={columns()} rows={rows()} />
-        </SelectionProvider>
-    </GridContext.Provider>;
-};
-
-const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
-    const columnCount = createMemo(() => props.columns.length - 1);
-    const root = createMemo<Entry>(() => Object.entries(props.rows)
-        .reduce((aggregate, [key, value]) => {
-            let obj: any = aggregate;
-            const parts = key.split('.');
-
-            for (const [i, part] of parts.entries()) {
-                if (Object.hasOwn(obj, part) === false) {
-                    obj[part] = {};
-                }
-
-                if (i === (parts.length - 1)) {
-                    obj[part] = value;
-                }
-                else {
-                    obj = obj[part];
-                }
-            }
-
-            return aggregate;
-        }, {}));
-
-    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
-        <Head headers={props.columns} />
-
-        <main class={css.main}>
-            <Row entry={root()} />
-        </main>
-    </section>
-};
-
-const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
-    const gridContext = useGrid();
-    const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
-
-    const api: GridApi = {
-        selection: createMemo(() => {
-            const selection = selectionContext.selection();
-
-            return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
-        }),
-        rows: gridContext.rows,
-        mutations: gridContext.mutations,
-        selectAll() {
-            selectionContext.selectAll();
-        },
-        clear() {
-            selectionContext.clear();
-        },
-        remove(props: string[]) {
-            gridContext.remove(props);
-        },
-        insert(prop: string) {
-            gridContext.insert(prop);
-        },
-
-        addColumn(name: string): void {
-            gridContext.addColumn(name);
-        },
-    };
-
-    createEffect(() => {
-        props.api?.(api);
-    });
-
-    return null;
-};
-
-const Head: Component<{ headers: string[] }> = (props) => {
-    const context = useSelection();
-
-    return <header class={css.header}>
-        <div class={css.cell}>
-            <input
-                type="checkbox"
-                checked={context.selection().length > 0 && context.selection().length === context.length()}
-                indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
-                on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
-            />
-        </div>
-
-        <For each={props.headers}>{
-            header => <span class={css.cell}>{header}</span>
-        }</For>
-    </header>;
-};
-
-const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
-    const grid = useGrid();
-
-    return <For each={Object.entries(props.entry)}>{
-        ([key, value]) => {
-            const values = Object.entries(value);
-            const path = [...(props.path ?? []), key];
-            const k = path.join('.');
-            const context = useSelection();
-
-            const isSelected = context.isSelected(k);
-
-            return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
-                <div class={css.row} use:selectable={{ value, key: k }}>
-                    <div class={css.cell}>
-                        <input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
-                    </div>
-
-                    <div class={css.cell}>
-                        <span style={{ '--depth': path.length - 1 }}>{key}</span>
-                    </div>
-
-                    <For each={values}>{
-                        ([lang, value]) => <div class={css.cell}>
-                            <TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
-                        </div>
-                    }</For>
-                </div>
-            </Show>;
-        }
-    }</For>
-};
-
-const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
-    return <details open>
-        <summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
-
-        <Row entry={props.entry} path={props.path} />
-    </details>;
-};
-
-const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
-    const [element, setElement] = createSignal<HTMLTextAreaElement>();
-
-    const resize = () => {
-        const el = element();
-
-        if (!el) {
-            return;
-        }
-
-        el.style.height = `1px`;
-        el.style.height = `${2 + element()!.scrollHeight}px`;
-    };
-
-    const mutate = debounce(() => {
-        props.oninput?.(new InputEvent('input', {
-            data: element()?.value.trim(),
-        }))
-    }, 300);
-
-    const onKeyUp = (e: KeyboardEvent) => {
-        resize();
-        mutate();
-    };
-
-    return <textarea
-        ref={setElement}
-        value={props.value}
-        lang={props.lang}
-        placeholder={`${props.key} in ${props.lang}`}
-        name={`${props.key}:${props.lang}`}
-        spellcheck={true}
-        wrap="soft"
-        onkeyup={onKeyUp}
-        on:keydown={e => e.stopPropagation()}
-        on:pointerdown={e => e.stopPropagation()}
-    />
-};
\ No newline at end of file
diff --git a/src/components/grid/grid.module.css b/src/components/grid/grid.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/grid/grid.tsx b/src/components/grid/grid.tsx
new file mode 100644
index 0000000..21beb73
--- /dev/null
+++ b/src/components/grid/grid.tsx
@@ -0,0 +1,129 @@
+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 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;
+}
+
+export interface GridApi<T extends Record<string, any>> extends TableApi<T> {
+    readonly mutations: Accessor<Mutation[]>;
+    remove(keys: string[]): void;
+    insert(prop: string): void;
+    addColumn(name: string): void;
+}
+
+interface GridContextType<T extends Record<string, any>> {
+    readonly rows: Accessor<T[]>;
+    readonly mutations: Accessor<Mutation[]>;
+    // readonly selection: Accessor<SelectionItem[]>;
+    mutate(prop: string, value: string): void;
+    remove(props: string[]): void;
+    insert(prop: string): void;
+    addColumn(name: string): void;
+}
+
+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 };
+
+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 }>({
+        rows: [],
+        columns: [],
+        snapshot: [],
+        numberOfRows: 0,
+    });
+
+    const mutations = createMemo(() => {
+        // enumerate all values to make sure the memo is recalculated on any change
+        Object.values(state.rows).map(entry => Object.values(entry));
+
+        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,
+
+        mutate(prop: string, value: string) {
+        },
+
+        remove(props: string[]) {
+        },
+
+        insert(prop: string) {
+        },
+
+        addColumn(id: keyof T): void {
+        },
+    };
+
+    const cellEditors = createMemo(() => Object.fromEntries(state.columns.filter(c => c.editor !== undefined).map(c => [c.id, c.editor!] as const)));
+
+    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}>{
+            cellEditors()
+        }</Table>
+    </GridContext.Provider>;
+};
+
+function Api<T extends Record<string, any>>(props: { api: undefined | ((api: GridApi<T>) => any), table?: TableApi<T> }) {
+    const gridContext = useGrid();
+
+    const api = createMemo<GridApi<T> | undefined>(() => {
+        const table = props.table;
+
+        if (!table) {
+            return;
+        }
+
+        return {
+            ...table,
+            mutations: gridContext.mutations,
+            remove(props: string[]) {
+                gridContext.remove(props);
+            },
+            insert(prop: string) {
+                gridContext.insert(prop);
+            },
+            addColumn(name: string): void {
+                gridContext.addColumn(name);
+            },
+        };
+    });
+
+    createEffect(() => {
+        const value = api();
+
+        if (value) {
+            props.api?.(value);
+        }
+    });
+
+    return null;
+};
\ No newline at end of file
diff --git a/src/components/grid/index.tsx b/src/components/grid/index.tsx
new file mode 100644
index 0000000..bca9921
--- /dev/null
+++ b/src/components/grid/index.tsx
@@ -0,0 +1,4 @@
+
+export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode } from '../table';
+export type { GridApi, Column } from './grid';
+export { Grid } from './grid';
\ No newline at end of file
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
index 2e4bba6..eaa7d79 100644
--- a/src/components/table/index.tsx
+++ b/src/components/table/index.tsx
@@ -1,5 +1,5 @@
 
-export type { Column } from './table';
+export type { Column, TableApi } from './table';
 export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
 export { SelectionMode, Table } from './table';
 export { createDataSet, toSorted, toGrouped } from './dataset';
\ No newline at end of file
diff --git a/src/components/table/table.module.css b/src/components/table/table.module.css
index 05867b6..0f08e7e 100644
--- a/src/components/table/table.module.css
+++ b/src/components/table/table.module.css
@@ -1,53 +1,59 @@
 .table {
     --shadow-color: oklch(0 0 0 / .05);
-    --shadow: var(--shadow-color) 0 .5em 2em;
+    --shadow: var(--shadow-color) 0 0 2em;
 
     position: relative;
     display: block grid;
     grid-template-columns: repeat(var(--columns), minmax(max-content, auto));
     align-content: start;
+    block-size: 100%;
     padding-inline: 1px;
     margin-inline: -1px;
     overflow: auto;
     background-color: inherit;
     isolation: isolate;
 
-    block-size: 100%;
-
-    & input[type="checkbox"] {
-        margin: .1em;
-    }
-
     & .cell {
         display: block grid;
+        align-items: center;
         padding: var(--padding-m);
         border: 1px solid transparent;
         border-radius: var(--radii-m);
         background: inherit;
         white-space: nowrap;
+    }
 
-        &:first-of-type {
-            position: sticky;
-            inset-inline-start: 1px;
-            padding-inline-start: calc(var(--depth) * 1em + var(--padding-m));
-            z-index: 1;
+    & :is(.cell:first-child, .checkbox + .cell) {
+        position: sticky;
+        inset-inline-start: 1px;
+        padding-inline-start: calc(var(--depth) * 1em + var(--padding-m));
+        z-index: 1;
 
-            &::after {
-                content: '';
-                position: absolute;
-                inset-inline-start: 100%;
-                inset-block-start: -2px;
-                display: block;
-                inline-size: 2em;
-                block-size: calc(3px + 100%);
-                animation: column-scroll-shadow linear both;
-                animation-timeline: scroll(inline);
-                animation-range: 0 2em;
-                pointer-events: none;
-            }
+        &::after {
+            content: '';
+            position: absolute;
+            inset-inline-start: 100%;
+            inset-block-start: -2px;
+            display: block;
+            inline-size: 2em;
+            block-size: calc(3px + 100%);
+            animation: column-scroll-shadow linear both;
+            animation-timeline: scroll(inline);
+            animation-range: 0 2em;
+            pointer-events: none;
         }
     }
 
+    & .checkbox {
+        display: grid;
+        place-items: center;
+        position: sticky;
+        inset-inline-start: 1px;
+        background: inherit;
+        padding: var(--padding-m);
+        z-index: 1;
+    }
+
     & :is(.header, .main, .footer) {
         grid-column: 1 / -1;
         display: block grid;
@@ -55,42 +61,6 @@
         background-color: inherit;
     }
 
-    & .header {
-        position: sticky;
-        inset-block-start: 0;
-        border-block-end: 1px solid var(--surface-300);
-        z-index: 2;
-        animation: header-scroll-shadow linear both;
-        animation-timeline: scroll();
-        animation-range: 0 2em;
-        font-weight: var(--weight-bold);
-
-        & > aside {
-            position: sticky;
-            inset-inline-start: 0;
-            background: inherit;
-            padding: var(--padding-m);
-            z-index: 1;
-        }
-
-        & > .cell {
-            grid-auto-flow: column;
-            justify-content: space-between;
-
-            & > svg {
-                transition: opacity .15s ease-in-out;
-            }
-
-            &:not(.sorted):not(:hover) > svg {
-                opacity: 0;
-            }
-        }
-    }
-
-    & .main {
-        background-color: inherit;
-    }
-
     & .row {
         --alpha: 0;
         grid-column: 1 / -1;
@@ -100,11 +70,7 @@
         background-color: inherit;
         background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));
 
-        /* & > :is(.cell, aside) {
-            background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));
-        } */
-
-        &:has(> aside > :checked) {
+        &:has(> .checkbox > :checked) {
             --alpha: .1;
             border-color: var(--info);
 
@@ -112,13 +78,11 @@
                 font-variation-settings: 'GRAD' 1000;
             }
 
-            /* Remove the top border when directly preceded by a selected row */
-            & + :has(> aside > :checked) {
+            & + :has(> .checkbox > :checked) {
                 border-block-start-color: transparent;
             }
 
-            /* Remove the top border when directly succeeded by a selected row */
-            &:has(+ .row > aside > :checked) {
+            &:has(+ .row > .checkbox > :checked) {
                 border-block-end-color: transparent;
             }
         }
@@ -126,16 +90,52 @@
         &:hover {
             --alpha: .2 !important;
         }
+    }
 
-        & > aside {
-            position: sticky;
-            inset-inline-start: 1px;
-            background: inherit;
-            padding: var(--padding-m);
-            z-index: 1;
+    & .header {
+        position: sticky;
+        inset-block-start: 0;
+        border-block-end: 1px solid var(--surface-300);
+        z-index: 2;
+        animation: header-scroll-shadow linear both;
+        animation-timeline: scroll();
+        animation-range: 0 2em;
+        font-weight: var(--weight-bold);
+
+        & > tr {
+            all: inherit;
+            display: contents;
+
+            & > .cell {
+                grid-auto-flow: column;
+                justify-content: space-between;
+
+                & > svg {
+                    transition: opacity .15s ease-in-out;
+                }
+
+                &:not(.sorted):not(:hover) > svg {
+                    opacity: 0;
+                }
+            }
         }
     }
 
+    & .main {
+        background-color: inherit;
+    }
+
+    & .footer {
+        position: sticky;
+        inset-block-end: 0;
+        border-block-start: 1px solid var(--surface-300);
+        z-index: 2;
+        animation: header-scroll-shadow linear both reverse;
+        animation-timeline: scroll();
+        animation-range: calc(100% - 2em) 100%;
+        font-weight: var(--weight-bold);
+    }
+
     & details {
         display: contents;
         background-color: inherit;
@@ -177,9 +177,8 @@
     &.selectable {
         grid-template-columns: 2em repeat(var(--columns), minmax(max-content, auto));
 
-        & .cell:first-of-type {
+        & :is(.cell:first-child, .checkbox + .cell) {
             inset-inline-start: 2em;
-            /* inset-inline-start: calc(2em + var(--padding-m) * var(--depth)); */
         }
 
         & details > summary {
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 6191294..76ee0bb 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,9 +1,9 @@
 import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
 import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
 import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
-import css from './table.module.css';
 import { createStore } from "solid-js/store";
 import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
+import css from './table.module.css';
 
 selectable
 
@@ -11,10 +11,12 @@ export type Column<T> = {
     id: keyof T,
     label: string,
     sortable?: boolean,
+    group?: string,
     readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
 };
 
 type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
+export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element };
 
 export interface TableApi<T extends Record<string, any>> {
     readonly selection: Accessor<SelectionItem<T>[]>;
@@ -31,7 +33,7 @@ const TableContext = createContext<{
     readonly selectionMode: Accessor<SelectionMode>,
     readonly groupBy: Accessor<string | undefined>,
     readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
-    readonly cellRenderers: Accessor<Record<string, (cell: { key: string, value: any }) => JSX.Element>>,
+    readonly cellRenderers: Accessor<CellEditors<any>>,
 
     setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
 }>();
@@ -50,6 +52,7 @@ export enum SelectionMode {
 }
 type TableProps<T extends Record<string, any>> = {
     class?: string,
+    summary?: string,
     rows: T[],
     columns: Column<T>[],
     groupBy?: keyof T,
@@ -58,7 +61,7 @@ type TableProps<T extends Record<string, any>> = {
         reversed?: boolean,
     },
     selectionMode?: SelectionMode,
-    children?: { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element },
+    children?: CellEditors<T>,
     api?: (api: TableApi<T>) => any,
 };
 
@@ -76,7 +79,7 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
     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(() => props.children ?? {});
+    const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});
 
     const context = {
         rows,
@@ -96,12 +99,12 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
         <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
             <Api api={props.api} />
 
-            <InnerTable class={props.class} rows={rows()} />
+            <InnerTable class={props.class} summary={props.summary} rows={rows()} />
         </SelectionProvider>
     </TableContext.Provider>;
 };
 
-type InnerTableProps<T extends Record<string, any>> = { class?: string, rows: T[] };
+type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: T[] };
 
 function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
     const table = useTable();
@@ -126,16 +129,28 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
         return dataset;
     });
 
-    return <section class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
+    return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
+        <Show when={props.summary}>{
+            summary => <caption>{summary()}</caption>
+        }</Show>
+
+        <Groups />
         <Head />
 
-        <main class={css.main}>
+        <tbody class={css.main}>
             <For each={nodes()}>{
                 node => <Node node={node} depth={0} />
             }</For>
+        </tbody>
 
-        </main>
-    </section>
+        {/* <Show when={true}>
+            <tfoot class={css.footer}>
+                <tr>
+                    <td colSpan={columnCount()}>FOOTER</td>
+                </tr>
+            </tfoot>
+        </Show> */}
+    </table>
 };
 
 function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
@@ -163,57 +178,71 @@ function Api<T extends Record<string, any>>(props: { api: undefined | ((api: Tab
     return null;
 };
 
-function Head<T extends Record<string, any>>(props: {}) {
+function Groups(props: {}) {
+    const table = useTable();
+
+    const groups = createMemo(() => {
+        return new Set(table.columns().map(c => c.group).filter(g => g !== undefined)).values().toArray();
+    });
+
+    return <For each={groups()}>{
+        group => <colgroup span="1" data-group-name={group} />
+    }</For>
+}
+
+function Head(props: {}) {
     const table = useTable();
     const context = useSelection();
 
-    return <header class={css.header}>
-        <Show when={table.selectionMode() !== SelectionMode.None}>
-            <aside>
-                <input
-                    type="checkbox"
-                    checked={context.selection().length > 0 && context.selection().length === context.length()}
-                    indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
-                    on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
-                />
-            </aside>
-        </Show>
+    return <thead class={css.header}>
+        <tr>
+            <Show when={table.selectionMode() !== SelectionMode.None}>
+                <th class={css.checkbox}>
+                    <input
+                        type="checkbox"
+                        checked={context.selection().length > 0 && context.selection().length === context.length()}
+                        indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
+                        on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
+                    />
+                </th>
+            </Show>
 
-        <For each={table.columns()}>{
-            ({ id, label, sortable }) => {
-                const sort = createMemo(() => table.sort());
-                const by = String(id);
+            <For each={table.columns()}>{
+                ({ id, label, sortable }) => {
+                    const sort = createMemo(() => table.sort());
+                    const by = String(id);
 
-                const onPointerDown = (e: PointerEvent) => {
-                    if (sortable !== true) {
-                        return;
-                    }
-
-                    table.setSort(current => {
-                        if (current?.by !== by) {
-                            return { by, reversed: false };
+                    const onPointerDown = (e: PointerEvent) => {
+                        if (sortable !== true) {
+                            return;
                         }
 
-                        if (current.reversed === true) {
-                            return undefined;
-                        }
+                        table.setSort(current => {
+                            if (current?.by !== by) {
+                                return { by, reversed: false };
+                            }
 
-                        return { by, reversed: true };
-                    });
-                };
+                            if (current.reversed === true) {
+                                return undefined;
+                            }
 
-                return <span class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
-                    {label}
+                            return { by, reversed: true };
+                        });
+                    };
 
-                    <Switch>
-                        <Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
-                        <Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
-                        <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
-                    </Switch>
-                </span>;
-            }
-        }</For>
-    </header>;
+                    return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
+                        {label}
+
+                        <Switch>
+                            <Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
+                            <Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
+                            <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
+                        </Switch>
+                    </th>;
+                }
+            }</For>
+        </tr>
+    </thead>;
 };
 
 function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) {
@@ -235,17 +264,17 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
     const values = createMemo(() => Object.entries(props.value));
     const isSelected = context.isSelected(props.key);
 
-    return <div class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
+    return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
         <Show when={table.selectionMode() !== SelectionMode.None}>
-            <aside>
+            <th class={css.checkbox}>
                 <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
-            </aside>
+            </th>
         </Show>
 
         <For each={values()}>{
-            ([k, value]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ key: `${props.key}.${k}`, value }) ?? value}</div>
+            ([k, value]) => <td class={css.cell}>{table.cellRenderers()[k]?.({ value }) ?? value}</td>
         }</For>
-    </div>;
+    </tr>;
 };
 
 function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {
diff --git a/src/features/command/index.tsx b/src/features/command/index.tsx
index fae37c0..cd843d8 100644
--- a/src/features/command/index.tsx
+++ b/src/features/command/index.tsx
@@ -1,9 +1,9 @@
 import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
 
 interface CommandContextType {
-    set(commands: CommandType<any[]>[]): void;
-    addContextualArguments<T extends any[] = any[]>(command: CommandType<T>, target: EventTarget, args: Accessor<T>): void;
-    execute<TArgs extends any[] = []>(command: CommandType<TArgs>, event: Event): void;
+    set(commands: CommandType<any>[]): void;
+    addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void;
+    execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): void;
 }
 
 const CommandContext = createContext<CommandContextType>();
@@ -13,16 +13,16 @@ export const useCommands = () => useContext(CommandContext);
 const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
     // const commands = () => props.commands ?? [];
     const contextualArguments = new Map<CommandType, WeakMap<EventTarget, Accessor<any[]>>>();
-    const commands = new Set<CommandType<any[]>>();
+    const commands = new Set<CommandType<any>>();
 
     const context = {
-        set(c: CommandType<any[]>[]): void {
+        set(c: CommandType<any>[]): void {
             for (const command of c) {
                 commands.add(command);
             }
         },
 
-        addContextualArguments<T extends any[] = any[]>(command: CommandType<T>, target: EventTarget, args: Accessor<T>): void {
+        addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void {
             if (contextualArguments.has(command) === false) {
                 contextualArguments.set(command, new WeakMap());
             }
@@ -30,8 +30,8 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
             contextualArguments.get(command)?.set(target, args);
         },
 
-        execute<T extends any[] = any[]>(command: CommandType<T>, event: Event): boolean | undefined {
-            const args = ((): T => {
+        execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): boolean | undefined {
+            const args = ((): Parameters<T> => {
 
                 const contexts = contextualArguments.get(command);
 
@@ -45,7 +45,8 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
                     return [] as any;
                 }
 
-                const args = contexts.get(element)! as Accessor<T>;
+                const args = contexts.get(element)! as Accessor<Parameters<T>>;
+
                 return args();
             })();
 
@@ -84,9 +85,9 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
     </CommandContext.Provider>;
 };
 
-const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<any[]>[] }> = (props) => {
+const Add: Component<{ command: CommandType<any> } | { commands: CommandType<any>[] }> = (props) => {
     const context = useCommands();
-    const commands = createMemo<CommandType<any[]>[]>(() => props.commands ?? [props.command]);
+    const commands = createMemo<CommandType<any>[]>(() => props.commands ?? [props.command]);
 
     createEffect(() => {
         context?.set(commands());
@@ -95,7 +96,7 @@ const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<a
     return undefined;
 };
 
-const Context = <T extends any[] = any[]>(props: ParentProps<{ for: CommandType<T>, with: T }>): JSX.Element => {
+const Context = <T extends (...args: any[]) => any = any>(props: ParentProps<{ for: CommandType<T>, with: Parameters<T> }>): JSX.Element => {
     const resolved = children(() => props.children);
     const context = useCommands();
     const args = createMemo(() => props.with);
@@ -139,17 +140,19 @@ export enum Modifier {
     Alt = 1 << 3,
 }
 
-export interface CommandType<TArgs extends any[] = []> {
-    (...args: TArgs): any;
+export interface CommandType<T extends (...args: any[]) => any = any> {
+    (...args: Parameters<T>): Promise<ReturnType<T>>;
     label: string;
     shortcut?: {
         key: string;
         modifier: Modifier;
     };
+    withLabel(label: string): CommandType<T>;
+    with<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>>;
 }
 
-export const createCommand = <TArgs extends any[] = []>(label: string, command: (...args: TArgs) => any, shortcut?: CommandType['shortcut']): CommandType<TArgs> => {
-    return Object.defineProperties(command as CommandType<TArgs>, {
+export const createCommand = <T extends (...args: any[]) => any>(label: string, command: T, shortcut?: CommandType['shortcut']): CommandType<T> => {
+    return Object.defineProperties(((...args: Parameters<T>) => command(...args)) as any, {
         label: {
             value: label,
             configurable: false,
@@ -159,18 +162,24 @@ export const createCommand = <TArgs extends any[] = []>(label: string, command:
             value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined,
             configurable: false,
             writable: false,
+        },
+        withLabel: {
+            value(label: string) {
+                return createCommand(label, command, shortcut);
+            },
+            configurable: false,
+            writable: false,
+        },
+        with: {
+            value<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>> {
+                return createCommand(label, command.bind(undefined, ...args), shortcut);
+            },
+            configurable: false,
+            writable: false,
         }
     });
 };
 
-export const noop = Object.defineProperties(createCommand('noop', () => { }), {
-    withLabel: {
-        value(label: string) {
-            return createCommand(label, () => { });
-        },
-        configurable: false,
-        writable: false,
-    },
-}) as CommandType & { withLabel(label: string): CommandType };
+export const noop = createCommand('noop', () => { });
 
 export { Context } from './contextMenu';
\ No newline at end of file
diff --git a/src/features/file/grid.module.css b/src/features/file/grid.module.css
index 05c99e3..e69de29 100644
--- a/src/features/file/grid.module.css
+++ b/src/features/file/grid.module.css
@@ -1,128 +0,0 @@
-.table {
-    position: relative;
-    display: grid;
-    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
-    align-content: start;
-    padding-inline: 1px;
-    margin-inline: -1px;
-
-    block-size: 100%;
-    overflow: clip auto;
-
-    background-color: var(--surface-600);
-
-    & input[type="checkbox"] {
-        margin: .1em;
-    }
-
-    & textarea {
-        resize: vertical;
-        min-block-size: max(2em, 100%);
-        max-block-size: 50em;
-
-        background-color: var(--surface-600);
-        color: var(--text-1);
-        border-color: var(--text-2);
-        border-radius: var(--radii-s);
-
-        &:has(::spelling-error, ::grammar-error) {
-            border-color: var(--fail);
-        }
-
-        & ::spelling-error {
-            outline: 1px solid var(--fail);
-            text-decoration: yellow underline;
-        }
-    }
-
-    & .cell {
-        display: grid;
-        padding: .5em;
-        border: 1px solid transparent;
-        border-radius: var(--radii-m);
-
-        &:has(textarea:focus) {
-            border-color: var(--info);
-        }
-
-        & > span {
-            align-self: center;
-        }
-    }
-
-    & :is(.header, .main, .footer) {
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-    }
-
-    & .header {
-        position: sticky;
-        inset-block-start: 0;
-        background-color: var(--surface-600);
-        border-block-end: 1px solid var(--surface-300);
-    }
-
-    & .row {
-        --bg: var(--text);
-        --alpha: 0;
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-        border: 1px solid transparent;
-        background-color: color(from var(--bg) srgb r g b / var(--alpha));
-
-        &:has(> .cell > :checked) {
-            --bg: var(--info);
-            --alpha: .1;
-            border-color: var(--bg);
-
-            & span {
-                font-variation-settings: 'GRAD' 1000;
-            }
-
-            & + :has(> .cell> :checked) {
-                border-block-start-color: transparent;
-            }
-
-            &:has(+ .row > .cell > :checked) {
-                border-block-end-color: transparent;
-            }
-        }
-
-        &:hover {
-            --alpha: .2 !important;
-        }
-    }
-
-    & details {
-        display: contents;
-
-        &::details-content {
-            grid-column: span calc(2 + var(--columns));
-            display: grid;
-            grid-template-columns: subgrid;
-        }
-
-        &:not([open])::details-content {
-            display: none;
-        }
-
-        & > summary {
-            grid-column: 2 / span calc(1 + var(--columns));
-            padding: .5em;
-            padding-inline-start: calc(var(--depth) * 1em + .5em);
-
-        }
-
-        & > .row > .cell > span {
-            padding-inline-start: calc(var(--depth) * 1em);
-        }
-    }
-}
-
-@property --depth {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
-}
\ No newline at end of file
diff --git a/src/features/file/grid.tsx b/src/features/file/grid.tsx
index a15bac8..58a2b66 100644
--- a/src/features/file/grid.tsx
+++ b/src/features/file/grid.tsx
@@ -105,6 +105,10 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
         },
 
         addColumn(name: string): void {
+            if (state.columns.includes(name)) {
+                return;
+            }
+
             setState(produce(state => {
                 state.columns.push(name);
                 state.rows = Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, { ...row, [name]: '' }]));
@@ -155,7 +159,6 @@ const Api: Component<{ api: undefined | ((api: GridApi) => any), table?: any }>
             insert(prop: string) {
                 gridContext.insert(prop);
             },
-
             addColumn(name: string): void {
                 gridContext.addColumn(name);
             },
diff --git a/src/features/menu/index.tsx b/src/features/menu/index.tsx
index a5cb21b..4709e31 100644
--- a/src/features/menu/index.tsx
+++ b/src/features/menu/index.tsx
@@ -75,9 +75,9 @@ const useMenu = () => {
     return context;
 }
 
-type ItemProps = { label: string, children: JSX.Element } | { command: CommandType };
+type ItemProps<T extends (...args: any[]) => any> = { label: string, children: JSX.Element } | { command: CommandType<T> };
 
-const Item: Component<ItemProps> = (props) => {
+function Item<T extends (...args: any[]) => any>(props: ItemProps<T>) {
     const id = createUniqueId();
 
     if (props.command) {
@@ -303,7 +303,7 @@ function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
     createEffect(() => {
         const length = results().length - 1;
 
-        setSelected(current => current !== undefined ? Math.min(current, length) : undefined);
+        setSelected(current => Math.min(current, length));
     });
 
     const onKeyDown = (e: KeyboardEvent) => {
@@ -334,7 +334,7 @@ function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
     };
 
     return <form method="dialog" class={css.search} onkeydown={onKeyDown} onsubmit={onSubmit}>
-        <input id={`search-${id}`} ref={setInput} value={term()} oninput={(e) => setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" />
+        <input id={`search-${id}`} ref={setInput} value={term()} oninput={(e) => setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" enterkeyhint="go" />
 
         <output for={`search-${id}`}>
             <For each={results()}>{
diff --git a/src/global.d.ts b/src/global.d.ts
index 754ff79..41957d9 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -2,4 +2,12 @@
 
 interface FileSystemHandle {
     getUniqueId(): Promise<string>;
+}
+
+declare module "solid-js" {
+    namespace JSX {
+        interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+            indeterminate?: boolean;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental.tsx b/src/routes/(editor)/experimental.tsx
index 0291086..6c34fd9 100644
--- a/src/routes/(editor)/experimental.tsx
+++ b/src/routes/(editor)/experimental.tsx
@@ -1,119 +1,22 @@
-import { Column, GroupNode, RowNode, Node, SelectionMode, Table } from "~/components/table";
-import css from "./experimental.module.css";
-import { Sidebar } from "~/components/sidebar";
-import { createStore } from "solid-js/store";
-import { createEffect, For } from "solid-js";
-import { Person, people } from './experimental.data';
 
-export default function Experimental() {
-  const columns: Column<Person>[] = [
-    {
-      id: 'id',
-      label: '#',
-      groupBy(rows: RowNode<Person>[]) {
-        const group = (nodes: (RowNode<Person> & { _key: string })[]): Node<Person>[] => nodes.every(n => n._key.includes('.') === false)
-          ? nodes
-          : Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
-            .map<GroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
+import { ParentProps } from "solid-js";
+import { Menu } from "~/features/menu";
+import { createCommand } from "~/features/command";
+import { useNavigate } from "@solidjs/router";
 
-        return group(rows.map(row => ({ ...row, _key: row.value.id })));
-      },
-    },
-    {
-      id: 'name',
-      label: 'Name',
-      sortable: true,
-    },
-    {
-      id: 'email',
-      label: 'Email',
-      sortable: true,
-    },
-    {
-      id: 'address',
-      label: 'Address',
-      sortable: true,
-    },
-    {
-      id: 'currency',
-      label: 'Currency',
-      sortable: true,
-    },
-    {
-      id: 'phone',
-      label: 'Phone',
-      sortable: true,
-    },
-    {
-      id: 'country',
-      label: 'Country',
-      sortable: true,
-    },
-  ];
+export default function Experimental(props: ParentProps) {
+  const navigate = useNavigate();
 
-  const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Person, sort?: { by: keyof Person, reversed?: boolean } }>({
-    selectionMode: SelectionMode.None,
-    // groupBy: 'value',
-    // sortBy: 'key'
+  const goTo = createCommand('go to', (to: string) => {
+    navigate(`/experimental/${to}`);
   });
 
-  createEffect(() => {
-    console.log({ ...store });
-  });
+  return <>
+    <Menu.Root>
+      <Menu.Item command={goTo.withLabel('table').with('table')} />
+      <Menu.Item command={goTo.withLabel('grid').with('grid')} />
+    </Menu.Root>
 
-  return <div class={css.root}>
-    <Sidebar as="aside" label={'Filters'} class={css.sidebar}>
-      <fieldset>
-        <legend>table properties</legend>
-
-        <label>
-          Selection mode
-
-          <select value={store.selectionMode} oninput={e => setStore('selectionMode', Number.parseInt(e.target.value))}>
-            <option value={SelectionMode.None}>None</option>
-            <option value={SelectionMode.Single}>Single</option>
-            <option value={SelectionMode.Multiple}>Multiple</option>
-          </select>
-        </label>
-
-        <label>
-          Group by
-
-          <select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
-            <option value=''>None</option>
-            <For each={columns}>{
-              column => <option value={column.id}>{column.label}</option>
-            }</For>
-          </select>
-        </label>
-      </fieldset>
-
-      <fieldset>
-        <legend>table sorting</legend>
-
-        <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)}>
-            <option value=''>None</option>
-            <For each={columns}>{
-              column => <option value={column.id}>{column.label}</option>
-            }</For>
-          </select>
-        </label>
-
-        <label>
-          reversed
-
-          <input type="checkbox" checked={store.sort?.reversed ?? false} oninput={e => setStore('sort', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
-        </label>
-      </fieldset>
-    </Sidebar>
-
-    <div class={css.content}>
-      <Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
-        // email: (cell) => <input type="email" value={cell.value} />,
-      }}</Table>
-    </div>
-  </div >;
+    {props.children}
+  </>;
 }
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental.data.ts b/src/routes/(editor)/experimental/experimental.data.ts
similarity index 100%
rename from src/routes/(editor)/experimental.data.ts
rename to src/routes/(editor)/experimental/experimental.data.ts
diff --git a/src/routes/(editor)/experimental.module.css b/src/routes/(editor)/experimental/grid.module.css
similarity index 100%
rename from src/routes/(editor)/experimental.module.css
rename to src/routes/(editor)/experimental/grid.module.css
diff --git a/src/routes/(editor)/experimental/grid.tsx b/src/routes/(editor)/experimental/grid.tsx
new file mode 100644
index 0000000..05fac16
--- /dev/null
+++ b/src/routes/(editor)/experimental/grid.tsx
@@ -0,0 +1,67 @@
+import { Sidebar } from '~/components/sidebar';
+import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
+import { people, Person } from './experimental.data';
+import css from './grid.module.css';
+import { createMemo, createSignal } from 'solid-js';
+
+export default function GridExperiment() {
+    const columns: Column<Person>[] = [
+        {
+            id: 'id',
+            label: '#',
+            groupBy(rows: DataSetRowNode<Person>[]) {
+                const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<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) }))) }));
+
+                return group(rows.map(row => ({ ...row, _key: row.value.id })));
+            },
+        },
+        {
+            id: 'name',
+            label: 'Name',
+            sortable: true,
+        },
+        {
+            id: 'email',
+            label: 'Email',
+            sortable: true,
+            editor: ({ value }) => <input value={value} />,
+        },
+        {
+            id: 'address',
+            label: 'Address',
+            sortable: true,
+        },
+        {
+            id: 'currency',
+            label: 'Currency',
+            sortable: true,
+        },
+        {
+            id: 'phone',
+            label: 'Phone',
+            sortable: true,
+        },
+        {
+            id: 'country',
+            label: 'Country',
+            sortable: true,
+        },
+    ];
+
+    const [api, setApi] = createSignal<GridApi<Person>>();
+
+    const mutations = createMemo(() => api()?.mutations() ?? [])
+
+    return <div class={css.root}>
+        <Sidebar as="aside" label={'Mutations'} class={css.sidebar}>
+            {mutations().length}
+        </Sidebar>
+
+        <div class={css.content}>
+            <Grid api={setApi} rows={people} columns={columns} groupBy="country" />
+        </div>
+    </div >;
+}
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental/table.module.css b/src/routes/(editor)/experimental/table.module.css
new file mode 100644
index 0000000..40f3bde
--- /dev/null
+++ b/src/routes/(editor)/experimental/table.module.css
@@ -0,0 +1,36 @@
+.root {
+    display: grid;
+    grid: 100% / auto minmax(0, 1fr);
+    inline-size: 100%;
+    block-size: 100%;
+
+    & .sidebar {
+        z-index: 1;
+        padding: var(--padding-xl);
+        background-color: var(--surface-300);
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        & fieldset {
+            display: flex;
+            flex-flow: column;
+            gap: var(--padding-m);
+        }
+    }
+
+    & .content {
+        background-color: var(--surface-500);
+        border-top-left-radius: var(--radii-xl);
+
+        & > header {
+            padding-inline-start: var(--padding-l);
+        }
+
+        & .table {
+            border-radius: inherit;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental/table.tsx b/src/routes/(editor)/experimental/table.tsx
new file mode 100644
index 0000000..a7c81a3
--- /dev/null
+++ b/src/routes/(editor)/experimental/table.tsx
@@ -0,0 +1,114 @@
+import { Sidebar } from '~/components/sidebar';
+import css from './table.module.css';
+import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, SelectionMode, Table } from '~/components/table';
+import { createStore } from 'solid-js/store';
+import { Person, people } from './experimental.data';
+
+export default function TableExperiment() {
+    const columns: Column<Person>[] = [
+        {
+            id: 'id',
+            label: '#',
+            groupBy(rows: DataSetRowNode<Person>[]) {
+                const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<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) }))) }));
+
+                return group(rows.map(row => ({ ...row, _key: row.value.id })));
+            },
+        },
+        {
+            id: 'name',
+            label: 'Name',
+            sortable: true,
+        },
+        {
+            id: 'email',
+            label: 'Email',
+            sortable: true,
+        },
+        {
+            id: 'address',
+            label: 'Address',
+            sortable: true,
+        },
+        {
+            id: 'currency',
+            label: 'Currency',
+            sortable: true,
+        },
+        {
+            id: 'phone',
+            label: 'Phone',
+            sortable: true,
+        },
+        {
+            id: 'country',
+            label: 'Country',
+            sortable: true,
+        },
+    ];
+
+    const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Person, sort?: { by: keyof Person, reversed?: boolean } }>({
+        selectionMode: SelectionMode.None,
+        // groupBy: 'value',
+        // sortBy: 'key'
+    });
+
+    return <div class={css.root}>
+        <Sidebar as="aside" label={'Filters'} class={css.sidebar}>
+            <fieldset>
+                <legend>table properties</legend>
+
+                <label>
+                    Selection mode
+
+                    <select value={store.selectionMode} oninput={e => setStore('selectionMode', Number.parseInt(e.target.value))}>
+                        <option value={SelectionMode.None}>None</option>
+                        <option value={SelectionMode.Single}>Single</option>
+                        <option value={SelectionMode.Multiple}>Multiple</option>
+                    </select>
+                </label>
+
+                <label>
+                    Group by
+
+                    <select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
+                        <option value=''>None</option>
+                        <For each={columns}>{
+                            column => <option value={column.id}>{column.label}</option>
+                        }</For>
+                    </select>
+                </label>
+            </fieldset>
+
+            <fieldset>
+                <legend>table sorting</legend>
+
+                <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)}>
+                        <option value=''>None</option>
+                        <For each={columns}>{
+                            column => <option value={column.id}>{column.label}</option>
+                        }</For>
+                    </select>
+                </label>
+
+                <label>
+                    reversed
+
+                    <input type="checkbox" checked={store.sort?.reversed ?? false} oninput={e => setStore('sort', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
+                </label>
+            </fieldset>
+        </Sidebar>
+
+        <div class={css.content}>
+            <Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
+                // email: (cell) => <input type="email" value={cell.value} />,
+            }}</Table>
+        </div>
+    </div >;
+}
\ No newline at end of file
diff --git a/src/routes/editor.module.css b/src/routes/editor.module.css
index ceceb3f..df2e722 100644
--- a/src/routes/editor.module.css
+++ b/src/routes/editor.module.css
@@ -144,11 +144,6 @@
     }
 }
 
-/* ::view-transition-old(menu),
-::view-transition-new(menu) {
-    z-index: 1;
-} */
-
 ::view-transition-old(content) {
     animation-name: slide-left;
 }