.

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { Sidebar } from '~/components/sidebar';
 import css from './table.module.css';
-import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, SelectionMode, Table } from '~/components/table';
+import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, SelectionMode, Table } from '~/components/table';
 import { createStore } from 'solid-js/store';
 import { Person, people } from './experimental.data';
 
@@ -106,7 +106,7 @@ export default function TableExperiment() {
         </Sidebar>
 
         <div class={css.content}>
-            <Table class={css.table} rows={people} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
+            <Table class={css.table} rows={createDataSet(people)} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
                 // email: (cell) => <input type="email" value={cell.value} />,
             }}</Table>
         </div>