finished refactoring. all the code is now way more clearly seperated and reusable

src/components/table/dataset.ts

@@ -1,5 +1,5 @@
 import { Accessor, createEffect, createMemo } from "solid-js";
-import { createStore, NotWrappable, StoreSetter, unwrap } from "solid-js/store";
+import { createStore, NotWrappable, produce, StoreSetter, unwrap } from "solid-js/store";
 import { CustomPartial } from "solid-js/store/types/store.js";
 import { deepCopy, deepDiff, Mutation } from "~/utilities";
 
@@ -38,13 +38,14 @@ export type Setter<T> =
 
 export interface DataSet<T extends Record<string, any>> {
     data: T[];
-    value: Accessor<DataSetNode<keyof T, T>[]>;
+    nodes: Accessor<DataSetNode<keyof T, T>[]>;
+    value: Accessor<(T | undefined)[]>;
     mutations: Accessor<Mutation[]>;
     sorting: Accessor<SortOptions<T> | undefined>;
     grouping: Accessor<GroupOptions<T> | undefined>;
 
-    // mutate<K extends keyof T>(index: number, value: T): void;
     mutate<K extends keyof T>(index: number, prop: K, value: T[K]): void;
+    mutateEach(setter: (value: T) => T): void;
     remove(indices: number[]): void;
     insert(item: T, at?: number): void;
 
@@ -59,15 +60,14 @@ function defaultGroupingFunction<T>(groupBy: keyof T): GroupingFunction<number,
 }
 
 export const createDataSet = <T extends Record<string, any>>(data: T[], initialOptions?: { sort?: SortOptions<T>, group?: GroupOptions<T> }): DataSet<T> => {
-    const nodes = data;
     const [state, setState] = createStore<DataSetState<T>>({
-        value: deepCopy(nodes),
-        snapshot: nodes,
+        value: deepCopy(data),
+        snapshot: data,
         sorting: initialOptions?.sort,
         grouping: initialOptions?.group,
     });
 
-    const value = createMemo(() => {
+    const nodes = createMemo(() => {
         const sorting = state.sorting;
         const grouping = state.grouping;
 
@@ -106,7 +106,8 @@ export const createDataSet = <T extends Record<string, any>>(data: T[], initialO
 
     const set: DataSet<T> = {
         data,
-        value,
+        nodes,
+        value: createMemo(() => state.value),
         mutations,
         sorting,
         grouping,
@@ -115,6 +116,10 @@ export const createDataSet = <T extends Record<string, any>>(data: T[], initialO
             setState('value', index, prop as any, value);
         },
 
+        mutateEach(setter) {
+            setState('value', value => value.map(i => i === undefined ? undefined : setter(i)));
+        },
+
         remove(indices) {
             setState('value', value => value.map((item, i) => indices.includes(i) ? undefined : item));
         },

src/components/table/table.module.css

@@ -163,6 +163,7 @@
 
                 & > .header {
                     border-block-end-color: transparent;
+                    animation: none;
 
                     & .cell {
                         justify-content: start;
@@ -171,6 +172,7 @@
                         & > label {
                             --state: 0;
                             display: contents;
+                            cursor: pointer;
 
                             & input[type="checkbox"] {
                                 display: none;
@@ -181,6 +183,7 @@
                                 transition: rotate .3s ease-in-out;
                                 inline-size: 1em;
                                 aspect-ratio: 1;
+                                opacity: 1 !important;
                             }
 
                             &:has(input:not(:checked)) {

src/components/table/table.tsx

@@ -6,17 +6,18 @@ import css from './table.module.css';
 
 selectable;
 
-export type Column<T> = {
+export type CellRenderer<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
+export type CellRenderers<T extends Record<string, any>> = { [K in keyof T]?: CellRenderer<T, K> };
+
+export interface Column<T extends Record<string, any>> {
     id: keyof T,
     label: string,
     sortable?: boolean,
     group?: string,
+    renderer?: CellRenderer<T, keyof T>,
     readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
 };
 
-export type CellRenderer<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
-export type CellRenderers<T extends Record<string, any>> = { [K in keyof T]?: CellRenderer<T, K> };
-
 export interface TableApi<T extends Record<string, any>> {
     readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
     readonly rows: Accessor<DataSet<T>>;
@@ -96,7 +97,7 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
         <Head />
 
         <tbody class={css.main}>
-            <For each={props.rows.value()}>{
+            <For each={props.rows.nodes()}>{
                 node => <Node node={node} depth={0} />
             }</For>
         </tbody>