made tables more feature complete and started splitting of all the data handling to dataset.ts

src/components/table/table.tsx

@@ -0,0 +1,193 @@
+import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
+import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
+import { type RowNode, type GroupNode, type Node, createDataSet, toSorted, toGrouped } from './dataset';
+import css from './table.module.css';
+
+selectable
+
+export type Column<T> = {
+    id: keyof T,
+    label: string,
+    readonly groupBy?: (rows: RowNode<T>[]) => Node<T>[],
+};
+
+const TableContext = createContext<{
+    readonly columns: Accessor<Column<any>[]>,
+    readonly selectionMode: Accessor<SelectionMode>,
+    readonly groupBy: Accessor<string | undefined>,
+    readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
+    readonly cellRenderers: Accessor<Record<string, (cell: { value: any }) => JSX.Element>>,
+}>();
+
+const useTable = () => useContext(TableContext)!
+
+function defaultGroupingFunction<T>(groupBy: keyof T) {
+    return (nodes: RowNode<T>[]): Node<T>[] => Object.entries(Object.groupBy<any, RowNode<T>>(nodes, r => r.value[groupBy]))
+        .map<GroupNode<T>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! }));
+}
+
+export enum SelectionMode {
+    None,
+    Single,
+    Multiple
+}
+type TableProps<T extends Record<string, any>> = {
+    class?: string,
+    rows: T[],
+    columns: Column<T>[],
+    groupBy?: keyof T,
+    sort?: {
+        by: keyof T,
+        reversed?: boolean,
+    },
+    selectionMode?: SelectionMode,
+    children?: { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element },
+};
+
+export function Table<T extends Record<string, any>>(props: TableProps<T>) {
+    const [selection, setSelection] = createSignal<object[]>([]);
+    const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
+    const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
+    const groupBy = createMemo(() => props.groupBy as string | undefined);
+    const sort = createMemo(() => props.sort as any);
+    const cellRenderers = createMemo(() => props.children ?? {});
+
+    return <TableContext.Provider value={{ columns, selectionMode, groupBy, sort, cellRenderers }}>
+        <SelectionProvider selection={setSelection} multiSelect>
+            <InnerTable class={props.class} rows={props.rows} />
+        </SelectionProvider>
+    </TableContext.Provider>;
+};
+
+type InnerTableProps<T extends Record<string, any>> = { class?: string, rows: T[] };
+
+function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
+    const table = useTable();
+
+    const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
+    const columnCount = createMemo(() => table.columns().length + (selectable() ? 0 : -1));
+    const nodes = createMemo<Node<T>[]>(() => {
+        const columns = table.columns();
+        const groupBy = table.groupBy();
+        const sort = table.sort();
+
+        let kaas = createDataSet(props.rows);
+
+        if (sort) {
+            kaas = toSorted(kaas, { by: sort.by, reversed: sort.reversed ?? false, with: (a, b) => a < b ? -1 : a > b ? 1 : 0 })
+        }
+
+        if (groupBy) {
+            kaas = toGrouped(kaas, { by: groupBy, with: columns.find(({ id }) => id === groupBy)?.groupBy ?? defaultGroupingFunction(groupBy) });
+        }
+
+        console.log(kaas);
+
+        const rows = props.rows;
+
+        if (sort) {
+            rows.sort((a, b) => a[sort.by] < b[sort.by] ? -1 : a[sort.by] > b[sort.by] ? 1 : 0);
+
+            if (sort.reversed === true) {
+                rows.reverse();
+            }
+        }
+
+        const nodes = Object.entries(rows).map<RowNode<T>>(([i, row]) => ({ kind: 'row', key: i, value: row }));
+
+        if (groupBy === undefined) {
+            return nodes;
+        }
+
+        const groupingFunction = columns.find(({ id }) => id === groupBy)?.groupBy ?? defaultGroupingFunction(groupBy);
+
+        return groupingFunction(nodes);
+    });
+
+
+
+    return <section class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
+        <Head />
+
+        <main class={css.main}>
+            <For each={nodes()}>{
+                node => <Node node={node} depth={0} />
+            }</For>
+
+        </main>
+    </section>
+};
+
+function Head<T extends Record<string, any>>(props: {}) {
+    const table = useTable();
+    const context = useSelection();
+
+    return <header class={css.header}>
+        <Show when={table.selectionMode() !== SelectionMode.None}>
+            <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>
+        </Show>
+
+        <For each={table.columns()}>{
+            column => <span class={css.cell}>{column.label}</span>
+        }</For>
+    </header>;
+};
+
+function Node<T extends Record<string, any>>(props: { node: Node<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>;
+}
+
+function Row<T extends Record<string, any>>(props: { key: string, value: T, depth: number, groupedBy?: keyof T }) {
+    const table = useTable();
+    const context = useSelection();
+
+    const values = createMemo(() => Object.entries(props.value));
+    const isSelected = context.isSelected(props.key);
+
+    return <div class={css.row} use:selectable={{ value: props.value, key: props.key }}>
+        <Show when={table.selectionMode() !== SelectionMode.None}>
+            <div class={css.cell}>
+                <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
+            </div>
+        </Show>
+
+        <For each={values()}>{
+            ([k, v]) => <div style={k === props.groupedBy ? { '--depth': props.depth } : {}} class={css.cell}>{table.cellRenderers()[k]?.({ value: v }) ?? v}</div>
+        }</For>
+    </div>;
+};
+
+function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: Node<T>[], depth: number }) {
+    const table = useTable();
+
+    const gridColumn = createMemo(() => {
+        const groupedBy = props.groupedBy;
+        const columns = table.columns();
+        const selectable = table.selectionMode() !== SelectionMode.None;
+
+        return columns.findIndex(({ id }) => id === groupedBy) + (selectable ? 2 : 1);
+    });
+
+    return <details open>
+        <summary style={{ '--depth': props.depth, 'grid-column-start': gridColumn() }}>{props.key}</summary>
+
+        <For each={props.nodes}>{
+            node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />
+        }</For>
+    </details>;
+};