.
This commit is contained in:
Chris Kruining
parent
b23db1d5a8
commit
1d88565773
17 changed files with 360 additions and 229 deletions
|
|
@ -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)
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -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';
|
||||
|
|
@ -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} />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue