intable 0.0.26 → 0.0.28

package/dist/plugins/FilterPlugin.js

@@ -1,3 +1,4 @@
+import { toArr } from "../utils.js";
 import { normalizeType } from "../components/AndOrFields.js";
 import { Filter } from "../components/Filter.js";
 import { createComponent, memo, mergeProps } from "solid-js/web";
@@ -6,32 +7,41 @@ function isBlank(e) {
 	return e == null || String(e).trim() === "";
 }
 function toNum(e) {
-	let c = Number(e);
-	return Number.isNaN(c) ? null : c;
+	let a = Number(e);
+	return Number.isNaN(a) ? null : a;
 }
 function toDateTs(e) {
 	if (isBlank(e)) return null;
-	let c = new Date(String(e)).getTime();
-	return Number.isNaN(c) ? null : c;
+	let a = new Date(String(e)).getTime();
+	return Number.isNaN(a) ? null : a;
 }
 function toBool(e) {
 	if (typeof e == "boolean") return e;
 	if (typeof e == "number") return e !== 0;
-	let c = String(e ?? "").trim().toLowerCase();
+	let a = String(e ?? "").trim().toLowerCase();
 	return [
 		"1",
 		"true",
 		"yes",
 		"y",
 		"on"
-	].includes(c) ? !0 : [
+	].includes(a) ? !0 : [
 		"0",
 		"false",
 		"no",
 		"n",
 		"off",
 		""
-	].includes(c) ? !1 : !!e;
+	].includes(a) ? !1 : !!e;
+}
+function toList(e) {
+	return Array.isArray(e) ? e : e == null || String(e).trim() === "" ? [] : String(e).split(",").map((e) => e.trim()).filter(Boolean);
+}
+function toPair(e) {
+	if (Array.isArray(e)) return [e[0], e[1]];
+	if (e == null || String(e).trim() === "") return [void 0, void 0];
+	let a = String(e).split(",").map((e) => e.trim());
+	return [a[0], a[1]];
 }
 function isRuleNode(e) {
 	return "field" in e;
@@ -42,76 +52,108 @@ function hasActiveRule(e) {
 function hasActiveTree(e) {
 	return e ? isRuleNode(e) ? hasActiveRule(e) : (e.children ?? []).some(hasActiveTree) : !1;
 }
-function matchFilter(e, c, l) {
-	let u = c.op;
-	if (u === "blank") return isBlank(e);
-	if (u === "noblank") return !isBlank(e);
-	if (u === "true") return toBool(e);
-	if (u === "false") return !toBool(e);
-	let d = c.value;
-	if (l === "number") {
-		let c = toNum(e), l = toNum(d);
-		if (c == null || l == null) return !1;
-		if (u === "eq") return c === l;
-		if (u === "lt") return c < l;
-		if (u === "gt") return c > l;
-		if (u === "lte") return c <= l;
-		if (u === "gte") return c >= l;
+function matchFilter(e, a, o) {
+	let s = a.op;
+	if (s === "blank") return isBlank(e);
+	if (s === "noblank") return !isBlank(e);
+	if (s === "true") return toBool(e);
+	if (s === "false") return !toBool(e);
+	let c = a.value;
+	if (o === "number") {
+		let a = toNum(e), o = toNum(c), l = toList(c).map(toNum).filter((e) => e != null), [u, d] = toPair(c), p = toNum(u), m = toNum(d);
+		if (a == null) return !1;
+		if (s === "eq") return a === o;
+		if (s === "ne") return a !== o;
+		if (s === "in") return l.includes(a);
+		if (s === "not_in") return !l.includes(a);
+		if (s === "between") return p != null && m != null && a >= Math.min(p, m) && a <= Math.max(p, m);
+		if (s === "not_between") return p != null && m != null && (a < Math.min(p, m) || a > Math.max(p, m));
+		if (o == null) return !1;
+		if (s === "lt") return a < o;
+		if (s === "gt") return a > o;
+		if (s === "lte") return a <= o;
+		if (s === "gte") return a >= o;
 	}
-	if (l === "date") {
-		let c = toDateTs(e), l = toDateTs(d);
-		if (c == null || l == null) return !1;
-		if (u === "eq") return c === l;
-		if (u === "lt") return c < l;
-		if (u === "gt") return c > l;
-		if (u === "lte") return c <= l;
-		if (u === "gte") return c >= l;
+	if (o === "date") {
+		let a = toDateTs(e), o = toDateTs(c), l = toList(c).map(toDateTs).filter((e) => e != null), [u, d] = toPair(c), f = toDateTs(u), m = toDateTs(d);
+		if (a == null) return !1;
+		if (s === "eq") return a === o;
+		if (s === "ne") return a !== o;
+		if (s === "in") return l.includes(a);
+		if (s === "not_in") return !l.includes(a);
+		if (s === "between") return f != null && m != null && a >= Math.min(f, m) && a <= Math.max(f, m);
+		if (s === "not_between") return f != null && m != null && (a < Math.min(f, m) || a > Math.max(f, m));
+		if (o == null) return !1;
+		if (s === "lt") return a < o;
+		if (s === "gt") return a > o;
+		if (s === "lte") return a <= o;
+		if (s === "gte") return a >= o;
 	}
-	let f = String(e ?? "").toLowerCase(), g = String(d ?? "").toLowerCase();
-	return u === "eq" ? f === g : u === "neq" ? f !== g : u === "startwith" ? f.startsWith(g) : u === "endwith" ? f.endsWith(g) : f.includes(g);
+	let l = String(e ?? "").toLowerCase(), u = String(c ?? "").toLowerCase(), h = toList(c).map((e) => String(e).toLowerCase()), [g, _] = toPair(c), v = String(g ?? "").toLowerCase(), y = String(_ ?? "").toLowerCase();
+	return s === "eq" ? l === u : s === "ne" ? l !== u : s === "in" ? h.includes(l) : s === "not_in" ? !h.includes(l) : s === "between" ? v !== "" && y !== "" && l >= (v < y ? v : y) && l <= (v < y ? y : v) : s === "not_between" ? v !== "" && y !== "" && (l < (v < y ? v : y) || l > (v < y ? y : v)) : s === "startwith" ? l.startsWith(u) : s === "endwith" ? l.endsWith(u) : l.includes(u);
 }
-function evaluateFilterTree(e, c, l) {
-	if (isRuleNode(c)) return hasActiveRule(c) ? matchFilter(e, c, l) : !0;
-	let u = (c.children ?? []).filter(hasActiveTree);
-	return u.length ? c.op === "or" ? u.some((c) => evaluateFilterTree(e, c, l)) : u.every((c) => evaluateFilterTree(e, c, l)) : !0;
+function evaluateFilterTree(e, a, o) {
+	if (isRuleNode(a)) return hasActiveRule(a) ? matchFilter(e, a, o) : !0;
+	let s = (a.children ?? []).filter(hasActiveTree);
+	return s.length ? a.op === "or" ? s.some((a) => evaluateFilterTree(e, a, o)) : s.every((a) => evaluateFilterTree(e, a, o)) : !0;
 }
-function passesFilters(c, l, u, d) {
-	return u.every((u) => {
-		if (u[d] || !u.filterable) return !0;
-		let f = l[u.id];
-		return !f || !hasActiveTree(f) ? !0 : evaluateFilterTree(c[u.id], f, normalizeType(u));
+function passesFilters(e, o, s, c) {
+	return s.every((s) => {
+		if (s[c] || !s.filterable) return !0;
+		let l = o[s.id];
+		return !l || !hasActiveTree(l) ? !0 : evaluateFilterTree(e[s.id], l, normalizeType(s));
 	});
 }
 const FilterPlugin = {
 	name: "filter",
 	store: () => ({ filters: {} }),
 	rewriteProps: {
-		filter: ({ filter: e }, { store: c }) => ({
+		filter: ({ filter: e }) => ({
 			autoMatch: !0,
 			...e
 		}),
-		data: ({ data: e }, { store: c }) => {
+		newRow: ({ newRow: a }, { store: o }) => function(...s) {
+			let c = a(...s), { filters: l, props: u } = o, { columns: d } = u;
+			return d.forEach((a) => {
+				if (a[o.internal] || !a.filterable) return;
+				let s = l[a.id];
+				s && isRuleNode(s) && (c[a.id] = {
+					ne: `not ${s.value}`,
+					between: toArr(s.value)[0],
+					not_between: NaN,
+					in: toArr(s.value)[0],
+					not_in: "",
+					lt: s.value - 1,
+					gt: s.value + 1,
+					blank: "",
+					noblank: "default",
+					true: !0,
+					false: !1
+				}[s.op] ?? s.value);
+			}), c;
+		},
+		data: ({ data: e }, { store: a }) => {
 			if (!e) return e;
-			let { filters: l } = c, { columns: u, filter: d } = c.props;
-			return !d.autoMatch || !Object.values(l).some(hasActiveTree) ? e : e.filter((e) => passesFilters(e, l, u, c.internal));
+			let { filters: o } = a, { columns: s, filter: c } = a.props;
+			return !c.autoMatch || !Object.values(o).some(hasActiveTree) ? e : e.filter((e) => passesFilters(e, o, s, a.internal));
 		},
-		Th: ({ Th: e }, { store: p }) => (m) => {
-			let h = () => !!m.col.filterable && !m.col[p.internal];
-			return createComponent(e, mergeProps(m, { get children() {
-				return [memo(() => m.children), createComponent(Show, {
+		Th: ({ Th: e }, { store: a }) => (d) => {
+			let f = () => !!d.col.filterable && !d.col[a.internal];
+			return createComponent(e, mergeProps(d, { get children() {
+				return [memo(() => d.children), createComponent(Show, {
 					get when() {
-						return h();
+						return f();
 					},
 					get children() {
 						return createComponent(Filter, {
 							get col() {
-								return m.col;
+								return d.col;
 							},
 							get tree() {
-								return p.filters[m.col.id];
+								return a.filters[d.col.id];
 							},
 							setTree: (e) => {
-								e ? p.filters[m.col.id] = e : delete p.filters[m.col.id], p.props.filter?.onChange?.(Object.values(p.filters));
+								e ? a.filters[d.col.id] = e : delete a.filters[d.col.id], a.props.filter?.onChange?.(Object.values(a.filters));
 							}
 						});
 					}

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, { header: 1 });
+			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/LoadMorePlugin.js

@@ -28,7 +28,7 @@ const LoadMorePlugin = {
 	rewriteProps: {
 		loadMore: ({ loadMore: e }, { store: o }) => ({
 			enable: !1,
-			threshold: 40,
+			threshold: 100,
 			debounce: 200,
 			...e
 		}),

package/dist/plugins/MenuPlugin.d.ts

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

package/dist/plugins/MenuPlugin.js

@@ -82,6 +82,13 @@ const MenuPlugin = {
 			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));
 		},
+		rowsChange(r) {
+			let i = [...e.rawProps.data || []];
+			r.forEach((r) => {
+				let a = e.commands.rowIndexOf(i, r);
+				a > -1 && (i[a] = r);
+			}), e.props.onDataChange?.(i);
+		},
 		addRows(r, i, a = !0) {
 			addRows(e, r, i, a);
 		},

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) => {