intable 0.0.7 → 0.0.9

package/dist/plugins/CommandPlugin.js

@@ -0,0 +1,31 @@
+import { createComponent } from "solid-js/web";
+import { createMemo, getOwner, runWithOwner } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+import { createEventListener } from "@solid-primitives/event-listener";
+import { createKeybindingsHandler } from "tinykeys";
+const CommandPlugin = {
+	name: "command",
+	priority: Infinity,
+	store: (e) => {
+		let a = getOwner(), o = createMemo(() => e.plugins.reduce((n, r) => Object.assign(n, runWithOwner(a, () => r.commands?.(e, { ...n }))), {}));
+		return { get commands() {
+			return o();
+		} };
+	},
+	rewriteProps: { Table: ({ Table: s }, { store: c }) => (l) => {
+		let u = getOwner(), d = createMemo(() => {
+			let e = {};
+			for (let n of c.plugins) {
+				let r = runWithOwner(u, () => n.keybindings?.(c));
+				r && Object.assign(e, r);
+			}
+			let n = c.props?.keybindings;
+			if (n) for (let [r, i] of Object.entries(n)) i === !1 ? delete e[r] : typeof i == "function" && (e[r] = i);
+			return createKeybindingsHandler(Object.fromEntries(Object.entries(e).map(([e, n]) => [e, (e) => {
+				e.preventDefault(), n(e);
+			}])));
+		});
+		return createEventListener(() => c.scroll_el, "keydown", (e) => d()(e)), l = combineProps({ tabindex: -1 }, l), createComponent(s, l);
+	} }
+};
+export { CommandPlugin };

package/dist/plugins/CopyPastePlugin.d.ts

@@ -0,0 +1,14 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+    }
+    interface TableStore {
+    }
+    interface Plugin {
+    }
+    interface Commands {
+        copy: () => void;
+        paste: () => void;
+    }
+}
+export declare const ClipboardPlugin: Plugin;

package/dist/plugins/CopyPastePlugin.js

@@ -0,0 +1,47 @@
+import { createEffect } from "solid-js";
+const ClipboardPlugin = {
+	name: "clipboard",
+	keybindings: (e) => ({
+		"$mod+c": () => {
+			e.commands.copy(), e.scroll_el?.classList.add("copied");
+		},
+		"$mod+v": () => e.commands.paste()
+	}),
+	onMount: (t) => {
+		createEffect(() => {
+			JSON.stringify(t.selected), t.scroll_el?.classList.remove("copied");
+		});
+	},
+	menus: (e) => [],
+	commands: (e) => ({
+		copy: () => {
+			let { start: t, end: n } = e.selected;
+			if (!t?.length) return;
+			let [r, i] = [t[0], n[0]].sort((e, t) => e - t), [a, o] = [t[1], n[1]].sort((e, t) => e - t), s = e.props.columns.slice(r, i + 1).filter((t) => !t[e.internal]), c = e.props.data.slice(a, o + 1).map((e) => s.map((t) => {
+				let n = e[t.id] ?? "";
+				return String(n).replace(/[\t\r\n]/g, " ");
+			}).join("	")).join("\n");
+			navigator.clipboard.writeText(c);
+		},
+		paste: async () => {
+			let { start: t, end: n } = e.selected;
+			if (!t?.length) return;
+			let r = (await navigator.clipboard.readText()).replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\n$/, "").split("\n").map((e) => e.split("	")), i = r.length, a = r[0].length, [o, s] = [t[0], n[0]].sort((e, t) => e - t), [c, l] = [t[1], n[1]].sort((e, t) => e - t), u = l - c + 1, d = s - o + 1, f = u > i && u % i === 0 ? u : i, p = d > a && d % a === 0 ? d : a, m = e.props.columns, h = [];
+			for (let t = o; t < m.length && h.length < p; t++) m[t][e.internal] || h.push(m[t]);
+			let g = e.props.data.slice(), _ = Math.min(c + f - 1, g.length - 1);
+			for (let e = 0; e <= _ - c; e++) {
+				let t = {};
+				h.forEach((n, o) => {
+					t[n.id] = r[e % i][o % a];
+				}), g[c + e] = {
+					...g[c + e],
+					...t
+				};
+			}
+			let v = o, y = 0;
+			for (let t = o; t < m.length && y < h.length; t++) m[t][e.internal] || (v = t, y++);
+			e.selected.end = [v, _], e.props.onDataChange?.(g);
+		}
+	})
+};
+export { ClipboardPlugin };

package/dist/plugins/DiffPlugin.d.ts

@@ -0,0 +1,29 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        diff?: {
+            /** @default false */
+            enable?: boolean;
+            data?: any[];
+            /** @default true */
+            added?: boolean;
+            /** @default true */
+            removed?: boolean;
+            /** @default true */
+            changed?: boolean;
+            onCommit?: (data: any, opt: {
+                added: any[];
+                removed: any[];
+                changed: any[];
+            }) => any;
+        };
+    }
+    interface TableStore {
+        diffData: any[];
+        diffDataKeyed: () => any;
+    }
+    interface Commands {
+        diffCommit(data?: any[]): void;
+    }
+}
+export declare const DiffPlugin: Plugin;

package/dist/plugins/DiffPlugin.js

@@ -0,0 +1,66 @@
+import { createComponent } from "solid-js/web";
+import { unwrap } from "solid-js/store";
+import { combineProps } from "@solid-primitives/props";
+import { createLazyMemo } from "@solid-primitives/memo";
+import { isEqual, keyBy } from "es-toolkit";
+import { v4 } from "uuid";
+import { diffArrays } from "diff";
+var DEL = Symbol("del"), NEW = Symbol("new");
+const DiffPlugin = {
+	priority: Infinity,
+	store: (e) => {
+		let a = e.rawProps.data || [];
+		return a.forEach((a) => unwrap(a)[e.rawProps.rowKey] ??= v4()), {
+			diffData: structuredClone(unwrap(a || [])),
+			diffData2: () => e.props.diff?.data ?? e.diffData,
+			diffDataKeyed: createLazyMemo(() => keyBy(e.diffData2(), (i) => i[e.props.rowKey]))
+		};
+	},
+	commands: (e) => ({ async diffCommit(a = e.rawProps.data || []) {
+		let { rowKey: o } = e.props || {};
+		a.forEach((e) => unwrap(e)[o] ??= v4()), a = structuredClone(unwrap(a));
+		let c = [], l = [], u = [], d = keyBy(a, (e) => e[o]);
+		for (let i of a) {
+			let a = e.diffDataKeyed()[i[o]];
+			a ? isEqual(i, a) || u.push(i) : c.push(i);
+		}
+		for (let i of e.diffData2()) !d[i[o]] && l.push(i);
+		await e.props.diff?.onCommit?.(a, {
+			added: c,
+			removed: l,
+			changed: u
+		}), c[NEW] = 0, e.diffData = a;
+	} }),
+	rewriteProps: {
+		diff: ({ diff: e }) => ({
+			enable: !1,
+			added: !0,
+			removed: !0,
+			changed: !0,
+			...e
+		}),
+		data: ({ data: e }, { store: i }) => {
+			if (!i.props.diff?.enable) return e;
+			let { rowKey: a, diff: o } = i.props || {}, s = i.diffData2() || [];
+			if (e.length === s.length && e.length > 0) {
+				let i = !0;
+				for (let o = 0; o < e.length; o++) if (e[o]?.[a] !== s[o]?.[a]) {
+					i = !1;
+					break;
+				}
+				if (i) return e;
+			}
+			return diffArrays(s, e, { comparator: (e, i) => e[a] == i[a] }).flatMap((e) => e.added ? e.value.map((e) => (e[NEW] = 1, e)) : e.removed ? o.removed ? e.value.map((e) => ({
+				...e,
+				[DEL]: 1,
+				[i.internal]: 1
+			})) : [] : e.value);
+		},
+		Td: ({ Td: i }, { store: o }) => o.props.diff?.enable ? (s) => (s = combineProps(s, { get class() {
+			let { diff: e } = o.props, i = s.data[o.props.rowKey];
+			return [s.data[NEW] ? "bg-#dafaea!" : s.data[DEL] ? "bg-#ffe8e8!" : s.data[o.internal] ? "" : e.changed && s.data[s.col.id] != o.diffDataKeyed()[i]?.[s.col.id] ? "bg-#dafaea!" : ""].join(" ");
+		} }), createComponent(i, s)) : i
+	},
+	keybindings: (e) => ({ "$mod+S": () => e.commands.diffCommit() })
+};
+export { DiffPlugin };

package/dist/plugins/DragPlugin.d.ts

@@ -0,0 +1,14 @@
+import { type Plugin } from "../index";
+declare module '../index' {
+    interface TableProps {
+        colDrag?: boolean;
+        rowDrag?: boolean;
+    }
+    interface TableColumn {
+    }
+    interface TableStore {
+    }
+    interface Commands {
+    }
+}
+export declare const DragPlugin: Plugin;

package/dist/plugins/DragPlugin.js

@@ -0,0 +1,47 @@
+import { useSort } from "../hooks/useSort.js";
+import { delay } from "es-toolkit";
+import { isMatch } from "es-toolkit/compat";
+const DragPlugin = {
+	rewriteProps: {
+		colDrag: ({ colDrag: e = !1 }) => e,
+		rowDrag: ({ rowDrag: e = !1 }) => e
+	},
+	onMount(r) {
+		let i = useSort(() => r.scroll_el, {
+			get enable() {
+				return r.props?.colDrag;
+			},
+			guideLine: { class: "col__guide-line" },
+			draggable: (e) => ((i, a) => e.tagName == "TH" && isMatch(r.selected, { start: [i, 0] }) && !r.props?.columns[i][r.internal] && r.thead.contains(e) && delay(300).then(() => !0))(+e.getAttribute("x"), +e.getAttribute("y")),
+			dragover: (e) => e.tagName == "THEAD",
+			children: (e) => [...i.drag.parentElement.children].filter((e) => !r.props?.columns[e.getAttribute("x")][r.internal]),
+			dragend: o
+		}), a = useSort(() => r.scroll_el, {
+			get enable() {
+				return r.props?.rowDrag;
+			},
+			guideLine: { class: "row__guide-line" },
+			draggable: (e) => ((i, a) => e.tagName == "TD" && isMatch(r.selected, { start: [0, a] }) && i == 0 && !r.props?.data[a][r.internal] && r.tbody.contains(e) && delay(300).then(() => !0))(+e.getAttribute("x"), +e.getAttribute("y")),
+			dragover: (e) => e.tagName == "TBODY",
+			children: (e) => [...a.over.children].filter((e) => !r.props.data[e.getAttribute("y")][r.internal]),
+			dragend: s
+		});
+		async function o() {
+			if (i.drag == i.rel) return;
+			let [e, t] = [r.props.columns, [...r.rawProps.columns || []]], n = ((e) => e[r.raw] ?? e)(e[i.drag.getAttribute("x")]), a = ((e) => e[r.raw] ?? e)(e[i.rel.getAttribute("x")]), o = t.indexOf(n), s = t.indexOf(a);
+			if (o < 0 || s < 0) return;
+			t[o].fixed = t[s].fixed, t.splice(s - (o > s ? 0 : 1) + (i.type == "before" ? 0 : 1), 0, t.splice(o, 1)[0]), r.props.onColumnsChange?.(t), await Promise.resolve();
+			let c = r.props.columns.findIndex((e) => e == n || e[r.raw] == n);
+			c < 0 || (r.selected.start[0] = r.selected.end[0] = c);
+		}
+		async function s() {
+			if (a.drag == a.rel) return;
+			let [e, t] = [r.props.data, [...r.rawProps.data || []]], n = ((e) => e[r.raw] ?? e)(e[a.drag.getAttribute("y")]), i = ((e) => e[r.raw] ?? e)(e[a.rel.getAttribute("y")]), o = t.indexOf(n), s = t.indexOf(i);
+			if (o < 0 || s < 0) return;
+			t.splice(s - (o > s ? 0 : 1) + (a.type == "before" ? 0 : 1), 0, t.splice(o, 1)[0]), r.props.onDataChange?.(t), await Promise.resolve();
+			let c = r.props.data.findIndex((e) => e == n || e[r.raw] == n);
+			c < 0 || (r.selected.start[1] = r.selected.end[1] = c);
+		}
+	}
+};
+export { DragPlugin };

package/dist/plugins/EditablePlugin.d.ts

@@ -0,0 +1,51 @@
+import { type JSX } from 'solid-js';
+import { type Plugin, type TableColumn } from '..';
+declare module '../index' {
+    interface TableProps {
+        validator?: (value: any, data: any, col: TableColumn) => string | boolean | Promise<string | boolean>;
+    }
+    interface TableColumn {
+        editable?: boolean;
+        editor?: string | Editor;
+        editorProps?: any;
+        editorPopup?: boolean;
+        validator?: (value: any, rowData: any, col: TableColumn) => boolean | string | Promise<boolean | string>;
+    }
+    interface TableStore {
+        editors: {
+            [key: string]: Editor;
+        };
+    }
+}
+export type Editor = (props: EditorOpt) => {
+    el: JSX.Element;
+    getValue: () => any;
+    destroy: () => void;
+    focus?: () => void;
+    blur?: () => void;
+};
+export interface EditorOpt {
+    col: TableColumn;
+    data: any;
+    value: any;
+    eventKey?: string;
+    onChange?: (value: any) => void;
+    ok: () => void;
+    cancel: () => void;
+    props?: any;
+}
+export declare const EditablePlugin: Plugin;
+export declare const editors: {
+    text: Editor;
+    number: Editor;
+    range: Editor;
+    date: Editor;
+    time: Editor;
+    datetime: Editor;
+    color: Editor;
+    tel: Editor;
+    password: Editor;
+    file: Editor;
+    checkbox: Editor;
+    select: Editor;
+};

package/dist/plugins/EditablePlugin.js

@@ -0,0 +1,177 @@
+import { chooseFile, resolveOptions } from "../utils.js";
+import { Checkbox, Files } from "./RenderPlugin/components.js";
+import { Ctx } from "../index.js";
+import { createComponent, delegateEvents, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { createComputed, createEffect, createMemo, createRoot, createSignal, on, onCleanup, useContext } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { combineProps } from "@solid-primitives/props";
+import { createAsyncMemo } from "@solid-primitives/memo";
+import { delay } from "es-toolkit";
+var _tmpl$ = /* @__PURE__ */ template("<input style=position:absolute;margin-top:1em;width:0;height:0;pointer-events:none;opacity:0>"), _tmpl$2 = /* @__PURE__ */ template("<div class=in-cell-edit-wrapper>"), _tmpl$3 = /* @__PURE__ */ template("<span class=cell-validating>"), _tmpl$4 = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$5 = /* @__PURE__ */ template("<input>"), _tmpl$6 = /* @__PURE__ */ template("<select>"), _tmpl$7 = /* @__PURE__ */ template("<option>"), _tmpl$8 = /* @__PURE__ */ template("<label class=\"h-full flex items-center\">");
+const EditablePlugin = {
+	name: "editable",
+	store: () => ({ editors: { ...editors } }),
+	rewriteProps: { Td: ({ Td: e }, { store: T }) => (E) => {
+		let D, { props: A } = useContext(Ctx), j = createMemo(() => !!E.col.editable && !E.data[T.internal] && !E.col[T.internal]), [N, P] = createSignal(!1), z = "", B = createMemo(() => (([e, T]) => E.x == e && E.y == T)(T.selected.start || [])), V = createMemo(() => B() && j() && !N()), [H, U] = createSignal(null), [W, G] = createSignal(!1);
+		createEffect(() => {
+			N() || (U(null), G(!1));
+		});
+		let K = createAsyncMemo(async () => {
+			if (N()) {
+				let e = !1, D = ((e) => typeof e == "string" ? T.editors[e] : e)(E.col.editor || "text"), O = {
+					props: E.col.editorProps,
+					col: E.col,
+					eventKey: z,
+					data: E.data,
+					value: E.data[E.col.id],
+					ok: async () => {
+						await q(k.getValue()), P(!1);
+					},
+					cancel: () => (e = !0, U(null), P(!1)),
+					onChange: (e) => q(e).catch(() => {})
+				}, k = D(O);
+				return onCleanup(() => {
+					if (!e && k.getValue() !== E.data[E.col.id]) {
+						let e = [...A.data];
+						e[E.y] = {
+							...e[E.y],
+							[E.col.id]: k.getValue()
+						}, A.onDataChange?.(e);
+					}
+					e || q(k.getValue()), k.destroy();
+				}), [O, k];
+			}
+		});
+		async function q(e) {
+			if (A.validator || E.col.validator) {
+				try {
+					G(!0);
+					let T = await (async () => {
+						for (let T of [A.validator, E.col.validator]) {
+							if (!T) continue;
+							let D = await T(e, E.data, E.col);
+							if (D !== !0) return D;
+						}
+						return !0;
+					})();
+					G(!1), U(T === !0 ? null : typeof T == "string" ? T : "Error");
+				} catch (e) {
+					G(!1), U(e.message || "Error");
+				}
+				if (H() != null) throw Error(H() || "Error");
+			}
+		}
+		createEffect(() => {
+			K()?.[1]?.focus?.();
+		}), createEffect(() => {
+			if (N()) {
+				let e = createMemo(() => JSON.stringify(T.selected));
+				createEffect(on(e, () => P(!1), { defer: !0 }));
+			}
+		});
+		let J, Y = createMutable({
+			w: 0,
+			h: 0
+		});
+		return createComputed(() => N() && (Y.w = D.getBoundingClientRect().width, Y.h = D.getBoundingClientRect().height)), E = combineProps(E, {
+			ref: (e) => D = e,
+			get class() {
+				return [N() ? "is-editing" : "", H() === null ? "" : "is-invalid"].filter(Boolean).join(" ");
+			},
+			get style() {
+				return N() ? `width: ${Y.w}px; height: ${Y.h}px; padding: 0; ` : "";
+			},
+			onClick: () => J?.focus?.(),
+			onDblClick: () => P(j()),
+			onKeyDown: (e) => e.key == "Escape" && K()?.[0].cancel()
+		}), createComponent(e, mergeProps(E, { get children() {
+			return [
+				memo(() => memo(() => !!V())() && (() => {
+					var e = _tmpl$();
+					return e.addEventListener("compositionend", () => {
+						P(!0);
+					}), e.$$input = (e) => {
+						z = e.target.value, P(!e.isComposing);
+					}, e.$$keydown = (e) => {
+						e.key == " " && e.preventDefault();
+					}, use((e) => {
+						J = e, delay(0).then(() => e.focus({ preventScroll: !0 }));
+					}, e), e;
+				})()),
+				memo(() => memo(() => !!K()?.[1]?.el)() ? (() => {
+					var e = _tmpl$2();
+					return insert(e, () => K()?.[1]?.el, null), insert(e, (() => {
+						var e = memo(() => !!W());
+						return () => e() && _tmpl$3();
+					})(), null), e;
+				})() : E.children),
+				memo(() => memo(() => H() !== null)() && (() => {
+					var e = _tmpl$4();
+					return insert(e, H), e;
+				})())
+			];
+		} }));
+	} }
+};
+var createEditor = (e, E, D) => ({ eventKey: O, value: A, col: j, ok: M, cancel: N, props: P, onChange: F }) => createRoot((I) => {
+	let [L, R] = createSignal(O || A), z;
+	return createComponent(e, mergeProps({
+		ref: (e) => z = e,
+		class: "relative block px-2 size-full z-9 box-border resize-none outline-0",
+		get value() {
+			return L();
+		},
+		onInput: (e) => (R(e instanceof Event ? e.target.value : e), F?.(L())),
+		onChange: (e) => (R(e instanceof Event ? e.target.value : e), F?.(L()), D && M()),
+		"on:pointerdown": (e) => e.stopPropagation(),
+		"on:keydown": (e) => {
+			e.stopPropagation(), e.key == "Enter" && M(), e.key == "Escape" && N();
+		},
+		get options() {
+			return memo(() => !!j.enum)() ? resolveOptions(j.enum ?? []) : void 0;
+		}
+	}, E, P)), {
+		el: z,
+		getValue: L,
+		focus: () => z.focus(),
+		destroy: I
+	};
+}), Input = (e) => (() => {
+	var T = _tmpl$5();
+	return spread(T, e, !1, !1), T;
+})(), text = createEditor(Input), number = createEditor(Input, { type: "number" }), range$1 = createEditor(Input, { type: "range" }), color = createEditor(Input, { type: "color" }), tel = createEditor(Input, { type: "tel" }), password = createEditor(Input, { type: "password" }), date = createEditor(Input, { type: "date" }, !0), time = createEditor(Input, { type: "time" }, !0), datetime = createEditor(Input, { type: "datetime-local" }, !0), select = createEditor((e) => (() => {
+	var T = _tmpl$6();
+	return spread(T, e, !1, !0), insert(T, () => e.options?.map((e) => (() => {
+		var T = _tmpl$7();
+		return insert(T, () => e.label), effect(() => T.value = e.value), T;
+	})())), T;
+})(), {}, !0), file = createEditor((T) => createComponent(Files, mergeProps(T, {
+	class: "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
+	onAdd: () => chooseFile({ multiple: !0 }).then((e) => T.onChange([...T.value || [], ...e.map((e) => ({
+		name: e.name,
+		size: e.size
+	}))]))
+}))), checkbox = createEditor((e) => (() => {
+	var T = _tmpl$8(), D = e.ref;
+	return typeof D == "function" ? use(D, T) : e.ref = T, insert(T, createComponent(Checkbox, mergeProps(e, {
+		ref: () => {},
+		onInput: () => {},
+		class: "mx-3!"
+	}))), T;
+})());
+const editors = {
+	text,
+	number,
+	range: range$1,
+	date,
+	time,
+	datetime,
+	color,
+	tel,
+	password,
+	file,
+	checkbox,
+	select
+};
+delegateEvents(["keydown", "input"]);
+export { EditablePlugin, editors };

package/dist/plugins/ExpandPlugin.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+import { type Plugin } from '..';
+import { useSelector } from '../hooks/useSelector';
+declare module '../index' {
+    interface TableProps {
+        expand?: {
+            enable?: boolean;
+            render?: (props: {
+                data: any;
+                y: number;
+            }) => JSX.Element;
+        };
+    }
+    interface Commands {
+        expand: ReturnType<typeof useSelector<any[]>>;
+    }
+}
+export declare const ExpandPlugin: Plugin;

package/dist/plugins/ExpandPlugin.js

@@ -0,0 +1,46 @@
+import { renderComponent, solidComponent } from "../components/utils.js";
+import { useSelector } from "../hooks/useSelector.js";
+import chevron_right_default from "../chevron-right.js";
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
+import { combineProps } from "@solid-primitives/props";
+import { defaultsDeep } from "es-toolkit/compat";
+var _tmpl$ = /* @__PURE__ */ template("<td style=width:100%>"), _tmpl$2 = /* @__PURE__ */ template("<div style=display:flex;align-items:center;width:100%;height:100%;opacity:.4>");
+const ExpandPlugin = {
+	name: "expand",
+	store: (e) => ({ expandCol: {
+		id: Symbol("expand"),
+		fixed: "left",
+		width: 45,
+		render: solidComponent((m) => createComponent(ArrowCell, {
+			store: e,
+			get data() {
+				return m.data;
+			}
+		})),
+		props: (m) => ({ onClick: () => e.commands.expand.toggle(m.data) }),
+		[e.internal]: 1
+	} }),
+	commands: (e) => ({ expand: useSelector({ multiple: !0 }) }),
+	rewriteProps: {
+		expand: ({ expand: e }) => defaultsDeep(e, { enable: !1 }),
+		columns: ({ columns: e }, { store: m }) => m.props.expand?.enable ? [m.expandCol, ...e] : e,
+		Tr: ({ Tr: m }, { store: h }) => h.props.expand?.enable ? (g) => createComponent(m, mergeProps(g, { get children() {
+			return memo(() => !g.data?.[h.expandCol.id])() ? g.children : (() => {
+				var m = _tmpl$();
+				return insert(m, () => renderComponent(h.props.expand?.render, {
+					...g,
+					data: g.data[h.expandCol.id]
+				}, h.props.renderer)), effect(() => setAttribute(m, "colspan", h.props.columns?.length)), m;
+			})();
+		} })) : m,
+		Td: ({ Td: e }, { store: m }) => (h) => (h = combineProps(h, { onClick: () => h.col.id == m.expandCol.id && m.commands.expand.toggle(h.data) }), createComponent(e, h)),
+		data: ({ data: e }, { store: m }) => m.commands.expand.value.length ? e?.flatMap((e) => m.commands.expand.has(e) ? [e, { [m.expandCol.id]: e }] : e) : e
+	}
+};
+var ArrowCell = (e) => (() => {
+	var m = _tmpl$2();
+	return insert(m, createComponent(chevron_right_default, { get style() {
+		return `transform: rotate(${e.store.commands.expand.has(e.data) ? 90 : 0}deg);`;
+	} })), m;
+})();
+export { ExpandPlugin };

package/dist/plugins/HeaderGroup.d.ts

@@ -0,0 +1,11 @@
+import { type Plugin$0 } from '..';
+declare module '../index' {
+    interface TableColumn {
+        children?: TableColumn[];
+    }
+    interface TableStore {
+        /** Returns column indices of group anchors whose span overlaps [xStart, xEnd]. */
+        _headerGroupAnchors?: (xStart: number, xEnd: number) => number[];
+    }
+}
+export declare const HeaderGroupPlugin: Plugin$0;