Kaas

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);

src/components/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;
-}

src/components/grid.tsx

@@ -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()}
-    />
-};

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;
+};

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';

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';

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 {

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 }) {