intable 0.0.1

package/dist/plugins/CellSelectionPlugin.d.ts

@@ -0,0 +1,15 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+    }
+    interface TableStore {
+        selected: {
+            start: number[];
+            end: number[];
+        };
+    }
+    interface Commands {
+        getAreaRows(): any[];
+    }
+}
+export declare const CellSelectionPlugin: Plugin;

package/dist/plugins/CellSelectionPlugin.js

@@ -0,0 +1,150 @@
+import { usePointerDrag, useTinykeys } from "../hooks/index.js";
+import { Ctx } from "../index.js";
+import { createComponent, memo, mergeProps, template } from "solid-js/web";
+import { batch, createMemo, useContext } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=area>`);
+var inrange = (v, min, max) => v <= max && v >= min;
+const CellSelectionPlugin = {
+	store: () => ({ selected: {
+		start: [],
+		end: []
+	} }),
+	commands: (store) => ({ getAreaRows() {
+		const { start, end } = store.selected;
+		const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b);
+		return store.props.data.slice(y1, y2 + 1);
+	} }),
+	rewriteProps: {
+		Th: ({ Th }, { store }) => (o) => {
+			const clazz = createMemo(() => {
+				const { start, end } = store.selected;
+				return inrange(o.x, ...[start[0], end[0]].sort((a, b) => a - b)) ? "col-range-highlight" : "";
+			});
+			const mo = combineProps(o, { get class() {
+				return clazz();
+			} });
+			return createComponent(Th, mergeProps(mo, { get children() {
+				return [memo(() => mo.children), memo(() => memo(() => !!clazz())() && _tmpl$())];
+			} }));
+		},
+		Td: ({ Td }, { store }) => (o) => {
+			const clazz = createMemo(() => {
+				let clazz$1 = "";
+				const { xs, ys } = store.cellSelectionRect();
+				const inx = inrange(o.x, xs[0], xs[1]);
+				const iny = inrange(o.y, ys[0], ys[1]);
+				if (inx && iny) {
+					clazz$1 += "range-selected ";
+					if (o.x == xs[0]) clazz$1 += "range-selected-l ";
+					if (o.x == xs[1]) clazz$1 += "range-selected-r ";
+					if (o.y == ys[0]) clazz$1 += "range-selected-t ";
+					if (o.y == ys[1]) clazz$1 += "range-selected-b ";
+				}
+				if (o.x == 0 && iny) clazz$1 += "row-range-highlight ";
+				return clazz$1;
+			});
+			const mo = combineProps(o, {
+				get class() {
+					return clazz();
+				},
+				tabindex: -1
+			});
+			return createComponent(Td, mergeProps(mo, { get children() {
+				return [memo(() => mo.children), memo(() => memo(() => !!clazz())() && _tmpl$())];
+			} }));
+		},
+		Table: ({ Table }, { store }) => (o) => {
+			const { props } = useContext(Ctx);
+			store.cellSelectionRect ??= createMemo(() => {
+				const { start, end } = store.selected;
+				const xs = [start[0], end[0]].sort((a, b) => a - b);
+				const ys = [start[1], end[1]].sort((a, b) => a - b);
+				return {
+					xs,
+					ys
+				};
+			});
+			usePointerDrag(() => store.table, { start(e, move, end) {
+				batch(() => {
+					const findCell = (e$1) => e$1.composedPath().find((e$2) => e$2.tagName == "TH" || e$2.tagName == "TD");
+					const getXY = (cell$1) => [cell$1.getAttribute("x"), cell$1.getAttribute("y")];
+					const cell = findCell(e);
+					if (!cell) return;
+					if (e.buttons != 1 && cell.classList.contains("range-selected")) return;
+					if (cell.tagName == "TH") {
+						const [x, y] = getXY(cell);
+						if (x == null) return;
+						store.selected.start = [+x, 0];
+						store.selected.end = [+x, Infinity];
+						move((e$1) => {
+							const cell$1 = findCell(e$1);
+							if (!cell$1) return;
+							const [x$1, y$1] = getXY(cell$1);
+							if (x$1 == null) return;
+							store.selected.end = [+x$1, Infinity];
+						});
+					}
+					if (cell.classList.contains("index")) {
+						const [x, y] = getXY(cell);
+						if (x == null || y == null) return;
+						store.selected.start = [0, +y];
+						store.selected.end = [Infinity, +y];
+						move((e$1) => {
+							const cell$1 = findCell(e$1);
+							if (!cell$1) return;
+							const [x$1, y$1] = getXY(cell$1);
+							if (x$1 == null || y$1 == null) return;
+							store.selected.end = [Infinity, +y$1];
+						});
+					} else if (cell.tagName == "TD") {
+						const [x, y] = getXY(cell);
+						if (x == null || y == null) return;
+						store.selected.start = [+x, +y];
+						store.selected.end = [...store.selected.start];
+						move((e$1) => {
+							const cell$1 = findCell(e$1);
+							if (!cell$1) return;
+							const [x$1, y$1] = getXY(cell$1);
+							if (x$1 == null || y$1 == null) return;
+							store.selected.end = [+x$1, +y$1];
+						});
+					}
+				});
+			} });
+			useTinykeys(() => store.table, {
+				"ArrowLeft": () => {
+					const { start, end } = store.selected;
+					start[0] = end[0] = Math.max(start[0] - 1, 0);
+					end[1] = start[1];
+					scrollIntoView();
+				},
+				"ArrowRight": () => {
+					const { start, end } = store.selected;
+					start[0] = end[0] = Math.min(start[0] + 1, props.columns.length - 1);
+					end[1] = start[1];
+					scrollIntoView();
+				},
+				"ArrowUp": () => {
+					const { start, end } = store.selected;
+					start[1] = end[1] = Math.max(start[1] - 1, 0);
+					end[0] = start[0];
+					scrollIntoView();
+				},
+				"ArrowDown": () => {
+					const { start, end } = store.selected;
+					start[1] = end[1] = Math.min(start[1] + 1, props.data.length - 1);
+					end[0] = start[0];
+					scrollIntoView();
+				}
+			});
+			const scrollIntoView = () => {
+				const cell = store.table.querySelector(`td[x="${store.selected.start[0]}"][y="${store.selected.start[1]}"]`);
+				cell?.scrollIntoViewIfNeeded(false);
+				cell?.focus();
+			};
+			return createComponent(Table, o);
+		}
+	}
+};
+export { CellSelectionPlugin };

package/dist/plugins/CommandPlugin.d.ts

@@ -0,0 +1,14 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+    }
+    interface TableStore {
+        commands: Commands;
+    }
+    interface Plugin {
+        commands?: (store: TableStore, commands: Partial<Commands>) => Partial<Commands> & Record<string, any>;
+    }
+    interface Commands {
+    }
+}
+export declare const CommandPlugin: Plugin;

package/dist/plugins/CommandPlugin.js

@@ -0,0 +1,9 @@
+import { createComponent } from "solid-js/web";
+import { createComputed } from "solid-js";
+const CommandPlugin = { rewriteProps: { Table: ({ Table }, { store }) => (o) => {
+	createComputed(() => {
+		store.commands = store.plugins.reduce((o$1, e) => Object.assign(o$1, e.commands?.(store, { ...o$1 })), {});
+	});
+	return createComponent(Table, o);
+} } };
+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,54 @@
+import { useTinykeys } from "../hooks/index.js";
+import { createComponent } from "solid-js/web";
+import { createEffect } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+const ClipboardPlugin = {
+	rewriteProps: { Table: ({ Table }, { store }) => (o) => {
+		let el;
+		useTinykeys(() => el, {
+			"Control+C": () => {
+				store.commands.copy();
+				el.classList.add("copied");
+			},
+			"Control+V": () => store.commands.paste()
+		});
+		createEffect(() => {
+			JSON.stringify(store.selected);
+			el.classList.remove("copied");
+		});
+		o = combineProps({
+			ref: (e) => el = e,
+			tabindex: -1
+		}, o);
+		return createComponent(Table, o);
+	} },
+	menus: (store) => [],
+	commands: (store) => ({
+		copy: () => {
+			const { start, end } = store.selected;
+			if (start.length == 0) return;
+			const [x1, x2] = [start[0], end[0]].sort((a, b) => a - b);
+			const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b);
+			const cols = store.props.columns.slice(x1, x2 + 1);
+			const text = store.props.data.slice(y1, y2 + 1).map((row) => cols.map((col) => row[col.id])).map((row) => row.join("	")).join("\n");
+			navigator.clipboard.writeText(text);
+		},
+		paste: async () => {
+			const { start, end } = store.selected;
+			if (start.length == 0) return;
+			const arr2 = (await navigator.clipboard.readText()).split("\n").map((row) => row.split("	"));
+			const cols = store.props.columns.slice(start[0], start[0] + arr2[0].length);
+			const data = store.props.data.slice();
+			arr2.forEach((row, y) => {
+				row = Object.fromEntries(cols.map((col, x) => [col.id, row[x]]));
+				data[start[1] + y] = {
+					...data[start[1] + y],
+					...row
+				};
+			});
+			store.selected.end = [start[0] + cols.length - 1, Math.min(start[1] + arr2.length - 1, ctx.props.data.length - 1)];
+			store.props.onDataChange?.(data);
+		}
+	})
+};
+export { ClipboardPlugin };

package/dist/plugins/DiffPlugin.d.ts

@@ -0,0 +1,23 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        diff?: {
+            /** @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,68 @@
+import { useTinykeys } from "../hooks/index.js";
+import { createComponent } from "solid-js/web";
+import { unwrap } from "solid-js/store";
+import { isEqual, keyBy } from "es-toolkit";
+import { combineProps } from "@solid-primitives/props";
+import { createLazyMemo } from "@solid-primitives/memo";
+import { v4 } from "uuid";
+import { diffArrays } from "diff";
+var DEL = Symbol("del");
+var NEW = Symbol("new");
+const DiffPlugin = {
+	priority: Infinity,
+	store: (store) => {
+		const data = store.rawProps.data || [];
+		data.forEach((row) => unwrap(row)[store.rawProps.rowKey] ??= v4());
+		return {
+			diffData: structuredClone(unwrap(data || [])),
+			diffDataKeyed: createLazyMemo(() => keyBy(store.diffData, (e) => e[store.props.rowKey]))
+		};
+	},
+	commands: (store) => ({ async diffCommit(data = store.rawProps.data || []) {
+		const { rowKey } = store.props || {};
+		data.forEach((row) => unwrap(row)[rowKey] ??= v4());
+		data = structuredClone(unwrap(data));
+		const added = [], removed = [], changed = [];
+		const keyed = keyBy(data, (e) => e[rowKey]);
+		for (const e of data) {
+			const old = store.diffDataKeyed()[e[rowKey]];
+			if (!old) added.push(e);
+			else if (!isEqual(e, old)) changed.push(e);
+		}
+		for (const e of store.diffData) !keyed[e[rowKey]] && removed.push(e);
+		await store.props.diff?.onCommit?.(data, {
+			added,
+			removed,
+			changed
+		});
+		added[NEW] = 0;
+		store.diffData = data;
+	} }),
+	rewriteProps: {
+		diff: ({ diff }) => ({
+			added: true,
+			removed: true,
+			changed: true,
+			...diff
+		}),
+		data: ({ data }, { store }) => {
+			const { rowKey, diff } = store.props || {};
+			return diffArrays(store.diffData || [], data, { comparator: (a, b) => a[rowKey] == b[rowKey] }).flatMap((e) => e.added ? e.value.map((e$1) => (e$1[NEW] = 1, e$1)) : e.removed ? diff.removed ? e.value.map((e$1) => ({
+				...e$1,
+				[DEL]: 1,
+				[store.internal]: 1
+			})) : [] : e.value);
+		},
+		Table: ({ Table }, { store }) => (o) => {
+			useTinykeys(() => store.table, { "Control+S": () => store.commands.diffCommit() });
+			o = combineProps({ tabindex: -1 }, o);
+			return createComponent(Table, o);
+		},
+		tdProps: ({ tdProps }, { store }) => (o) => combineProps(tdProps?.(o) || {}, { get class() {
+			const { diff } = store.props || {};
+			const id = unwrap(o.data)[store.props.rowKey];
+			return [o.data[NEW] ? diff?.added ? "bg-#dafaea" : "" : o.data[DEL] ? "bg-#ffe8e8" : o.data[store.internal] ? "" : diff.changed && o.data[o.col.id] != store.diffDataKeyed()[id][o.col.id] ? "bg-#dafaea" : ""].join(" ");
+		} })
+	}
+};
+export { DiffPlugin };

package/dist/plugins/DragColumnPlugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from '..';
+export declare function DragColumnPlugin(): Plugin;

package/dist/plugins/DragColumnPlugin.js

@@ -0,0 +1,4 @@
+function DragColumnPlugin() {
+	return {};
+}
+export { DragColumnPlugin };

package/dist/plugins/EditablePlugin.d.ts

@@ -0,0 +1,49 @@
+import { type JSX } from 'solid-js';
+import { type Plugin, type TableColumn } from '..';
+declare module '../index' {
+    interface TableProps {
+    }
+    interface TableColumn {
+        editable?: boolean;
+        editor?: string | Editor;
+        editorProps?: any;
+        editorPopup?: boolean;
+        editOnInput?: boolean;
+    }
+    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;
+    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,191 @@
+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 { delay } from "es-toolkit";
+import { combineProps } from "@solid-primitives/props";
+import { createAsyncMemo } from "@solid-primitives/memo";
+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(`<input>`), _tmpl$4 = /* @__PURE__ */ template(`<select>`), _tmpl$5 = /* @__PURE__ */ template(`<option>`), _tmpl$6 = /* @__PURE__ */ template(`<label class="h-full flex items-center">`);
+const EditablePlugin = {
+	store: () => ({ editors: { ...editors } }),
+	rewriteProps: { Td: ({ Td }, { store }) => (o) => {
+		let el;
+		const { props } = useContext(Ctx);
+		const editable = createMemo(() => !!o.col.editable && !o.data[store.internal] && !o.col[store.internal]);
+		const [editing, setEditing] = createSignal(false);
+		let eventKey = "";
+		const selected = createMemo(() => (([x, y]) => o.x == x && o.y == y)(store.selected.start || []));
+		const preEdit = createMemo(() => selected() && editable() && !editing() && o.col.editOnInput);
+		const editorState = createAsyncMemo(async () => {
+			if (editing()) {
+				let canceled = false;
+				const editor = ((editor$1) => typeof editor$1 == "string" ? store.editors[editor$1] : editor$1)(o.col.editor || "text");
+				const opt = {
+					props: o.col.editorProps,
+					col: o.col,
+					eventKey,
+					data: o.data,
+					value: o.data[o.col.id],
+					ok: () => setEditing(false),
+					cancel: () => (canceled = true, setEditing(false))
+				};
+				const ret = editor(opt);
+				onCleanup(() => {
+					if (!canceled && ret.getValue() !== o.data[o.col.id]) {
+						const arr = [...props.data];
+						arr[o.y] = {
+							...arr[o.y],
+							[o.col.id]: ret.getValue()
+						};
+						props.onDataChange?.(arr);
+					}
+					ret.destroy();
+				});
+				return [opt, ret];
+			}
+		});
+		createEffect(() => {
+			editorState()?.[1]?.focus?.();
+		});
+		createEffect(() => {
+			if (editing()) {
+				const sss = createMemo(() => JSON.stringify(store.selected));
+				createEffect(on(sss, () => setEditing(false), { defer: true }));
+			}
+		});
+		let input;
+		const size = createMutable({
+			w: 0,
+			h: 0
+		});
+		createComputed(() => editing() && (size.w = el.getBoundingClientRect().width, size.h = el.getBoundingClientRect().height));
+		o = combineProps(o, {
+			ref: (v) => el = v,
+			get class() {
+				return editing() ? "is-editing" : "";
+			},
+			get style() {
+				return editing() ? `width: ${size.w}px; height: ${size.h}px; padding: 0; ` : "";
+			},
+			onClick: () => input?.focus?.(),
+			onDblClick: () => setEditing(editable()),
+			onKeyDown: (e) => e.key == "Escape" && editorState()?.[0].cancel()
+		});
+		return createComponent(Td, mergeProps(o, { get children() {
+			return [memo(() => memo(() => !!preEdit())() && (() => {
+				var _el$ = _tmpl$();
+				_el$.addEventListener("compositionend", () => {
+					setEditing(true);
+				});
+				_el$.$$input = (e) => {
+					eventKey = e.target.value;
+					setEditing(!e.isComposing);
+				};
+				_el$.$$keydown = (e) => {
+					e.key == " " && e.preventDefault();
+				};
+				use((e) => {
+					input = e;
+					delay(0).then(() => e.focus({ preventScroll: true }));
+				}, _el$);
+				return _el$;
+			})()), memo(() => memo(() => !!editorState()?.[1]?.el)() ? (() => {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => editorState()?.[1]?.el);
+				return _el$2;
+			})() : o.children)];
+		} }));
+	} }
+};
+var createEditor = (Comp, extra, isSelector) => ({ eventKey, value, col, ok, cancel, props }) => createRoot((destroy) => {
+	const [v, setV] = createSignal(eventKey || value);
+	let el;
+	createComponent(Comp, mergeProps({
+		ref: (e) => el = e,
+		"class": "relative block px-2 size-full z-9 box-border resize-none outline-0",
+		get value() {
+			return v();
+		},
+		onInput: (e) => setV(e instanceof Event ? e.target.value : e),
+		onChange: (e) => (setV(e instanceof Event ? e.target.value : e), isSelector && ok()),
+		"on:pointerdown": (e) => e.stopPropagation(),
+		"on:keydown": (e) => {
+			e.stopPropagation();
+			e.key == "Enter" && ok();
+			e.key == "Escape" && cancel();
+		},
+		get options() {
+			return memo(() => !!col.enum)() ? resolveOptions(col.enum ?? []) : void 0;
+		}
+	}, extra, props));
+	return {
+		el,
+		getValue: v,
+		focus: () => el.focus(),
+		destroy
+	};
+});
+var Input = (o) => (() => {
+	var _el$3 = _tmpl$3();
+	spread(_el$3, o, false, false);
+	return _el$3;
+})();
+var text = createEditor(Input);
+var number = createEditor(Input, { type: "number" });
+var range$1 = createEditor(Input, { type: "range" });
+var color = createEditor(Input, { type: "color" });
+var tel = createEditor(Input, { type: "tel" });
+var password = createEditor(Input, { type: "password" });
+var date = createEditor(Input, { type: "date" }, true);
+var time = createEditor(Input, { type: "time" }, true);
+var datetime = createEditor(Input, { type: "datetime-local" }, true);
+var select = createEditor((o) => (() => {
+	var _el$4 = _tmpl$4();
+	spread(_el$4, o, false, true);
+	insert(_el$4, () => o.options?.map((e) => (() => {
+		var _el$5 = _tmpl$5();
+		insert(_el$5, () => e.label);
+		effect(() => _el$5.value = e.value);
+		return _el$5;
+	})()));
+	return _el$4;
+})(), {}, true);
+var file = createEditor((o) => {
+	const onAdd = () => chooseFile({ multiple: true }).then((files) => o.onChange([...o.value || [], ...files.map((e) => ({
+		name: e.name,
+		size: e.size
+	}))]));
+	return createComponent(Files, mergeProps(o, {
+		"class": "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
+		onAdd
+	}));
+});
+var checkbox = createEditor((o) => (() => {
+	var _el$6 = _tmpl$6();
+	var _ref$ = o.ref;
+	typeof _ref$ === "function" ? use(_ref$, _el$6) : o.ref = _el$6;
+	insert(_el$6, createComponent(Checkbox, mergeProps(o, {
+		ref: () => {},
+		onInput: () => {},
+		"class": "mx-3!"
+	})));
+	return _el$6;
+})());
+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,20 @@
+import type { JSX } from 'solid-js';
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        expand?: {
+            enable?: boolean;
+            render?: (props: {
+                data: any;
+                y: number;
+            }) => JSX.Element;
+        };
+    }
+    interface TableStore {
+        expands: any[];
+        expandCol: TableColumn;
+        isExpand: (data: any) => boolean;
+        toggleExpand: (data: any) => void;
+    }
+}
+export declare const ExpandPlugin: Plugin;

package/dist/plugins/ExpandPlugin.js

@@ -0,0 +1,56 @@
+import { renderComponent, solidComponent } from "../components/utils.js";
+import { Ctx } from "../index.js";
+import chevron_right_default from "../chevron-right.js";
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
+import { createMemo, useContext } from "solid-js";
+import { unwrap } from "solid-js/store";
+import { remove } from "es-toolkit";
+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 = {
+	store: (store) => ({
+		expands: [],
+		expandCol: {
+			id: Symbol("expand"),
+			fixed: "left",
+			width: 45,
+			render: solidComponent((o) => createComponent(ArrowCell, {
+				store,
+				get data() {
+					return o.data;
+				}
+			})),
+			props: (o) => ({ onClick: () => store.toggleExpand(o.data) }),
+			[store.internal]: 1
+		},
+		isExpand: (data) => !!store.expands.find((e) => unwrap(e) == unwrap(data)),
+		toggleExpand: (data) => store.isExpand(data) ? remove(store.expands, (e) => unwrap(e) == unwrap(data)) : store.expands.push(unwrap(data))
+	}),
+	rewriteProps: {
+		columns: ({ columns }, { store }) => [store.expandCol, ...columns],
+		Tr: ({ Tr }, { store }) => (o) => {
+			const { props } = useContext(Ctx);
+			if (!o.data?.[store.expandCol.id]) return createComponent(Tr, o);
+			return createComponent(Tr, mergeProps(o, { get children() {
+				var _el$ = _tmpl$();
+				insert(_el$, (() => {
+					var _c$ = memo(() => !!props.expand?.render);
+					return () => _c$() && renderComponent(props.expand.render, o, props.renderer);
+				})());
+				effect(() => setAttribute(_el$, "colspan", props.columns?.length));
+				return _el$;
+			} }));
+		},
+		data: ({ data }, { store }) => store.expands.length ? data?.flatMap((e) => store.isExpand(e) ? [e, { [store.expandCol.id]: 1 }] : e) : data
+	}
+};
+var ArrowCell = (_props) => {
+	const show = createMemo(() => _props.store.isExpand(_props.data));
+	return (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, createComponent(chevron_right_default, { get style() {
+			return `transform: rotate(${show() ? 90 : 0}deg);`;
+		} }));
+		return _el$2;
+	})();
+};
+export { ExpandPlugin };