diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index bb035bd..20b533b 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -12,12 +12,17 @@ export type Column<T> = {
     sortable?: boolean,
     group?: string,
     readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
+    readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
 };
 
+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 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<keyof T, T>[]>;
+    readonly rows: Accessor<DataSet<T>>;
     readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
     readonly rows: Accessor<DataSet<T>>;
     readonly columns: Accessor<Column<T>[]>;
@@ -25,6 +30,10 @@ export interface TableApi<T extends Record<string, any>> {
     clear(): void;
 }
 
+interface TableContextType<T extends Record<string, any>> {
+    readonly rows: Accessor<DataSet<T>>,
+    readonly columns: Accessor<Column<T>[]>,
+    readonly selection: Accessor<SelectionItem<keyof T, T>[]>,
 interface TableContextType<T extends Record<string, any>> {
     readonly rows: Accessor<DataSet<T>>,
     readonly columns: Accessor<Column<T>[]>,
@@ -46,6 +55,7 @@ type TableProps<T extends Record<string, any>> = {
     class?: string,
     summary?: string,
     rows: DataSet<T>,
+    rows: DataSet<T>,
     columns: Column<T>[],
     selectionMode?: SelectionMode,
     children?: CellEditors<T>,
@@ -55,18 +65,20 @@ type TableProps<T extends Record<string, any>> = {
 export function Table<T extends Record<string, any>>(props: TableProps<T>) {
     const [selection, setSelection] = createSignal<SelectionItem<keyof T, T>[]>([]);
 
+    const rows = createMemo(() => props.rows);
     const rows = createMemo(() => props.rows);
     const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
     const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
     const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});
 
     const context: TableContextType<T> = {
-        rows,
-        columns,
-        selection,
-        selectionMode,
-        cellRenderers,
-    };
+        const context: TableContextType<T> = {
+            rows,
+            columns,
+            selection,
+            selectionMode,
+            cellRenderers,
+        };
 
     return <TableContext.Provider value={context}>
         <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
@@ -77,10 +89,12 @@ 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: DataSet<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<T>();
+    const table = useTable<T>();
 
     const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
     const columnCount = createMemo(() => table.columns().length);
@@ -95,8 +109,9 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
 
         <tbody class={css.main}>
             <For each={props.rows.value()}>{
-                node => <Node node={node} depth={0} />
-            }</For>
+                <For each={props.rows.value()}>{
+                    node => <Node node={node} depth={0} />
+                }</For>
         </tbody>
 
         {/* <Show when={true}>
@@ -112,8 +127,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<T>();
     const selectionContext = useSelection<T>();
+    const table = useTable<T>();
+    const selectionContext = useSelection<T>();
 
     const api: TableApi<T> = {
+        selection: selectionContext.selection,
         selection: selectionContext.selection,
         rows: table.rows,
         columns: table.columns,
@@ -163,6 +181,7 @@ function Head(props: {}) {
 
             <For each={table.columns()}>{
                 ({ id, label, sortable }) => {
+                    const sort = createMemo(() => table.rows().sort());
                     const sort = createMemo(() => table.rows().sort());
                     const by = String(id);
 
@@ -200,45 +219,53 @@ function Head(props: {}) {
 };
 
 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} />
-        }</Match>
+    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} />
+            }</Match>
 
-        <Match when={props.node.kind === 'group' ? props.node : undefined}>{
-            group => <Group key={group().key} groupedBy={group().groupedBy} nodes={group().nodes} depth={props.depth} />
-        }</Match>
-    </Switch>;
-}
+            <Match when={props.node.kind === 'group' ? props.node : undefined}>{
+                group => <Group key={group().key} groupedBy={group().groupedBy} nodes={group().nodes} depth={props.depth} />
+            }</Match>
+        </Switch>;
+    }
 
-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;
+    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 isSelected = context.isSelected(props.key);
+        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;
 
-    return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
-        <Show when={table.selectionMode() !== SelectionMode.None}>
-            <th class={css.checkbox}>
-                <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
-            </th>
-        </Show>
+            const isSelected = context.isSelected(props.key);
 
-        <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>;
-};
+            return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
+                <Show when={table.selectionMode() !== SelectionMode.None}>
+                    <th class={css.checkbox}>
+                        <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
+                    </th>
+                </Show>
 
-function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
-    const table = useTable();
+                <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>;
+        };
 
-    return <details open>
-        <summary style={{ '--depth': props.depth }}>{String(props.key)}</summary>
+        function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, 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();
 
-        <For each={props.nodes}>{
-            node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />
-        }</For>
-    </details>;
-};
\ No newline at end of file
+                return <details open>
+                    <summary style={{ '--depth': props.depth }}>{String(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} />
+                    }</For>
+                </details>;
+            };
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental/table.tsx b/src/routes/(editor)/experimental/table.tsx
index e36c89e..ba4acf8 100644
--- a/src/routes/(editor)/experimental/table.tsx
+++ b/src/routes/(editor)/experimental/table.tsx
@@ -2,8 +2,8 @@ import { Sidebar } from '~/components/sidebar';
 import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, GroupOptions, SelectionMode, SortOptions, Table } from '~/components/table';
 import { createStore } from 'solid-js/store';
 import { Person, people } from './experimental.data';
-import css from './table.module.css';
 import { createEffect, createMemo, For } from 'solid-js';
+import css from './table.module.css';
 
 export default function TableExperiment() {
     const columns: Column<Person>[] = [