.

src/components/filetree.tsx

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

src/components/grid/grid.tsx

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

src/components/grid/index.tsx

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

src/components/table/dataset.ts

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

src/components/table/index.tsx

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

src/components/table/table.tsx

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