intable 0.0.29 → 0.0.30

package/dist/plugins/AutoFillPlugin.js

@@ -0,0 +1,132 @@
+import { usePointerDrag } from "../hooks/index.js";
+import { delegateEvents, effect, style, template, use } from "solid-js/web";
+import { createMemo, createSignal } from "solid-js";
+import { createScrollPosition } from "@solid-primitives/scroll";
+var _tmpl$ = /* @__PURE__ */ template("<div>"), _tmpl$2 = /* @__PURE__ */ template("<div title=\"Drag to fill\">");
+function inferFill(e, t, n = 1) {
+	if (!e.length) return Array(t).fill(null);
+	let r = e.map((e) => typeof e == "number" ? e : Number(e));
+	if (r.every(isFinite)) {
+		let i = e.length > 1 ? r.at(-1) - r.at(-2) : 1, a = n === 1 ? r.at(-1) : r[0];
+		return Array.from({ length: t }, (e, r) => +(n === 1 ? a + i * (r + 1) : a - i * (t - r)).toFixed(10));
+	}
+	if (e.every((e) => typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e))) {
+		let r = e.map((e) => new Date(e).getTime());
+		if (r.every(isFinite)) {
+			let e = r.length > 1 ? r.at(-1) - r.at(-2) : 864e5, i = n === 1 ? r.at(-1) : r[0];
+			return Array.from({ length: t }, (r, a) => new Date(n === 1 ? i + e * (a + 1) : i - e * (t - a)).toISOString().slice(0, 10));
+		}
+	}
+	return Array.from({ length: t }, (t, n) => e[n % e.length]);
+}
+function applyFill(e, t, n, r, i) {
+	let { internal: a } = i, { data: o, columns: s } = i.props, c = r > 0 ? 1 : -1, l = Math.abs(r), u = /* @__PURE__ */ new Map(), f = (e) => (u.has(e) || u.set(e, { ...o[e] }), u.get(e)), p, m;
+	if (n === "v") {
+		let n = o.slice(t[0], t[1] + 1);
+		for (let r = e[0]; r <= e[1] && r < s.length; r++) {
+			let e = s[r];
+			if (!e || e[a]) continue;
+			let i = inferFill(n.map((t) => t[e.id]), l, c);
+			for (let n = 0; n < l; n++) {
+				let r = c === 1 ? t[1] + 1 + n : t[0] - l + n;
+				r >= 0 && r < o.length && (f(r)[e.id] = i[n]);
+			}
+		}
+		p = [e[0], c === 1 ? t[0] : Math.max(t[0] - l, 0)], m = [e[1], c === 1 ? Math.min(t[1] + l, o.length - 1) : t[1]];
+	} else {
+		for (let n = t[0]; n <= t[1] && n < o.length; n++) {
+			let t = s.slice(e[0], e[1] + 1).filter((e) => e && !e[a]).map((e) => o[n][e.id]), r = inferFill(t, l, c);
+			for (let t = 0; t < l; t++) {
+				let i = c === 1 ? e[1] + 1 + t : e[0] - l + t;
+				if (i < 0 || i >= s.length) continue;
+				let o = s[i];
+				o && !o[a] && (f(n)[o.id] = r[t]);
+			}
+		}
+		p = [c === 1 ? e[0] : Math.max(e[0] - l, 0), t[0]], m = [c === 1 ? Math.min(e[1] + l, s.length - 1) : e[1], t[1]];
+	}
+	return {
+		rowsMap: u,
+		newStart: p,
+		newEnd: m
+	};
+}
+const AutoFillPlugin = {
+	name: "auto-fill",
+	layers: [(t) => {
+		let i = createScrollPosition(() => t.scroll_el), d = createMemo(() => {
+			let { start: e, end: n } = t.selected ?? {};
+			if (!e?.length || !n?.length) return null;
+			let r = [e[0], n[0]].sort((e, t) => e - t), i = [e[1], n[1]].sort((e, t) => e - t);
+			return Number.isFinite(r[1]) && Number.isFinite(i[1]) ? {
+				xs: r,
+				ys: i
+			} : null;
+		}), p = createMemo(() => {
+			let e = t.thSizes ?? [], n = t.trSizes ?? [], r = e[0]?.height ?? 30, a = i.x, o = i.y, s = (t) => e.slice(0, t).reduce((e, t) => e + (t?.width ?? 0), 0) - a, c = (t) => s(t) + (e[t]?.width ?? 0), l = (e) => r + n.slice(0, e).reduce((e, t) => e + (t?.height ?? 28), 0) - o;
+			return {
+				colX: s,
+				colR: c,
+				rowY: l,
+				rowB: (e) => l(e) + (n[e]?.height ?? 28)
+			};
+		}), m = createMemo(() => {
+			let e = t.props.autoFill;
+			return e === !0 || e?.enable === !0;
+		}), h = createMemo(() => {
+			if (!m()) return "display:none;position:absolute";
+			let e = d();
+			if (!e) return "display:none;position:absolute";
+			let { colR: t, rowB: n } = p(), r = t(e.xs[1]), i = n(e.ys[1]);
+			return `position:absolute;left:${r - 4}px;top:${i - 4}px;width:8px;height:8px;background:var(--c-primary);border:2px solid var(--table-bg);border-radius:1px;box-shadow:0 0 0 1px var(--c-primary);z-index:3;cursor:crosshair`;
+		}), [g, _] = createSignal(null), v = createMemo(() => {
+			let e = g(), n = d();
+			if (!e || !n || !e.delta) return "display:none;position:absolute";
+			let { xs: r, ys: i } = n, { colX: a, colR: o, rowY: s, rowB: c } = p(), l = e.delta > 0 ? 1 : -1, u = Math.abs(e.delta), f = t.props.data.length, m = t.props.columns.length, h, _, v, y;
+			e.axis === "v" ? (h = a(r[0]), v = o(r[1]), [_, y] = l > 0 ? [c(i[1]), c(Math.min(i[1] + u, f - 1))] : [s(Math.max(i[0] - u, 0)), s(i[0])]) : (_ = s(i[0]), y = c(i[1]), [h, v] = l > 0 ? [o(r[1]), o(Math.min(r[1] + u, m - 1))] : [a(Math.max(r[0] - u, 0)), a(r[0])]);
+			let b = v - h, x = y - _;
+			return b <= 0 || x <= 0 ? "display:none;position:absolute" : `position:absolute;left:${h}px;top:${_}px;width:${b}px;height:${x}px;border:1.5px dashed var(--c-primary);background:rgba(99,102,241,0.08);pointer-events:none;z-index:3`;
+		}), y, b = (e, n, r, i) => {
+			let { rowsMap: a, newStart: o, newEnd: s } = applyFill(e, n, r, i, t);
+			a.size && (t.commands.rowsChange([...a.values()]), t.selected.start = o, t.selected.end = s);
+		}, x = (e) => {
+			e.stopPropagation();
+			let n = d();
+			if (!n) return;
+			let { xs: r, ys: i } = n, { data: a, columns: o } = t.props, s = r[0] > 0 ? r[0] - 1 : r[1] < o.length - 1 ? r[1] + 1 : -1, c = a.length - 1;
+			if (s >= 0) {
+				let e = o[s];
+				if (e && !e[t.internal]) for (let t = i[1] + 1; t < a.length; t++) {
+					let n = a[t][e.id];
+					if (n != null && n !== "") c = t;
+					else break;
+				}
+			}
+			b(r, i, "v", c - i[1]);
+		};
+		return usePointerDrag(() => y, { start(e, n, r) {
+			e.stopPropagation(), e.preventDefault();
+			let i = d();
+			if (!i) return;
+			let { xs: a, ys: o } = i, s = 0, c = "v";
+			n((e, { ox: n, oy: r }) => {
+				Math.abs(r) >= Math.abs(n) ? (c = "v", s = Math.round(r / (t.trSizes?.[o[1]]?.height ?? 28))) : (c = "h", s = Math.round(n / (t.thSizes?.[a[1]]?.width ?? 100))), _(s ? {
+					axis: c,
+					delta: s
+				} : null);
+			}), r(() => {
+				_(null), b(a, o, c, s);
+			});
+		} }), [(() => {
+			var e = _tmpl$();
+			return effect((t) => style(e, v(), t)), e;
+		})(), (() => {
+			var e = _tmpl$2();
+			e.$$dblclick = x;
+			var t = y;
+			return typeof t == "function" ? use(t, e) : y = e, effect((t) => style(e, h() + ";pointer-events:auto", t)), e;
+		})()];
+	}]
+};
+delegateEvents(["dblclick"]);
+export { AutoFillPlugin };

package/dist/plugins/ColumnVisibilityPlugin.d.ts

@@ -0,0 +1,16 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        columnVisibility?: {
+            /** Column IDs (string or number) to hide on initial render. */
+            defaultHidden?: (string | number)[];
+            /** Called whenever the hidden column list changes. */
+            onChange?: (hiddenIds: string[]) => void;
+        };
+    }
+    interface TableStore {
+        /** O(1) set of currently hidden column IDs (as strings). Mutate directly. */
+        hiddenCols: Record<string, true | undefined>;
+    }
+}
+export declare const ColumnVisibilityPlugin: Plugin;

package/dist/plugins/ColumnVisibilityPlugin.js

@@ -0,0 +1,60 @@
+import { Popover } from "../components/Popover.js";
+import { createComponent, delegateEvents, effect, insert, template } from "solid-js/web";
+import { For, Show } from "solid-js";
+import { offset } from "@floating-ui/dom";
+var _tmpl$ = /* @__PURE__ */ template("<div style=position:absolute;top:4px;right:4px;z-index:100;pointer-events:auto>"), _tmpl$2 = /* @__PURE__ */ template("<button class=\"flex items-center justify-center w-6.5 h-6.5 rd-1 shadow-sm b-(1 solid var(--table-b-c)) cursor-pointer bg-[--table-header-bg]\"title=\"Column Visibility\"><svg viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=2 class=\"w-3.5 h-3.5\"><path stroke-linecap=round stroke-linejoin=round d=\"M4 6h16M4 12h16M4 18h7\">"), _tmpl$3 = /* @__PURE__ */ template("<div class=\"rd-1.5 shadow-xl py-1 min-w-44 bg-[--table-header-bg]\"style=\"border:1px solid var(--table-b-c);z-index:101\"><div class=\"flex items-center justify-between px-3 py-1.5\"style=\"border-bottom:1px solid var(--table-b-c)\"><span class=\"text-xs font-semibold uppercase tracking-wide\"style=color:var(--table-c)>Columns</span><button class=\"text-xs cursor-pointer hover:underline c-[--c-primary]\"></button></div><div class=\"max-h-60 of-y-auto\">"), _tmpl$4 = /* @__PURE__ */ template("<span class=text-xs style=opacity:0.6>hidden"), _tmpl$5 = /* @__PURE__ */ template("<label class=\"flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer select-none hover:bg-[--li-hover-bg]\"><input type=checkbox class=\"w-3.5 h-3.5 cursor-pointer\"><span class=\"truncate flex-1\">");
+const ColumnVisibilityPlugin = {
+	name: "column-visibility",
+	store: (e) => {
+		let s = {};
+		return (e.rawProps.columnVisibility?.defaultHidden ?? []).forEach((e) => {
+			s[String(e)] = !0;
+		}), { hiddenCols: s };
+	},
+	rewriteProps: { columns: ({ columns: e }, { store: s }) => (e ?? []).filter((e) => !s.hiddenCols[String(e.id)]) },
+	layers: [(c) => {
+		let l = () => (c.rawProps.columns ?? []).filter((e) => !e[c.internal]), m = (e) => !!c.hiddenCols[e], h = () => c.rawProps.columnVisibility?.onChange?.(Object.keys(c.hiddenCols).filter((e) => !!c.hiddenCols[e])), g = (e) => {
+			m(e) ? delete c.hiddenCols[e] : c.hiddenCols[e] = !0, h();
+		}, _ = () => l().every((e) => m(String(e.id))), v = () => {
+			_() ? l().forEach((e) => delete c.hiddenCols[String(e.id)]) : l().forEach((e) => {
+				c.hiddenCols[String(e.id)] = !0;
+			}), h();
+		};
+		return (() => {
+			var c = _tmpl$();
+			return insert(c, createComponent(Popover, {
+				trigger: "click",
+				placement: "bottom-end",
+				get middleware() {
+					return [offset({ mainAxis: 4 })];
+				},
+				get reference() {
+					return _tmpl$2();
+				},
+				get floating() {
+					return (() => {
+						var e = _tmpl$3(), c = e.firstChild, d = c.firstChild, f = d.nextSibling, p = c.nextSibling;
+						return f.$$click = v, insert(f, () => _() ? "Show all" : "Hide all"), insert(p, createComponent(For, {
+							get each() {
+								return l();
+							},
+							children: (e) => (() => {
+								var c = _tmpl$5(), l = c.firstChild, u = l.nextSibling;
+								return l.addEventListener("change", () => g(e.id)), insert(u, () => e.name ?? e.id), insert(c, createComponent(Show, {
+									get when() {
+										return m(e.id);
+									},
+									get children() {
+										return _tmpl$4();
+									}
+								}), null), effect(() => l.checked = !m(e.id)), c;
+							})()
+						})), e;
+					})();
+				}
+			})), c;
+		})();
+	}]
+};
+delegateEvents(["click"]);
+export { ColumnVisibilityPlugin };

package/dist/plugins/MenuPlugin.js

@@ -2,9 +2,8 @@ import { useMemoAsync } from "../hooks/index.js";
 import { findParent } from "../tree.js";
 import "../utils.js";
 import { Menu } from "../components/Menu.js";
-import { createComponent, memo, mergeProps } from "solid-js/web";
+import { createComponent, memo } from "solid-js/web";
 import { batch, createMemo, createSignal, mapArray } from "solid-js";
-import { combineProps } from "@solid-primitives/props";
 import { delay, range, remove } from "es-toolkit";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { autoPlacement, computePosition } from "@floating-ui/dom";
@@ -12,50 +11,47 @@ const MenuPlugin = {
 	name: "menu",
 	priority: Infinity,
 	store: (e) => ({}),
-	rewriteProps: { Table: ({ Table: r }, { store: c }) => (p) => {
-		let [m, h] = createSignal(), _ = mapArray(() => c.plugins || [], (e) => createMemo(() => e.menus?.(c))), v = createMemo(() => _().flatMap((e) => e() || [])), [y, b] = createSignal();
-		function x(e) {
-			e.preventDefault(), c.table.contains(e.target) && b({
+	layers: [(t) => {
+		let [a, l] = createSignal(), u = mapArray(() => t.plugins || [], (e) => createMemo(() => e.menus?.(t))), d = createMemo(() => u().flatMap((e) => e() || [])), [h, g] = createSignal();
+		createEventListener(() => t.table, "contextmenu", _);
+		function _(e) {
+			e.preventDefault(), t.table.contains(e.target) && g({
 				x: e.x,
 				y: e.y
 			});
 		}
 		createEventListener(document, "pointerdown", (e) => {
-			m()?.contains(e.target) || b();
+			a()?.contains(e.target) || g();
 		});
-		let S = useMemoAsync(() => {
-			let e = m();
-			if (e) return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(y()) }, e, {
+		let v = useMemoAsync(() => {
+			let e = a();
+			if (e) return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(h()) }, e, {
 				strategy: "fixed",
 				placement: "top-start",
 				middleware: [autoPlacement({
 					boundary: document.body,
 					alignment: "start"
 				})]
-			}).then(({ x: e, y: r }) => ({
+			}).then(({ x: e, y: t }) => ({
 				position: "fixed",
-				transform: `translate(${e}px, ${r}px)`,
+				transform: `translate(${e}px, ${t}px)`,
 				top: 0,
 				left: 0,
 				"z-index": 10
 			}));
 		});
-		return p = combineProps({
-			tabindex: -1,
-			onContextMenu: x
-		}, p), createComponent(r, mergeProps(p, { get children() {
-			return [memo(() => memo(() => !!y())() && createComponent(Menu, {
-				ref: h,
-				get style() {
-					return S() || "position: fixed";
-				},
-				get items() {
-					return v();
-				},
-				onAction: () => b()
-			})), memo(() => p.children)];
-		} }));
-	} },
+		return memo(() => memo(() => !!h())() && createComponent(Menu, {
+			ref: l,
+			class: "pointer-events-auto",
+			get style() {
+				return v() || "position: fixed";
+			},
+			get items() {
+				return d();
+			},
+			onAction: () => g()
+		}));
+	}],
 	menus: (e) => [
 		{
 			label: "新增行 ↑",
@@ -67,74 +63,74 @@ const MenuPlugin = {
 		},
 		{
 			label: "删除行",
-			cb: () => e.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([e.selected.start[1], e.selected.end[1]].sort((e, r) => e - r))))
+			cb: () => e.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([e.selected.start[1], e.selected.end[1]].sort((e, t) => e - t))))
 		}
 	],
 	commands: (e) => ({
-		rowEquals(r, i) {
-			let a = e.props.rowKey;
-			return r == i || a != null && r?.[a] == i?.[a];
+		rowEquals(t, n) {
+			let r = e.props.rowKey;
+			return t == n || r != null && t?.[r] == n?.[r];
 		},
-		rowIndexOf(r, i) {
-			return r.findIndex((r) => e.commands.rowEquals(r, i));
+		rowIndexOf(t, n) {
+			return t.findIndex((t) => e.commands.rowEquals(t, n));
 		},
-		rowChange(r) {
-			let i = [...e.rawProps.data || []], a = e.commands.rowIndexOf(i, r);
-			a > -1 && (i[a] = r, e.props.onDataChange?.(i));
+		rowChange(t) {
+			let n = [...e.rawProps.data || []], r = e.commands.rowIndexOf(n, t);
+			r > -1 && (n[r] = t, e.props.onDataChange?.(n));
 		},
-		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);
+		rowsChange(t) {
+			let n = [...e.rawProps.data || []];
+			t.forEach((t) => {
+				let r = e.commands.rowIndexOf(n, t);
+				r > -1 && (n[r] = t);
+			}), e.props.onDataChange?.(n);
 		},
-		addRows(r, i, a = !0) {
-			addRows(e, r, i, a);
+		addRows(t, n, r = !0) {
+			addRows(e, t, n, r);
 		},
-		deleteRows(r) {
-			let { rowKey: i, data: a } = e.props, o = [...e.rawProps.data || []], s = new Set(r.map((e) => a[e]));
-			remove(o, (e) => s.has(e)), e.props?.onDataChange?.(o);
+		deleteRows(t) {
+			let { rowKey: n, data: r } = e.props, i = [...e.rawProps.data || []], a = new Set(t.map((e) => r[e]));
+			remove(i, (e) => a.has(e)), e.props?.onDataChange?.(i);
 		},
-		moveRows(i, a) {
-			let { data: o } = e.props, s = i.map((e) => o[e]).filter((r) => r && !r?.[e.internal]);
-			if (!s.length) return;
-			let c = a >= 0 && a < o.length ? o[a] : null, { rowKey: l } = e.props, u = e.props.tree?.children || Symbol(), d = new Set(s.map((e) => e[l])), f = [];
-			function p(e) {
-				return e.reduce((e, r) => {
-					if (d.has(r[l])) return f.push(r), e;
-					if (Array.isArray(r[u]) && r[u].length) {
-						let e = p(r[u]);
-						r = e.length === r[u].length ? r : {
-							...r,
-							[u]: e
+		moveRows(n, r) {
+			let { data: i } = e.props, a = n.map((e) => i[e]).filter((t) => t && !t?.[e.internal]);
+			if (!a.length) return;
+			let o = r >= 0 && r < i.length ? i[r] : null, { rowKey: s } = e.props, c = e.props.tree?.children || Symbol(), l = new Set(a.map((e) => e[s])), u = [];
+			function d(e) {
+				return e.reduce((e, t) => {
+					if (l.has(t[s])) return u.push(t), e;
+					if (Array.isArray(t[c]) && t[c].length) {
+						let e = d(t[c]);
+						t = e.length === t[c].length ? t : {
+							...t,
+							[c]: e
 						};
 					}
-					return e.push(r), e;
+					return e.push(t), e;
 				}, []);
 			}
-			let m = p([...e.rawProps.data || []]), h = findParent(m, (e) => e[l] === c?.[l])?.children ?? m, g = c ? h.findIndex((e) => e[l] === c[l]) : -1;
-			if (g > -1 ? h.splice(g, 0, f) : h.push(...f), e.selected) {
-				let r = Math.max(0, a - s.length);
-				e.selected.start = [0, r], e.selected.end = [Infinity, r + f.length - 1];
+			let f = d([...e.rawProps.data || []]), p = findParent(f, (e) => e[s] === o?.[s])?.children ?? f, m = o ? p.findIndex((e) => e[s] === o[s]) : -1;
+			if (m > -1 ? p.splice(m, 0, u) : p.push(...u), e.selected) {
+				let t = Math.max(0, r - a.length);
+				e.selected.start = [0, t], e.selected.end = [Infinity, t + u.length - 1];
 			}
-			e.props?.onDataChange?.(m);
+			e.props?.onDataChange?.(f);
 		}
 	})
 };
-function addRows(e, r, i, a) {
-	let { data: o } = e.props, s = (r) => {
-		for (a = !1; --r >= 0 && o[r]?.[e.internal];);
-		return r >= 0 ? o[r] : null;
-	}, l = (r) => {
-		for (a = !0; ++r < o.length && o[r]?.[e.internal];);
-		return r < o.length ? o[r] : null;
-	}, u = o[r]?.[e.internal] ? a ? s(r) || l(r) : l(r) || s(r) : o[r];
-	u && batch(() => {
-		r = e.commands.rowIndexOf(o, u), e.selected && (e.selected.start = [0, r + (a ? 0 : 1)], e.selected.end = [Infinity, r + i.length - 1 + (a ? 0 : 1)]);
+function addRows(e, t, n, r) {
+	let { data: i } = e.props, o = (t) => {
+		for (r = !1; --t >= 0 && i[t]?.[e.internal];);
+		return t >= 0 ? i[t] : null;
+	}, s = (t) => {
+		for (r = !0; ++t < i.length && i[t]?.[e.internal];);
+		return t < i.length ? i[t] : null;
+	}, c = i[t]?.[e.internal] ? r ? o(t) || s(t) : s(t) || o(t) : i[t];
+	c && batch(() => {
+		t = e.commands.rowIndexOf(i, c), e.selected && (e.selected.start = [0, t + (r ? 0 : 1)], e.selected.end = [Infinity, t + n.length - 1 + (r ? 0 : 1)]);
 	}), (() => {
-		let r = [...e.rawProps.data || []], o = u ? e.commands.rowIndexOf(r, u) + (a ? 0 : 1) : r.length;
-		r.splice(o, 0, ...i), e.props?.onDataChange?.(r);
+		let t = [...e.rawProps.data || []], i = c ? e.commands.rowIndexOf(t, c) + (r ? 0 : 1) : t.length;
+		t.splice(i, 0, ...n), e.props?.onDataChange?.(t);
 	})(), delay(0).then(() => {
 		e.scrollCellIfNeeded(e.selected.start[0], e.selected.start[1]);
 	});

package/dist/plugins/RenderPlugin/index.js

@@ -1,6 +1,6 @@
+import { renderComponent, solidComponent } from "../../components/utils.js";
 import { resolveOptions, toArr } from "../../utils.js";
 import { Checkbox, Files } from "./components.js";
-import { renderComponent, solidComponent } from "../../components/utils.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { mergeProps as mergeProps$1 } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template("<div class=\"flex items-center h-full\">");
@@ -8,24 +8,24 @@ const RenderPlugin = {
 	name: "render",
 	priority: -Infinity,
 	store: () => ({ renders: { ...renders } }),
-	rewriteProps: { Td: ({ Td: e }, { store: m }) => (h) => createComponent(e, mergeProps(h, { get children() {
+	rewriteProps: { Td: ({ Td: p }, { store: m }) => (h) => createComponent(p, mergeProps(h, { get children() {
 		return (() => {
-			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({
+			let p = ((e) => typeof e == "string" ? m.renders[e] : e)(h.col.render ?? h.col.type) || text;
+			return renderComponent(p, mergeProps$1(h, { onChange: (e) => m.commands.rowChange({
 				...h.data,
 				[h.col.id]: e
 			}) }), m);
 		})();
 	} })) }
 };
-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);
+var text = (e) => memo(() => memo(() => !!e.col.enum)() ? toArr(e.value).map((p) => resolveOptions(e.col.enum).find((e) => e.value == p)?.label ?? p).join(", ") : e.value);
 const renders = {
 	text,
 	number: text,
 	date: text,
 	checkbox: (e) => (() => {
-		var m = _tmpl$();
-		return insert(m, createComponent(Checkbox, {
+		var p = _tmpl$();
+		return insert(p, createComponent(Checkbox, {
 			class: "",
 			get value() {
 				return e.value;
@@ -33,7 +33,7 @@ const renders = {
 			get onChange() {
 				return e.onChange;
 			}
-		})), m;
+		})), p;
 	})(),
 	file: (e) => createComponent(Files, {
 		get value() {

package/dist/plugins/RowSelectionPlugin.js

@@ -1,5 +1,5 @@
-import { Checkbox } from "./RenderPlugin/components.js";
 import { solidComponent } from "../components/utils.js";
+import { Checkbox } from "./RenderPlugin/components.js";
 import { useSelector } from "../hooks/useSelector.js";
 import { createComponent, insert, template } from "solid-js/web";
 import { mergeProps as mergeProps$1 } from "solid-js";
@@ -15,16 +15,16 @@ const RowSelectionPlugin = {
 		class: "row-selection",
 		width: 45,
 		resizable: !1,
-		render: solidComponent((s) => (() => {
+		render: solidComponent((e) => (() => {
 			var l = _tmpl$();
 			return insert(l, createComponent(Checkbox, {
 				style: "position: absolute",
 				get value() {
-					return c.commands.rowSelector.has(s.data);
+					return c.commands.rowSelector.has(e.data);
 				},
-				onChange: (e) => e ? c.commands.rowSelector.add(s.data) : c.commands.rowSelector.del(s.data),
+				onChange: (s) => s ? c.commands.rowSelector.add(e.data) : c.commands.rowSelector.del(e.data),
 				get disabled() {
-					return !c.props?.rowSelection?.selectable?.(s.data);
+					return !c.props?.rowSelection?.selectable?.(e.data);
 				}
 			})), l;
 		})())

package/dist/plugins/SortPlugin.d.ts

@@ -0,0 +1,36 @@
+import { type Plugin } from '..';
+export type SortOrder = 'asc' | 'desc';
+export interface SortKey {
+    field: string;
+    order: SortOrder;
+}
+declare module '../index' {
+    interface TableProps {
+        sort?: {
+            /**
+             * Allow sorting by multiple columns simultaneously.
+             * @default false
+             */
+            multiple?: boolean;
+            /**
+             * Set to false to disable client-side sorting (e.g. server-side sorting).
+             * `onChange` is still called so you can refresh data yourself.
+             * @default true
+             */
+            autoSort?: boolean;
+            /** Called whenever sort keys change. */
+            onChange?: (sorts: SortKey[]) => void;
+        };
+    }
+    interface TableColumn {
+        /** Enable sort toggle on this column header. */
+        sortable?: boolean;
+        /** Custom comparator for this column. Return negative / 0 / positive. */
+        sortComparator?: (a: any, b: any) => number;
+    }
+    interface TableStore {
+        /** Current sort state. Read to render indicators; mutate to programmatically set sort. */
+        sortKeys: SortKey[];
+    }
+}
+export declare const SortPlugin: Plugin;

package/dist/plugins/SortPlugin.js

@@ -0,0 +1,93 @@
+import { createComponent, insert, mergeProps, template } from "solid-js/web";
+import { Show } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+var _tmpl$ = /* @__PURE__ */ template("<svg viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=2 class=\"w-3.5 h-3.5 opacity-50 shrink-0 flex-none\"><path stroke-linecap=round stroke-linejoin=round d=\"M8 9l4-4 4 4M16 15l-4 4-4-4\">"), _tmpl$2 = /* @__PURE__ */ template("<svg viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=2.5 class=\"w-3.5 h-3.5 shrink-0 flex-none\"style=color:var(--c-primary,#6366f1)><path stroke-linecap=round stroke-linejoin=round d=\"M5 15l7-7 7 7\">"), _tmpl$3 = /* @__PURE__ */ template("<svg viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=2.5 class=\"w-3.5 h-3.5 shrink-0 flex-none\"style=color:var(--c-primary,#6366f1)><path stroke-linecap=round stroke-linejoin=round d=\"M19 9l-7 7-7-7\">"), _tmpl$4 = /* @__PURE__ */ template("<div class=\"flex items-center w-full\">");
+function compareValues(e, o) {
+	if (e == null && o == null) return 0;
+	if (e == null) return -1;
+	if (o == null) return 1;
+	let s = Number(e), c = Number(o);
+	if (!Number.isNaN(s) && !Number.isNaN(c)) return s - c;
+	if (typeof e == "string" && typeof o == "string") {
+		let s = Date.parse(e), c = Date.parse(o);
+		if (!Number.isNaN(s) && !Number.isNaN(c) && s !== c) return s - c;
+	}
+	return typeof e == "boolean" && typeof o == "boolean" ? Number(e) - Number(o) : String(e).localeCompare(String(o), void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+}
+function applySort(e, o, s) {
+	return o.length ? [...e].sort((e, c) => {
+		for (let { field: l, order: u } of o) {
+			let o = s[l], d = o?.sortComparator ? o.sortComparator(e[l], c[l]) : compareValues(e[l], c[l]);
+			if (d !== 0) return u === "asc" ? d : -d;
+		}
+		return 0;
+	}) : e;
+}
+var IconUnsorted = () => _tmpl$(), IconAsc = () => _tmpl$2(), IconDesc = () => _tmpl$3();
+const SortPlugin = {
+	name: "sort",
+	priority: -1,
+	store: () => ({ sortKeys: [] }),
+	rewriteProps: {
+		sort: ({ sort: e }) => ({
+			multiple: !1,
+			autoSort: !0,
+			...e
+		}),
+		data: ({ data: e }, { store: o }) => {
+			if (!o.sortKeys.length || !o.props.sort?.autoSort) return e;
+			let s = Object.fromEntries(o.props.columns.map((e) => [e.id, e]));
+			return applySort(e, o.sortKeys, s);
+		},
+		Th: ({ Th: c }, { store: d }) => (f) => {
+			let p = () => !!f.col.sortable && !f.col[d.internal], m = () => p() ? d.sortKeys.find((e) => e.field === f.col.id) : void 0, h = combineProps(f, {
+				get class() {
+					return p() ? "cursor-pointer select-none" : "";
+				},
+				onClick: () => {
+					if (!p()) return;
+					let e = f.col.id, o = m(), s = o ? o.order === "asc" ? "desc" : null : "asc";
+					if (d.props.sort?.multiple) if (s === null) d.sortKeys = d.sortKeys.filter((o) => o.field !== e);
+					else if (o) {
+						let o = d.sortKeys.findIndex((o) => o.field === e);
+						d.sortKeys[o] = {
+							field: e,
+							order: s
+						};
+					} else d.sortKeys = [...d.sortKeys, {
+						field: e,
+						order: "asc"
+					}];
+					else d.sortKeys = s ? [{
+						field: e,
+						order: s
+					}] : [];
+					d.props.sort?.onChange?.([...d.sortKeys]);
+				}
+			});
+			return createComponent(c, mergeProps(h, { get children() {
+				var s = _tmpl$4();
+				return insert(s, () => f.children, null), insert(s, createComponent(Show, {
+					get when() {
+						return p();
+					},
+					get children() {
+						return createComponent(Show, {
+							get when() {
+								return m();
+							},
+							get fallback() {
+								return createComponent(IconUnsorted, {});
+							},
+							children: (o) => o().order == "asc" ? createComponent(IconAsc, {}) : createComponent(IconDesc, {})
+						});
+					}
+				}), null), s;
+			} }));
+		}
+	}
+};
+export { SortPlugin };

package/dist/plugins/ValidatorPlugin.js

@@ -3,6 +3,7 @@ import { createComponent, insert, memo, mergeProps, template } from "solid-js/we
 var _tmpl$ = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"mr-1 c-red/75\">*");
 const ValidatorPlugin = {
 	name: "validator",
+	priority: -1,
 	store: (t) => ({
 		cellValidationErrors: {},
 		validateCell: async (n, r, i, a) => {