made tables more feature complete and started splitting of all the data handling to dataset.ts
This commit is contained in:
Chris Kruining
parent
17e49c23d8
commit
977670b9e0
7 changed files with 325 additions and 123 deletions
|
|
@ -1,114 +0,0 @@
|
|||
import { Component, createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
|
||||
import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
|
||||
import css from './table.module.css';
|
||||
|
||||
selectable
|
||||
|
||||
type Row<T> = { kind: 'row', key: string, value: T }
|
||||
type Group<T> = { kind: 'group', key: string, nodes: Node<T>[] };
|
||||
type Node<T> = Row<T> | Group<T>;
|
||||
|
||||
export function Table<T extends Record<string, any>>(props: { class?: string, rows: T[], selectable?: boolean }) {
|
||||
const [selection, setSelection] = createSignal<object[]>([]);
|
||||
const columns = createMemo(() => ['#', ...Object.keys(props.rows.at(0) ?? {})]);
|
||||
const selectable = createMemo(() => props.selectable ?? false);
|
||||
|
||||
return <>
|
||||
<SelectionProvider selection={setSelection} multiSelect>
|
||||
{/* <Api api={props.api} /> */}
|
||||
|
||||
<_Table class={props.class} columns={columns()} rows={props.rows} />
|
||||
</SelectionProvider>
|
||||
</>;
|
||||
};
|
||||
|
||||
type TableProps<T extends Record<string, any>> = { class?: string, columns: (keyof T)[], rows: T[] };
|
||||
|
||||
function _Table<T extends Record<string, any>>(props: TableProps<T>) {
|
||||
const columnCount = createMemo(() => props.columns.length - 1);
|
||||
const nodes = createMemo<Node<T>[]>(() => {
|
||||
const rows = Object.entries(props.rows).map<Row<T>>(([i, row]) => ({ kind: 'row', key: row['key'], value: row }));
|
||||
|
||||
const group = (nodes: Row<T>[]): Node<T>[] => nodes.every(n => n.key.includes('.') === false)
|
||||
? nodes
|
||||
: Object.entries(Object.groupBy(nodes, r => String(r.key).split('.').at(0)!))
|
||||
.map<Group<T>>(([key, nodes]) => ({ kind: 'group', key, nodes: group(nodes!.map(n => ({ ...n, key: n.key.slice(key.length + 1) }))) }));
|
||||
|
||||
const grouped = group(rows);
|
||||
|
||||
return grouped;
|
||||
});
|
||||
|
||||
return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
|
||||
<Head headers={props.columns} />
|
||||
|
||||
<main class={css.main}>
|
||||
<For each={nodes()}>{
|
||||
node => <Node node={node} depth={0} />
|
||||
}</For>
|
||||
|
||||
</main>
|
||||
</section>
|
||||
};
|
||||
|
||||
function Head<T extends Record<string, any>>(props: { headers: (keyof T)[] }) {
|
||||
const context = useSelection();
|
||||
|
||||
return <header class={css.header}>
|
||||
<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>
|
||||
|
||||
<For each={props.headers}>{
|
||||
header => <span class={css.cell}>{header.toString()}</span>
|
||||
}</For>
|
||||
</header>;
|
||||
};
|
||||
|
||||
function Node<T extends Record<string, any>>(props: { node: Node<T>, depth: number }) {
|
||||
return <Switch>
|
||||
<Match when={props.node.kind === 'row' ? props.node : undefined}>{
|
||||
row => <Row key={row().key} value={row().value} depth={props.depth} />
|
||||
}</Match>
|
||||
|
||||
<Match when={props.node.kind === 'group' ? props.node : undefined}>{
|
||||
group => <Group key={group().key} nodes={group().nodes} depth={props.depth} />
|
||||
}</Match>
|
||||
</Switch>;
|
||||
}
|
||||
|
||||
function Row<T extends Record<string, any>>(props: { key: string, value: T, depth: number }) {
|
||||
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 }}>
|
||||
<div class={css.cell}>
|
||||
<input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
|
||||
</div>
|
||||
|
||||
<div class={css.cell}>
|
||||
<span style={{ '--depth': props.depth }}>{props.key}</span>
|
||||
</div>
|
||||
|
||||
<For each={values()}>{
|
||||
([k, v]) => <div class={css.cell}>{v}</div>
|
||||
}</For>
|
||||
</div>;
|
||||
};
|
||||
|
||||
function Group<T extends Record<string, any>>(props: { key: string, nodes: Node<T>[], depth: number }) {
|
||||
return <details open>
|
||||
<summary style={{ '--depth': props.depth }}>{props.key}</summary>
|
||||
|
||||
<For each={props.nodes}>{
|
||||
node => <Node node={node} depth={props.depth + 1} />
|
||||
}</For>
|
||||
</details>;
|
||||
};
|
||||
27
src/components/table/dataset.ts
Normal file
27
src/components/table/dataset.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
|
||||
export type RowNode<T> = { kind: 'row', key: string, value: T }
|
||||
export type GroupNode<T> = { kind: 'group', key: string, groupedBy: keyof T, nodes: Node<T>[] };
|
||||
export type Node<T> = RowNode<T> | GroupNode<T>;
|
||||
|
||||
export type DataSet<T extends Record<string, any>> = Node<T>[];
|
||||
|
||||
export const createDataSet = <T extends Record<string, any>>(data: T[]): Node<T>[] => {
|
||||
return Object.entries(data).map<RowNode<T>>(([key, value]) => ({ kind: 'row', key, value }));
|
||||
};
|
||||
|
||||
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]));
|
||||
|
||||
if (sort.reversed) {
|
||||
sorted.reverse();
|
||||
}
|
||||
|
||||
return sorted;
|
||||
};
|
||||
|
||||
type GroupingFunction<T> = (nodes: RowNode<T>[]) => Node<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);
|
||||
5
src/components/table/index.tsx
Normal file
5
src/components/table/index.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
export type { Column } from './table';
|
||||
export type { DataSet, GroupNode, RowNode, Node } from './dataset';
|
||||
export { SelectionMode, Table } from './table';
|
||||
export { createDataSet, toSorted, toGrouped } from './dataset';
|
||||
|
|
@ -1,20 +1,24 @@
|
|||
.table {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
|
||||
grid-template-columns: repeat(var(--columns), minmax(0, auto));
|
||||
align-content: start;
|
||||
padding-inline: 1px;
|
||||
margin-inline: -1px;
|
||||
|
||||
block-size: 100%;
|
||||
|
||||
&.selectable {
|
||||
grid-template-columns: 2em repeat(calc(var(--columns) - 1), minmax(0, auto));
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
margin: .1em;
|
||||
}
|
||||
|
||||
& .cell {
|
||||
display: grid;
|
||||
padding: .5em;
|
||||
padding: var(--padding-m);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radii-m);
|
||||
|
||||
|
|
@ -89,14 +93,13 @@
|
|||
}
|
||||
|
||||
& > summary {
|
||||
grid-column: 2 / span calc(1 + var(--columns));
|
||||
padding: .5em;
|
||||
padding-inline-start: calc(var(--depth) * 1em + .5em);
|
||||
|
||||
}
|
||||
|
||||
& > .row > .cell > span {
|
||||
padding-inline-start: calc(var(--depth) * 1em);
|
||||
& > .row > .cell {
|
||||
padding-inline-start: calc(var(--depth) * 1em + var(--padding-m));
|
||||
}
|
||||
}
|
||||
}
|
||||
193
src/components/table/table.tsx
Normal file
193
src/components/table/table.tsx
Normal file
|
|
@ -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>;
|
||||
};
|
||||
|
|
@ -13,6 +13,12 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& fieldset {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: var(--padding-m);
|
||||
}
|
||||
}
|
||||
|
||||
& .content {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Table } from "~/components/table";
|
||||
import { Column, GroupNode, RowNode, Node, SelectionMode, Table } from "~/components/table";
|
||||
import css from "./experimental.module.css";
|
||||
import { Sidebar } from "~/components/sidebar";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { createEffect, For } from "solid-js";
|
||||
|
||||
export default function Experimental() {
|
||||
const rows = [
|
||||
|
|
@ -23,13 +25,93 @@ export default function Experimental() {
|
|||
{ key: 'key2.c.a', value: 70 },
|
||||
{ key: 'key2.c.b', value: 80 },
|
||||
{ key: 'key2.c.c', value: 90 },
|
||||
|
||||
{ key: 'aaaa', value: 200 },
|
||||
];
|
||||
|
||||
type Entry = typeof rows[0];
|
||||
const columns: Column<Entry>[] = [
|
||||
{
|
||||
id: 'key',
|
||||
label: 'Key',
|
||||
groupBy(rows: RowNode<Entry>[]) {
|
||||
const group = (nodes: (RowNode<Entry> & { _key: string })[]): Node<Entry>[] => nodes.every(n => n._key.includes('.') === false)
|
||||
? nodes
|
||||
: Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
|
||||
.map<GroupNode<Entry>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'key', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
|
||||
|
||||
return group(rows.map(row => ({ ...row, _key: row.value.key })));
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'value',
|
||||
label: 'Value',
|
||||
},
|
||||
];
|
||||
|
||||
const [store, setStore] = createStore<{ selectionMode: SelectionMode, groupBy?: keyof Entry, sort?: { by: keyof Entry, reversed?: boolean } }>({
|
||||
selectionMode: SelectionMode.None,
|
||||
// groupBy: 'value',
|
||||
// sortBy: 'key'
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
console.log({ ...store });
|
||||
});
|
||||
|
||||
return <div class={css.root}>
|
||||
<Sidebar as="aside" label={'Filters'} class={css.sidebar} />
|
||||
<Sidebar as="aside" label={'Filters'} class={css.sidebar}>
|
||||
<fieldset>
|
||||
<legend>table properties</legend>
|
||||
|
||||
<label>
|
||||
Selection mode
|
||||
|
||||
<select value={store.selectionMode} oninput={e => setStore('selectionMode', Number.parseInt(e.target.value))}>
|
||||
<option value={SelectionMode.None}>None</option>
|
||||
<option value={SelectionMode.Single}>Single</option>
|
||||
<option value={SelectionMode.Multiple}>Multiple</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Group by
|
||||
|
||||
<select value={store.groupBy ?? ''} oninput={e => setStore('groupBy', (e.target.value || undefined) as any)}>
|
||||
<option value=''>None</option>
|
||||
<For each={columns}>{
|
||||
column => <option value={column.id}>{column.label}</option>
|
||||
}</For>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>table sorting</legend>
|
||||
|
||||
<label>
|
||||
by
|
||||
|
||||
<select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Entry, reversed: prev?.reversed } : undefined)}>
|
||||
<option value=''>None</option>
|
||||
<For each={columns}>{
|
||||
column => <option value={column.id}>{column.label}</option>
|
||||
}</For>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
reversed
|
||||
|
||||
<input type="checkbox" checked={store.sort?.reversed ?? false} oninput={e => setStore('sort', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
|
||||
</label>
|
||||
</fieldset>
|
||||
</Sidebar>
|
||||
|
||||
<div class={css.content}>
|
||||
<Table rows={rows} />
|
||||
<Table rows={rows} columns={columns} groupBy={store.groupBy} sort={store.sort} selectionMode={store.selectionMode}>{{
|
||||
value: (cell) => <input type="number" value={cell.value} />,
|
||||
}}</Table>
|
||||
</div>
|
||||
</div >;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue