intable 0.0.27 → 0.0.29

package/dist/plugins/EditablePlugin.js

@@ -7,41 +7,41 @@ 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 tabindex=-1>"), _tmpl$3 = /* @__PURE__ */ template("<span class=cell-validating>"), _tmpl$4 = /* @__PURE__ */ template("<input>"), _tmpl$5 = /* @__PURE__ */ template("<textarea>"), _tmpl$6 = /* @__PURE__ */ template("<label class=\"h-full flex items-center\">"), _tmpl$7 = /* @__PURE__ */ template("<select>"), _tmpl$8 = /* @__PURE__ */ template("<option>");
+var _tmpl$ = /* @__PURE__ */ template("<div class=in-cell-edit-wrapper tabindex=-1>"), _tmpl$2 = /* @__PURE__ */ template("<span class=cell-validating>"), _tmpl$3 = /* @__PURE__ */ template("<input style=position:absolute;margin-top:1em;width:0;height:0;pointer-events:none;opacity:0>"), _tmpl$4 = /* @__PURE__ */ template("<input>"), _tmpl$5 = /* @__PURE__ */ template("<textarea>"), _tmpl$6 = /* @__PURE__ */ template("<label class=\"h-full flex items-center\">"), _tmpl$7 = /* @__PURE__ */ template("<select>"), _tmpl$8 = /* @__PURE__ */ template("<option>");
 const EditablePlugin = {
 	name: "editable",
 	store: () => ({ editors: { ...editors } }),
 	rewriteProps: {
-		editable: ({ editable: e }, { store: _ }) => (y) => {
-			let b = [y.col.editable, e].filter((e) => e != null);
-			return !!b.length && b.every((e) => unFn(e, y)) && !y.data[_.internal] && !y.col[_.internal];
+		editable: ({ editable: e }, { store: v }) => (b) => {
+			let x = [b.col.editable, e].filter((e) => e != null);
+			return !!x.length && x.every((e) => unFn(e, b)) && !b.data[v.internal] && !b.col[v.internal];
 		},
-		Td: ({ Td: e }, { store: _ }) => (y) => {
-			let b, { props: C } = useContext(Ctx), w = createMemo(() => unFn(C.editable, y)), [E, D] = createSignal(!1), j = "", M = createMemo(() => (([e, _]) => y.x == e && y.y == _)(_.selected.start || [])), N = createMemo(() => M() && w() && !E()), [P, F] = createSignal(!1), I = createAsyncMemo(() => {
-				if (E()) {
-					let e = !1, v = y.data[y.col.id], b = ((e) => typeof e == "string" ? _.editors[e] : e)(y.col.editor ?? y.col.type ?? "text"), x = {
-						props: y.col.editorProps,
-						col: y.col,
-						eventKey: j,
-						data: y.data,
-						value: v,
+		Td: ({ Td: e }, { store: v }) => (b) => {
+			let x, { props: w } = useContext(Ctx), [T, D] = createSignal(!1), O = "", j = () => unFn(w.editable, b), M = () => (([e, v]) => b.x == e && b.y == v)(v.selected.start || []), N = () => M() && j() && !T(), [P, F] = createSignal(!1), I = createAsyncMemo(() => {
+				if (T()) {
+					let e = !1, y = b.data[b.col.id], x = ((e) => typeof e == "string" ? v.editors[e] : e)(b.col.editor ?? b.col.type ?? "text"), S = {
+						props: b.col.editorProps,
+						col: b.col,
+						eventKey: O,
+						data: b.data,
+						value: y,
 						ok: async () => {
-							await L(S.getValue()), D(!1);
+							await L(C.getValue()), D(!1);
 						},
 						cancel: () => (e = !0, D(!1)),
-						onChange: (e) => E() && L(e).catch(() => {})
-					}, S = b(x);
+						onChange: (e) => T() && L(e).catch(() => {})
+					}, C = x(S);
 					return onCleanup(() => {
-						!e && S.getValue() !== v && _.commands.rowChange({
-							...C.data[y.y],
-							[y.col.id]: S.getValue()
-						}), e || L(S.getValue()).catch(() => {}), j = "", S.destroy();
-					}), [x, S];
+						!e && C.getValue() !== y && v.commands.rowChange({
+							...w.data[b.y],
+							[b.col.id]: C.getValue()
+						}), e || L(C.getValue()).catch(() => {}), O = "", C.destroy();
+					}), [S, C];
 				}
 			});
 			async function L(e) {
 				try {
-					F(!0), await _.validateCell(e, y.data, y.col);
+					F(!0), await v.validateCell(e, b.data, b.col);
 				} finally {
 					F(!1);
 				}
@@ -49,8 +49,8 @@ const EditablePlugin = {
 			createEffect(() => {
 				I()?.[1]?.focus?.();
 			}), createEffect(() => {
-				if (E()) {
-					let e = createMemo(() => JSON.stringify(_.selected));
+				if (T()) {
+					let e = createMemo(() => JSON.stringify(v.selected ?? "{}"));
 					createEffect(on(e, () => D(!1), { defer: !0 }));
 				}
 			});
@@ -58,72 +58,70 @@ const EditablePlugin = {
 				w: 0,
 				h: 0
 			});
-			return createComputed(() => E() && (z.w = b.getBoundingClientRect().width, z.h = b.getBoundingClientRect().height)), y = combineProps(y, {
-				ref: (e) => b = e,
+			return createComputed(() => T() && (z.w = x.getBoundingClientRect().width, z.h = x.getBoundingClientRect().height)), b = combineProps(b, {
+				ref: (e) => x = e,
 				get class() {
-					return E() ? "is-editing" : "";
+					return T() ? "is-editing" : "";
 				},
 				get style() {
-					return E() ? `width: ${z.w}px; height: ${z.h}px; padding: 0; ` : "";
+					return T() ? `width: ${z.w}px; height: ${z.h}px; padding: 0; ` : "";
 				},
 				onClick: () => R?.focus?.(),
-				onDblClick: () => D(w()),
+				onDblClick: () => D(j()),
 				onKeyDown: (e) => e.key == "Escape" && I()?.[0].cancel()
-			}), createComponent(e, mergeProps(y, { get children() {
-				return [memo(() => memo(() => !!N())() && (() => {
+			}), createComponent(e, mergeProps(b, { get children() {
+				return [memo(() => memo(() => !!I()?.[1]?.el)() ? (() => {
 					var e = _tmpl$();
+					return addEventListener(e, "keydown", (e) => {
+						e.stopPropagation(), e.key == "Enter" && !e.shiftKey && I()?.[0].ok(), e.key == "Escape" && I()?.[0].cancel();
+					}), addEventListener(e, "pointerdown", (e) => e.stopPropagation()), insert(e, () => I()?.[1]?.el, null), insert(e, (() => {
+						var e = memo(() => !!P());
+						return () => e() && _tmpl$2();
+					})(), null), e;
+				})() : b.children), memo(() => memo(() => !!N())() && (() => {
+					var e = _tmpl$3();
 					return e.addEventListener("compositionend", () => {
 						D(!0);
 					}), e.$$input = (e) => {
-						j = e.target.value, D(!e.isComposing);
+						O = e.target.value, D(!e.isComposing);
 					}, e.$$keydown = (e) => {
 						e.key == " " && e.preventDefault();
 					}, use((e) => {
 						R = e, delay(0).then(() => e.focus({ preventScroll: !0 }));
 					}, e), e;
-				})()), memo(() => memo(() => !!I()?.[1]?.el)() ? (() => {
-					var e = _tmpl$2();
-					return addEventListener(e, "keydown", (e) => e.stopPropagation()), insert(e, () => I()?.[1]?.el, null), insert(e, (() => {
-						var e = memo(() => !!P());
-						return () => e() && _tmpl$3();
-					})(), null), e;
-				})() : y.children)];
+				})())];
 			} }));
 		}
 	}
 };
-var createEditor = (e, v, y) => ({ eventKey: b, value: x, col: S, ok: C, cancel: w, props: T, onChange: E }) => createRoot((D) => {
-	let [O, k] = createSignal(b || x), A;
+var createEditor = (e, y, b) => ({ eventKey: x, value: S, col: C, ok: w, cancel: T, props: E, onChange: D }) => createRoot((T) => {
+	let [O, k] = createSignal(x || S), A;
 	return createComponent(e, mergeProps({
 		ref: (e) => A = e,
 		class: "relative block px-2 size-full z-9 box-border resize-none outline-0",
 		get value() {
 			return O();
 		},
-		onInput: (e) => (k(e instanceof Event ? e.target.value : e), E?.(O())),
-		onChange: (e) => (k(e instanceof Event ? e.target.value : e), E?.(O()), y && C()),
-		"on:pointerdown": (e) => e.stopPropagation(),
-		"on:keydown": (e) => {
-			e.stopPropagation(), e.key == "Enter" && !e.shiftKey && C(), e.key == "Escape" && w();
-		},
+		onInput: (e) => (k(e instanceof Event ? e.target.value : e), D?.(O())),
+		onChange: (e) => (k(e instanceof Event ? e.target.value : e), D?.(O()), b && w()),
 		get options() {
-			return memo(() => !!S.enum)() ? resolveOptions(S.enum ?? []) : void 0;
+			return memo(() => !!C.enum)() ? resolveOptions(C.enum ?? []) : void 0;
 		}
-	}, v, T)), {
+	}, y, E)), {
 		el: A,
 		getValue: O,
 		focus: () => A.focus(),
-		destroy: D
+		destroy: T
 	};
 }), Input = (e) => (() => {
-	var _ = _tmpl$4();
-	return spread(_, e, !1, !1), _;
+	var v = _tmpl$4();
+	return spread(v, e, !1, !1), v;
 })();
 const editors = {
 	text: createEditor(Input),
 	textarea: createEditor((e) => (() => {
-		var _ = _tmpl$5();
-		return spread(_, e, !1, !1), _;
+		var v = _tmpl$5();
+		return spread(v, e, !1, !1), v;
 	})()),
 	number: createEditor(Input, { type: "number" }),
 	range: createEditor(Input, { type: "range" }),
@@ -133,27 +131,27 @@ const editors = {
 	color: createEditor(Input, { type: "color" }),
 	tel: createEditor(Input, { type: "tel" }),
 	password: createEditor(Input, { type: "password" }),
-	file: createEditor((_) => createComponent(Files, mergeProps(_, {
+	file: createEditor((v) => createComponent(Files, mergeProps(v, {
 		class: "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
-		onAdd: () => chooseFile({ multiple: !0 }).then((e) => _.onChange([..._.value || [], ...e.map((e) => ({
+		onAdd: () => chooseFile({ multiple: !0 }).then((e) => v.onChange([...v.value || [], ...e.map((e) => ({
 			name: e.name,
 			size: e.size
 		}))]))
 	}))),
 	checkbox: createEditor((e) => (() => {
-		var _ = _tmpl$6(), v = e.ref;
-		return typeof v == "function" ? use(v, _) : e.ref = _, insert(_, createComponent(Checkbox, mergeProps(e, {
+		var v = _tmpl$6(), y = e.ref;
+		return typeof y == "function" ? use(y, v) : e.ref = v, insert(v, createComponent(Checkbox, mergeProps(e, {
 			ref: () => {},
 			onInput: () => {},
 			class: "mx-3!"
-		}))), _;
+		}))), v;
 	})()),
 	select: createEditor((e) => (() => {
-		var _ = _tmpl$7();
-		return spread(_, e, !1, !0), insert(_, () => e.options?.map((e) => (() => {
-			var _ = _tmpl$8();
-			return insert(_, () => e.label), effect(() => _.value = e.value), _;
-		})())), _;
+		var v = _tmpl$7();
+		return spread(v, e, !1, !0), insert(v, () => e.options?.map((e) => (() => {
+			var v = _tmpl$8();
+			return insert(v, () => e.label), effect(() => v.value = e.value), v;
+		})())), v;
 	})(), {}, !0)
 };
 delegateEvents(["keydown", "input"]);

package/dist/plugins/ExpandPlugin.js

@@ -17,7 +17,6 @@ const ExpandPlugin = {
 				return m.data;
 			}
 		})),
-		props: (m) => ({ onClick: () => e.commands.expand.toggle(m.data) }),
 		[e.internal]: 1
 	} }),
 	commands: (e) => ({ expand: useSelector({ multiple: !0 }) }),

package/dist/plugins/ImportExportPlugin.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from "..";
+declare module '../index' {
+    interface Commands {
+        createExcel(data?: any[]): Promise<Blob>;
+        exportExcel(data?: any[]): Promise<void>;
+        readExcel(file?: File): Promise<any[]>;
+    }
+}
+export declare const ImportExportPlugin: Plugin;

package/dist/plugins/ImportExportPlugin.js

@@ -0,0 +1,37 @@
+import { chooseFile } from "../utils.js";
+function readFileAsArrayBuffer(e) {
+	return new Promise((t, n) => {
+		let r = new FileReader();
+		r.onload = () => t(r.result), r.onerror = n, r.readAsArrayBuffer(e);
+	});
+}
+function downloadBlob(e, t) {
+	let n = URL.createObjectURL(e), r = document.createElement("a");
+	r.href = n, r.download = t, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
+}
+const ImportExportPlugin = {
+	name: "ImportExportPlugin",
+	commands: (r) => ({
+		createExcel: async (e = r.props.data) => {
+			let t = await import("xlsx"), n = r.props.columns.filter((e) => !e[r.internal]), i = e.map((e) => Object.fromEntries(n.map((t) => [t.name, e[t.id]]))), a = t.utils.json_to_sheet(i), o = t.utils.book_new();
+			t.utils.book_append_sheet(o, a, "Data");
+			let s = t.write(o, {
+				bookType: "xlsx",
+				type: "array"
+			});
+			return new Blob([s], { type: "application/octet-stream" });
+		},
+		exportExcel: async (e = r.props.data) => {
+			let t = await r.commands.createExcel(e);
+			downloadBlob(t, "data.xlsx");
+		},
+		readExcel: async (n) => {
+			n ??= await chooseFile({ accept: ".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" });
+			let i = await readFileAsArrayBuffer(n), a = await import("xlsx"), o = a.read(i, { type: "array" }), s = o.Sheets[o.SheetNames[0]], c = a.utils.sheet_to_json(s);
+			if (c.length < 1) return;
+			let l = r.props.columns.filter((e) => !e[r.internal]);
+			return c.slice(1).map((e) => Object.fromEntries(l.map((t) => [t.id, e[t.name]])));
+		}
+	})
+};
+export { ImportExportPlugin };

package/dist/plugins/MenuPlugin.d.ts

@@ -10,7 +10,7 @@ declare module '../index' {
     interface Commands {
         rowEquals: (a: any, b: any) => boolean;
         rowIndexOf: (data: any[], row: any) => number;
-        rowChange: (row: any, i?: any) => void;
+        rowChange: (row: any) => void;
         rowsChange: (rows: any) => void;
         addRows: (i: number, rows: any[], before?: boolean) => void;
         deleteRows: (i: number[]) => void;

package/dist/plugins/MenuPlugin.js

@@ -78,9 +78,9 @@ const MenuPlugin = {
 		rowIndexOf(r, i) {
 			return r.findIndex((r) => e.commands.rowEquals(r, i));
 		},
-		rowChange(r, i) {
-			let a = [...e.rawProps.data || []];
-			i = i == null ? e.commands.rowIndexOf(a, r) : a.findIndex((r) => e.commands.rowEquals(r, e.props.data[i])), i > -1 && (a[i] = r, e.props.onDataChange?.(a));
+		rowChange(r) {
+			let i = [...e.rawProps.data || []], a = e.commands.rowIndexOf(i, r);
+			a > -1 && (i[a] = r, e.props.onDataChange?.(i));
 		},
 		rowsChange(r) {
 			let i = [...e.rawProps.data || []];

package/dist/plugins/RenderPlugin/index.d.ts

@@ -1,11 +1,11 @@
 import { type JSX } from 'solid-js';
-import { type Plugin, type TD } from '../..';
+import { type Plugin, type TDProps } from '../..';
 declare module '../../index' {
     interface TableProps {
     }
     interface TableColumn {
         type?: string;
-        render?: Render;
+        render?: string | Render;
         enum?: Record<string, any> | {
             label?: string;
             value: any;
@@ -17,7 +17,7 @@ declare module '../../index' {
         };
     }
 }
-export type RenderProps = Parameters<TD>[0] & {
+export type RenderProps = TDProps & {
     onChange: (v: any) => void;
 };
 export type Render = (props: RenderProps) => JSX.Element | any;

package/dist/plugins/RenderPlugin/index.js

@@ -8,36 +8,36 @@ const RenderPlugin = {
 	name: "render",
 	priority: -Infinity,
 	store: () => ({ renders: { ...renders } }),
-	rewriteProps: { Td: ({ Td: e }, { store: p }) => (m) => createComponent(e, mergeProps(m, { get children() {
+	rewriteProps: { Td: ({ Td: e }, { store: m }) => (h) => createComponent(e, mergeProps(h, { get children() {
 		return (() => {
-			let e = ((e) => typeof e == "string" ? p.renders[e] : e)(m.col.render ?? m.col.type) || text;
-			return renderComponent(e, mergeProps$1(m, { onChange: (e) => p.commands.rowChange({
-				...m.data,
-				[m.col.id]: e
-			}, m.y) }), p);
+			let e = ((e) => typeof e == "string" ? m.renders[e] : e)(h.col.render ?? h.col.type) || text;
+			return renderComponent(e, mergeProps$1(h, { onChange: (e) => m.commands.rowChange({
+				...h.data,
+				[h.col.id]: e
+			}) }), m);
 		})();
 	} })) }
 };
-var text = (m) => memo(() => ((h) => m.col.enum ? toArr(h).map((p) => resolveOptions(m.col.enum).find((e) => e.value == p)?.label ?? p).join(", ") : h)(m.data[m.col.id]));
+var text = (h) => memo(() => memo(() => !!h.col.enum)() ? toArr(h.value).map((m) => resolveOptions(h.col.enum).find((e) => e.value == m)?.label ?? m).join(", ") : h.value);
 const renders = {
 	text,
 	number: text,
 	date: text,
 	checkbox: (e) => (() => {
-		var p = _tmpl$();
-		return insert(p, createComponent(Checkbox, {
+		var m = _tmpl$();
+		return insert(m, createComponent(Checkbox, {
 			class: "",
 			get value() {
-				return e.data[e.col.id];
+				return e.value;
 			},
 			get onChange() {
 				return e.onChange;
 			}
-		})), p;
+		})), m;
 	})(),
 	file: (e) => createComponent(Files, {
 		get value() {
-			return e.data[e.col.id];
+			return e.value;
 		},
 		get onChange() {
 			return e.onChange;

package/dist/plugins/ResizePlugin.js

@@ -4,38 +4,37 @@ import { Ctx } from "../index.js";
 import { className, createComponent, effect, memo, mergeProps, template, use } from "solid-js/web";
 import { batch, untrack, useContext } from "solid-js";
 import { reconcile } from "solid-js/store";
-import { combineProps } from "@solid-primitives/props";
 import { clamp } from "es-toolkit";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { defaultsDeep } from "es-toolkit/compat";
-var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), ColHandle = (p) => {
-	let { props: g, store: v } = useContext(Ctx), y;
-	return usePointerDrag(() => y, { start(e, m, h) {
+var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), ColHandle = (f) => {
+	let { props: h, store: _ } = useContext(Ctx), v;
+	return usePointerDrag(() => v, { start(e, p, m) {
 		e.stopPropagation();
-		let _ = p.x, { min: b, max: x } = g.resizable.col, S = y.parentElement, C = S.offsetWidth;
-		m((e, { ox: m }) => v[COL][p.x] = clamp(C + m, b, x)), h(() => {
-			let e = g.columns[_], p = [...v.rawProps.columns || []], m = p.findIndex((p) => p[v.ID] === e[v.ID]);
-			m > -1 && (p[m] = {
-				...p[m],
-				width: S.offsetWidth
-			}, g.onColumnsChange?.(p)), e.onWidthChange?.(S.offsetWidth);
+		let g = f.x, { min: y, max: b } = h.resizable.col, x = v.parentElement, S = x.offsetWidth;
+		p((e, { ox: p }) => _[COL][f.x] = clamp(S + p, y, b)), m(() => {
+			let e = h.columns[g], f = [..._.rawProps.columns || []], p = f.findIndex((f) => f[_.ID] === e[_.ID]);
+			p > -1 && (f[p] = {
+				...f[p],
+				width: x.offsetWidth
+			}, h.onColumnsChange?.(f)), e.onWidthChange?.(x.offsetWidth);
 		});
 	} }), (() => {
-		var e = _tmpl$(), m = y;
-		return typeof m == "function" ? use(m, e) : y = e, effect(() => className(e, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${p.x == g.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), e;
+		var e = _tmpl$(), p = v;
+		return typeof p == "function" ? use(p, e) : v = e, effect(() => className(e, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${f.x == h.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), e;
 	})();
-}, RowHandle = (p) => {
-	let { props: g, store: v } = useContext(Ctx), y;
-	return usePointerDrag(() => y, { start(e, m, h) {
+}, RowHandle = (f) => {
+	let { props: h, store: _ } = useContext(Ctx), v;
+	return usePointerDrag(() => v, { start(e, p, m) {
 		e.stopPropagation();
-		let _ = p.y, { min: b, max: x } = g.resizable.row, S = y.parentElement.offsetHeight;
-		m((e, { oy: m }) => v[ROW][p.y] = clamp(S + m, b, x)), h(() => {
-			let e = g.data[_];
-			[...v.rawProps.data || []].findIndex((p) => p[v.ID] === e[v.ID]);
+		let g = f.y, { min: y, max: b } = h.resizable.row, x = v.parentElement.offsetHeight;
+		p((e, { oy: p }) => _[ROW][f.y] = clamp(x + p, y, b)), m(() => {
+			let e = h.data[g];
+			[..._.rawProps.data || []].findIndex((f) => f[_.ID] === e[_.ID]);
 		});
-	} }), createEventListener(() => y, "dblclick", () => p.data[COL] = void 0), (() => {
-		var e = _tmpl$(), m = y;
-		return typeof m == "function" ? use(m, e) : y = e, effect(() => className(e, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${p.y == g.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-1`)), e;
+	} }), createEventListener(() => v, "dblclick", () => f.data[COL] = void 0), (() => {
+		var e = _tmpl$(), p = v;
+		return typeof p == "function" ? use(p, e) : v = e, effect(() => className(e, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${f.y == h.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-2`)), e;
 	})();
 };
 const ResizePlugin = {
@@ -58,23 +57,33 @@ const ResizePlugin = {
 				max: 400
 			}
 		}),
-		columns: ({ columns: e }, { store: p }) => (e = e.map((e, m) => ({
+		columns: ({ columns: e }, { store: f }) => (e = e.map((e, p) => ({
 			...e,
-			[p.ID]: e[p.ID] ??= Symbol()
+			[f.ID]: e[f.ID] ??= Symbol()
 		})), e = e.map((e) => e.resizable === void 0 ? {
 			...e,
-			resizable: p.props?.resizable?.col.enable
-		} : e), e = e.map((e, m) => p[COL][m] ? {
+			resizable: f.props?.resizable?.col.enable
+		} : e), e = e.map((e, p) => f[COL][p] ? {
 			...e,
-			width: p[COL][m]
-		} : e), untrack(() => batch(() => reconcile(e, { key: p.ID })(p.__resize__cols ??= [])))),
-		Th: ({ Th: e }, { store: p }) => (p) => (p = combineProps({ class: "relative" }, p), createComponent(e, mergeProps(p, { get children() {
-			return [memo(() => p.children), memo(() => memo(() => !!p.col.resizable)() && createComponent(ColHandle, p))];
-		} }))),
-		Td: ({ Td: e }, { store: p }) => p.props?.resizable?.row.enable ? (m) => (m = combineProps({ class: "relative" }, m), createComponent(e, mergeProps(m, { get children() {
-			return [memo(() => m.children), memo(() => memo(() => !!(m.x == 0 && p.props?.resizable?.row.enable))() && createComponent(RowHandle, m))];
-		} }))) : e,
-		cellStyle: ({ cellStyle: e }, { store: m }) => (h) => `${unFn(e, h)};` + (m[ROW][h.y] ? `height: ${m[ROW][h.y]}px` : "")
+			width: f[COL][p]
+		} : e), untrack(() => batch(() => reconcile(e, { key: f.ID })(f.__resize__cols ??= [])))),
+		Th: ({ Th: e }, { store: f }) => (f) => createComponent(e, mergeProps(f, {
+			get class() {
+				return `relative ${f.class}`;
+			},
+			get children() {
+				return [f.children, memo(() => memo(() => !!f.col.resizable)() && createComponent(ColHandle, f))];
+			}
+		})),
+		Td: ({ Td: e }, { store: f }) => f.props?.resizable?.row.enable ? (p) => createComponent(e, mergeProps(p, {
+			get class() {
+				return `relative ${p.class}`;
+			},
+			get children() {
+				return [p.children, memo(() => memo(() => !!(p.x == 0 && f.props?.resizable?.row.enable))() && createComponent(RowHandle, p))];
+			}
+		})) : e,
+		cellStyle: ({ cellStyle: e }, { store: p }) => (m) => `${unFn(e, m)};` + (p[ROW][m.y] ? `height: ${p[ROW][m.y]}px` : "")
 	}
 };
 export { ResizePlugin };

package/dist/plugins/RowGroupPlugin.js

@@ -50,7 +50,7 @@ const RowGroupPlugin = {
 			return d;
 		},
 		Td: ({ Td: d }, { store: _ }) => (v) => {
-			if (!v.data?.[GROUP]) return createComponent(d, v);
+			if (!v.data?.[GROUP]) return d(v);
 			let { props: y } = useContext(Ctx), b = createMemo(() => _.rowGroup.isExpand(v.data));
 			return createComponent(d, mergeProps(v, { get children() {
 				return memo(() => y.columns?.findIndex((e) => !e[_.internal]) == v.x)() ? (() => {

package/dist/plugins/TreePlugin.js

@@ -1,7 +1,6 @@
 import { useSelector } from "../hooks/useSelector.js";
 import chevron_right_default from "../chevron-right.js";
 import { createComponent, effect, insert, memo, mergeProps, style, template } from "solid-js/web";
-import { combineProps } from "@solid-primitives/props";
 import { createLazyMemo } from "@solid-primitives/memo";
 var _tmpl$ = /* @__PURE__ */ template("<div class=\"flex items-center\">"), _tmpl$2 = /* @__PURE__ */ template("<span style=display:inline-block;width:16px;flex-shrink:0;margin-right:4px>");
 function flattenTree(e, t, n, r, i = 0, a = null, o = [], s = /* @__PURE__ */ new Map()) {
@@ -19,7 +18,7 @@ function flattenTree(e, t, n, r, i = 0, a = null, o = [], s = /* @__PURE__ */ ne
 	};
 }
 const TreePlugin = (c) => {
-	let m = createLazyMemo(() => c.props.columns?.findIndex((e) => !e[c.internal]) ?? -1);
+	let p = createLazyMemo(() => c.props.columns?.findIndex((e) => !e[c.internal]) ?? -1);
 	return {
 		name: "tree",
 		store: (t) => ({
@@ -37,27 +36,30 @@ const TreePlugin = (c) => {
 				let n = t.props.tree.children || "children", r = t.props.rowKey, { flat: i, meta: a } = flattenTree(e, n, r, (e) => t.tree.has(e));
 				return t._treeMeta = a, t._haschildren = Object.values(Object.fromEntries(a)).some((e) => e.hasChildren), i;
 			},
-			Td: ({ Td: e }, { store: c }) => (u) => {
-				let p = () => c.props.rowKey, h = () => c._treeMeta?.get(u.data?.[p()]);
-				return u = combineProps(u, { onDblClick() {
-					h()?.hasChildren && c.tree.toggle(u.data?.[p()]);
-				} }), createComponent(e, mergeProps(u, { get children() {
-					return memo(() => !!(c._haschildren && u.x === m()))() ? (() => {
-						var e = _tmpl$();
-						return insert(e, (() => {
-							var e = memo(() => !!h()?.hasChildren);
-							return () => e() ? createComponent(chevron_right_default, {
-								class: "icon-clickable mr-1",
-								get style() {
-									return `transform: rotate(${c.tree.has(u.data?.[p()]) ? 90 : 0}deg); opacity: .6; flex-shrink: 0; transition: transform .15s`;
-								},
-								onClick: (e) => {
-									e.stopPropagation(), c.tree.toggle(u.data?.[p()]);
-								}
-							}) : _tmpl$2();
-						})(), null), insert(e, () => u.children, null), effect((t) => style(e, `padding-left: ${h()?.depth * 16}px`, t)), e;
-					})() : u.children;
-				} }));
+			Td: ({ Td: e }, { store: c }) => (l) => {
+				let f = () => c.props.rowKey, m = () => c._treeMeta?.get(l.data?.[f()]);
+				return createComponent(e, mergeProps(l, {
+					onDblClick: (e) => {
+						l.onDblClick?.(e), m()?.hasChildren && c.tree.toggle(l.data?.[f()]);
+					},
+					get children() {
+						return memo(() => !!(c._haschildren && l.x === p()))() ? (() => {
+							var e = _tmpl$();
+							return insert(e, (() => {
+								var e = memo(() => !!m()?.hasChildren);
+								return () => e() ? createComponent(chevron_right_default, {
+									class: "icon-clickable mr-1",
+									get style() {
+										return `transform: rotate(${c.tree.has(l.data?.[f()]) ? 90 : 0}deg); opacity: .6; flex-shrink: 0; transition: transform .15s`;
+									},
+									onClick: (e) => {
+										e.stopPropagation(), c.tree.toggle(l.data?.[f()]);
+									}
+								}) : _tmpl$2();
+							})(), null), insert(e, () => l.children, null), effect((t) => style(e, `padding-left: ${m()?.depth * 16}px`, t)), e;
+						})() : l.children;
+					}
+				}));
 			}
 		},
 		commands: (e, { addRows: t }) => ({ addRows(n, r, i = !0) {

package/dist/plugins/ValidatorPlugin.js

@@ -1,6 +1,5 @@
 import { isEmpty } from "../utils.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
-import { combineProps } from "@solid-primitives/props";
 var _tmpl$ = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"mr-1 c-red/75\">*");
 const ValidatorPlugin = {
 	name: "validator",
@@ -55,19 +54,22 @@ const ValidatorPlugin = {
 		}
 	}),
 	rewriteProps: {
-		Td: ({ Td: e }, { store: a }) => (c) => {
-			let l = () => a.cellValidationErrors[c.data[a.props.rowKey]]?.[c.col.id], u = combineProps(c, { get class() {
-				return l() == null ? "" : "is-invalid";
-			} });
-			return createComponent(e, mergeProps(u, { get children() {
-				return [memo(() => c.children), memo(() => memo(() => l() != null)() && (() => {
-					var e = _tmpl$();
-					return insert(e, l), e;
-				})())];
-			} }));
+		Td: ({ Td: e }, { store: a }) => (s) => {
+			let c = () => a.cellValidationErrors[s.data[a.props.rowKey]]?.[s.col.id];
+			return createComponent(e, mergeProps(s, {
+				get class() {
+					return s.class + " " + (c() == null ? "" : "is-invalid");
+				},
+				get children() {
+					return [s.children, memo(() => memo(() => c() != null)() && (() => {
+						var e = _tmpl$();
+						return insert(e, c), e;
+					})())];
+				}
+			}));
 		},
 		Th: ({ Th: e }, { store: n }) => (n) => createComponent(e, mergeProps(n, { get children() {
-			return [memo(() => memo(() => !!n.col.required)() && _tmpl$2()), memo(() => n.children)];
+			return [memo(() => memo(() => !!n.col.required)() && _tmpl$2()), n.children];
 		} }))
 	}
 };

package/dist/plugins/VirtualScrollPlugin.js

@@ -9,10 +9,24 @@ import { defaultRangeExtractor } from "@tanstack/solid-virtual";
 var $ML = Symbol();
 const VirtualScrollPlugin = {
 	name: "virtual-scroll",
+	store: (e) => ({
+		scrollToCell(r, i, a) {
+			r = typeof r == "object" ? e.props.columns.indexOf(r) : r, i = typeof i == "object" ? e.props.data.indexOf(i) : i;
+			let o = e.virtualizerX, s = e.virtualizerY;
+			o.scrollToIndex(r, !0), s.scrollToIndex(i, !0);
+		},
+		scrollCellIfNeeded(r, i, a) {
+			r = typeof r == "object" ? e.props.columns.indexOf(r) : r, i = typeof i == "object" ? e.props.data.indexOf(i) : i;
+			let o = e.virtualizerX, s = e.virtualizerY, c = e.table.querySelector(`[x="${r}"][y="${i}"]`);
+			if (!c) return e.scrollToCell(r, i);
+			let l = c.getBoundingClientRect(), u = e.scroll_el.getBoundingClientRect();
+			(l.top < u.top || l.bottom > u.bottom) && s.scrollToIndex(i, !0), (l.left < u.left || l.right > u.right) && o.scrollToIndex(r, !0);
+		}
+	}),
 	rewriteProps: {
 		virtual: ({ virtual: e }) => defaultsDeep(e, {
-			x: { overscan: 5 },
-			y: { overscan: 10 }
+			x: { overscan: 2 },
+			y: { overscan: 2 }
 		}),
 		Scroll: ({ Scroll: e }, { store: r }) => (r) => (r = combineProps({ class: "virtual" }, r), createComponent(e, r)),
 		Table: ({ Table: r }, { store: o }) => (d) => {