intable 0.0.9 → 0.0.11

package/dist/hooks/index.d.ts

@@ -36,5 +36,6 @@ export declare function useHistory([val, setVal]: [any, any]): {
     readonly index: number;
     readonly history: any[];
 };
-export declare function useMemoState(fn: any): {};
+export declare function createShallowState(state: any): any;
+export declare function useMemoState(fn: any): any;
 export {};

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
 import { unFn } from "../utils.js";
-import { $PROXY, batch, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, mergeProps, on, onCleanup, untrack } from "solid-js";
+import { $PROXY, batch, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, getOwner, mergeProps, on, onCleanup, runWithOwner, untrack } from "solid-js";
 import { $RAW, createMutable } from "solid-js/store";
 import { isFunction, isPromise, mapValues } from "es-toolkit";
 import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
@@ -9,149 +9,176 @@ import { makePersisted, storageSync } from "@solid-primitives/storage";
 import { createMutationObserver } from "@solid-primitives/mutation-observer";
 import { castArray } from "es-toolkit/compat";
 import { createKeybindingsHandler } from "tinykeys";
-function usePointerDrag(h, L) {
-	L = mergeProps({ preventDefault: !0 }, L), createPointerListeners({
+function usePointerDrag(h, B) {
+	B = mergeProps({ preventDefault: !0 }, B), createPointerListeners({
 		target: h,
 		passive: !1,
 		onDown(h) {
-			L.preventDefault && h.preventDefault();
-			let [R, z] = [h.x, h.y], B, V;
-			L.start?.(h, (h) => B = h, (h) => V = h), createRoot((L) => {
+			B.preventDefault && h.preventDefault();
+			let [V, H] = [h.x, h.y], U, W;
+			B.start?.(h, (h) => U = h, (h) => W = h), createRoot((B) => {
 				createPointerListeners({
 					target: document,
 					onMove(h) {
-						let [L, V] = [h.x - R, h.y - z];
-						B?.(h, {
-							sx: R,
-							sy: z,
-							ox: L,
-							oy: V
+						let [B, W] = [h.x - V, h.y - H];
+						U?.(h, {
+							sx: V,
+							sy: H,
+							ox: B,
+							oy: W
 						});
 					},
 					onUp() {
-						V?.(h), L(), B = void 0, V = void 0;
+						W?.(h), B(), U = void 0, W = void 0;
 					}
-				}), createEventListenerMap(document, { drop: L });
+				}), createEventListenerMap(document, { drop: B });
 			});
 		}
 	});
 }
-function model(h, L) {
-	let [R, z] = L();
-	createRenderEffect(() => h.value = R()), h.addEventListener("input", (h) => z(h.target.value));
+function model(h, B) {
+	let [V, H] = B();
+	createRenderEffect(() => h.value = V()), h.addEventListener("input", (h) => H(h.target.value));
 }
-function toSignle(h, L) {
-	return [() => h[L], (R) => h[L] = R];
+function toSignle(h, B) {
+	return [() => h[B], (V) => h[B] = V];
 }
 function useDark() {
-	let h = (h) => h == "dark" || R() && !h, L = (h) => h ? "dark" : "light", R = () => window.matchMedia("(prefers-color-scheme: dark)").matches, z = makePersisted(createSignal(R()), {
+	let h = (h) => h == "dark" || V() && !h, B = (h) => h ? "dark" : "light", V = () => window.matchMedia("(prefers-color-scheme: dark)").matches, H = makePersisted(createSignal(V()), {
 		name: "color-schema",
 		storage: localStorage,
 		sync: storageSync,
-		serialize: L,
+		serialize: B,
 		deserialize: h
 	});
-	return createEffect(() => document.documentElement.classList[z[0]() ? "add" : "remove"]("dark")), createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
+	return createEffect(() => document.documentElement.classList[H[0]() ? "add" : "remove"]("dark")), createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
 		key: "color-schema",
-		newValue: L(z[0]())
-	}))), z;
+		newValue: B(H[0]())
+	}))), H;
 }
-function useMemoAsync(h, L) {
-	let R = Symbol(), [B, V] = createSignal(L);
+function useMemoAsync(h, B) {
+	let V = Symbol(), [U, W] = createSignal(B);
 	return createComputed(async () => {
-		let L = h(untrack(B)), z = L instanceof Promise ? await new Promise((h) => {
-			L.then(h), onCleanup(() => h(R));
-		}) : L;
-		z == R || V(() => z);
-	}), B;
+		let B = h(untrack(U)), H = B instanceof Promise ? await new Promise((h) => {
+			B.then(h), onCleanup(() => h(V));
+		}) : B;
+		H == V || W(() => H);
+	}), U;
 }
-function useSignle2(h, L) {
-	let R = createSignal(isFunction(h) ? void 0 : h), B = (h) => {
-		let R = L?.before?.(h);
-		return isPromise(R) ? R.then((L) => L === void 0 ? h : L) : R ?? h;
-	}, V = useMemoAsync(() => B(R[0]()));
+function useSignle2(h, B) {
+	let V = createSignal(isFunction(h) ? void 0 : h), U = (h) => {
+		let V = B?.before?.(h);
+		return isPromise(V) ? V.then((B) => B === void 0 ? h : B) : V ?? h;
+	}, W = useMemoAsync(() => U(V[0]()));
 	if (isFunction(h)) {
-		let L = useMemoAsync(() => B(h()));
-		createComputed(() => R[1](L()));
+		let B = useMemoAsync(() => U(h()));
+		createComputed(() => V[1](B()));
 	}
-	return [V, R[1]];
+	return [W, V[1]];
 }
 var $MEMO = Symbol();
-function toReactive(R) {
-	let z = () => unFn(R), B = () => !0, V = (h) => ((h) => typeof h == "function" && $MEMO in h ? h() : h)(z()[h]);
+function toReactive(V) {
+	let H = () => unFn(V), U = () => !0, W = (h) => ((h) => typeof h == "function" && $MEMO in h ? h() : h)(H()[h]);
 	return new Proxy(Object.create(null), {
-		get: (h, R, B) => R == $PROXY || R == $RAW ? B : ((h) => typeof h == "function" && $MEMO in h ? h() : h)(z()[R]),
-		set: B,
-		defineProperty: (h, L, R) => Object.defineProperty(z(), L, R),
-		deleteProperty: B,
-		getPrototypeOf: () => Object.getPrototypeOf(z()),
-		has: (h, R) => R == $PROXY || R in z(),
-		ownKeys: (h) => Object.keys(z()),
-		getOwnPropertyDescriptor: (h, L) => ({
+		get: (h, V, U) => V == $PROXY || V == $RAW ? U : ((h) => typeof h == "function" && $MEMO in h ? h() : h)(H()[V]),
+		set: U,
+		defineProperty: (h, B, V) => Object.defineProperty(H(), B, V),
+		deleteProperty: U,
+		getPrototypeOf: () => Object.getPrototypeOf(H()),
+		has: (h, V) => V == $PROXY || V in H(),
+		ownKeys: (h) => Object.keys(H()),
+		getOwnPropertyDescriptor: (h, B) => ({
 			enumerable: !0,
 			configurable: !0,
 			get() {
-				return V(L);
+				return W(B);
 			},
-			set: B
+			set: U
 		})
 	});
 }
 function useMemo(h) {
-	let L = createMemo(h);
-	return L[$MEMO] = 1, L;
+	let B = createMemo(h);
+	return B[$MEMO] = 1, B;
 }
 function useHover(h) {
-	let [L, R] = createSignal(!1);
-	return createEventListener(h, "pointerenter", () => R(!0)), createEventListener(h, "pointerleave", () => R(!1)), L;
+	let [B, V] = createSignal(!1);
+	return createEventListener(h, "pointerenter", () => V(!0)), createEventListener(h, "pointerleave", () => V(!1)), B;
 }
 function useMouseDown(h) {
-	let [L, R] = createSignal(!1);
-	return createEventListener(h, "pointerdown", () => R(!0)), createEventListener(document.body, "pointerup", () => R(!1)), L;
+	let [B, V] = createSignal(!1);
+	return createEventListener(h, "pointerdown", () => V(!0)), createEventListener(document.body, "pointerup", () => V(!1)), B;
 }
 function useClicked(h) {
-	let [L, R] = createSignal(!1), z = () => castArray(access(h));
-	return createEventListener(() => z().map((h) => h?.getRootNode()), "click", (h) => R(z().some((L) => L?.contains(h.target)))), L;
+	let [B, V] = createSignal(!1), H = () => castArray(access(h));
+	return createEventListener(() => H().map((h) => h?.getRootNode()), "click", (h) => V(H().some((B) => B?.contains(h.target)))), B;
 }
-function useMutation(h, L, R) {
-	let z = createSignal(R());
-	return createMutationObserver(h, L, (h) => z[1](R())), z[0];
+function useMutation(h, B, V) {
+	let H = createSignal(V());
+	return createMutationObserver(h, B, (h) => H[1](V())), H[0];
 }
-function useTinykeys(h, L) {
-	createEventListener(h, "keydown", createKeybindingsHandler({ ...mapValues(L, (h) => (L) => {
-		L.preventDefault(), h(L);
+function useTinykeys(h, B) {
+	createEventListener(h, "keydown", createKeybindingsHandler({ ...mapValues(B, (h) => (B) => {
+		B.preventDefault(), h(B);
 	}) }));
 }
-function useHistory([h, L]) {
-	let R = 1, z = createMutable({
+function useHistory([h, B]) {
+	let V = 1, H = createMutable({
 		index: -1,
 		history: []
-	}), B = () => (z.index = 0, z.history = [h()]), V = () => z.index > 0, H = () => z.index < z.history.length - 1;
+	}), U = () => (H.index = 0, H.history = [h()]), W = () => H.index > 0, G = () => H.index < H.history.length - 1;
 	return createRenderEffect(on(h, (h) => {
 		if (h != null) {
-			if (!R) return R = 1;
-			H() && (z.history = z.history.slice(0, z.index + 1)), z.history[++z.index] = h;
+			if (!V) return V = 1;
+			G() && (H.history = H.history.slice(0, H.index + 1)), H.history[++H.index] = h;
 		}
 	})), {
-		undo: () => V() && ((R = 0) || L(z.history[--z.index])),
-		redo: () => H() && ((R = 0) || L(z.history[++z.index])),
-		clear: B,
+		undo: () => W() && ((V = 0) || B(H.history[--H.index])),
+		redo: () => G() && ((V = 0) || B(H.history[++H.index])),
+		clear: U,
 		get index() {
-			return z.index;
+			return H.index;
 		},
 		get history() {
-			return z.history;
+			return H.history;
 		}
 	};
 }
+function createShallowState(h) {
+	let V = getOwner(), H = {}, U = (h, B) => H[h] ??= runWithOwner(V, () => createSignal(B));
+	for (let B in h) U(B, h[B]);
+	return new Proxy(h, {
+		get(h, V, H) {
+			return V == $PROXY ? H : U(V)[0]();
+		},
+		set(h, B, V, H) {
+			return h[B] = V, U(B, V)[1](() => V), !0;
+		},
+		deleteProperty(h, B) {
+			return U(B)[1](void 0), delete h[B], delete H[B], !0;
+		},
+		has: (h, V) => V == $PROXY || V in H,
+		ownKeys: (h) => Reflect.ownKeys(H),
+		getOwnPropertyDescriptor: (h, B) => ({
+			enumerable: !0,
+			configurable: !0,
+			get() {
+				return U(B)[0]();
+			},
+			set(h) {
+				U(B)[1](h);
+			}
+		})
+	});
+}
 function useMemoState(h) {
-	let L = createMutable({});
+	let B = createShallowState({});
 	return createComputed(() => {
-		let z = h();
+		let H = { ...h() };
 		untrack(() => batch(() => {
-			for (let h in L) h in z || delete L[h];
-			Object.assign(L, z);
+			for (let h in B) h in H || delete B[h];
+			Object.assign(B, H);
 		}));
-	}), L;
+	}), B;
 }
-export { model, toReactive, toSignle, useClicked, useDark, useHistory, useHover, useMemo, useMemoAsync, useMemoState, useMouseDown, useMutation, usePointerDrag, useSignle2, useTinykeys };
+export { createShallowState, model, toReactive, toSignle, useClicked, useDark, useHistory, useHover, useMemo, useMemoAsync, useMemoState, useMouseDown, useMutation, usePointerDrag, useSignle2, useTinykeys };

package/dist/index.d.ts

@@ -138,6 +138,7 @@ export interface TableStore extends Obj {
     raw: symbol;
     props: TableProps2;
     rawProps: TableProps;
+    ID: string;
     plugins: Plugin[];
 }
 export declare const Intable: (props: TableProps) => JSX.Element;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { unFn } from "./utils.js";
-import { toReactive, useMemo } from "./hooks/index.js";
+import { toReactive, useMemo, useMemoState } from "./hooks/index.js";
 import './style.css';;/* empty css      */
 /* empty css      */
 import { CellSelectionPlugin } from "./plugins/CellSelectionPlugin.js";
@@ -29,38 +29,38 @@ var _tmpl$ = /* @__PURE__ */ template("<table>"), _tmpl$2 = /* @__PURE__ */ temp
 const Ctx = createContext({
 	props: {},
 	store: {}
-}), Intable = (K) => {
-	K = mergeProps$1({ rowKey: "id" }, K);
-	let q = getOwner(), J = createMutable({
+}), Intable = (q) => {
+	q = mergeProps$1({ rowKey: "id" }, q);
+	let J = getOwner(), Y = createMutable({
 		get rawProps() {
-			return K;
+			return q;
 		},
 		get plugins() {
 			return Z();
 		}
-	}), Y = memoize((W) => runWithOwner(q, () => unFn(W, J))), Z = createMemo(() => [
+	}), X = memoize((W) => runWithOwner(J, () => unFn(W, Y))), Z = createMemo(() => [
 		...defaultsPlugins,
-		...K.plugins || [],
+		...q.plugins || [],
 		RenderPlugin
-	].map(Y).sort((h, W) => (W.priority || 0) - (h.priority || 0)));
+	].map(X).sort((h, W) => (W.priority || 0) - (h.priority || 0)));
 	createComputed((h) => {
 		let W = difference(Z(), h);
-		return runWithOwner(q, () => {
-			W.forEach((h) => Object.assign(J, h.store?.(J)));
+		return runWithOwner(J, () => {
+			W.forEach((h) => Object.assign(Y, h.store?.(Y)));
 		}), Z();
 	}, []);
 	let Q = mapArray(Z, () => createSignal());
-	J.props = toReactive(createMemo(() => Q()[Q().length - 1][0]() || K)), createComputed(mapArray(Z, (h, q) => {
-		let Y = createMemo(() => Q()[q() - 1]?.[0]() || K), X = mergeProps$1(Y, toReactive(mapValues(h.rewriteProps || {}, (h) => useMemo(() => h(Y(), { store: J })))));
-		Q()[q()][1](X);
+	Y.props = useMemoState(() => Q()[Q().length - 1][0]() || q), createComputed(mapArray(Z, (h, K) => {
+		let J = createMemo(() => Q()[K() - 1]?.[0]() || q), X = mergeProps$1(J, toReactive(mapValues(h.rewriteProps || {}, (h) => useMemo(() => h(J(), { store: Y })))));
+		Q()[K()][1](X);
 	})), onMount(() => {
-		createEffect(mapArray(Z, (h) => h.onMount?.(J)));
+		createEffect(mapArray(Z, (h) => h.onMount?.(Y)));
 	});
 	let $ = createMutable({
-		props: J.props,
-		store: J
+		props: Y.props,
+		store: Y
 	});
-	return window.store = J, window.ctx = $, createComponent(Ctx.Provider, {
+	return window.store = Y, window.ctx = $, createComponent(Ctx.Provider, {
 		value: $,
 		get children() {
 			return createComponent($.props.Table, { get children() {
@@ -185,7 +185,8 @@ function BasePlugin() {
 				trs: [],
 				trSizes: [],
 				internal: Symbol("internal"),
-				raw: Symbol("raw")
+				raw: "__raw",
+				ID: "__ID"
 			};
 		},
 		rewriteProps: {
@@ -336,8 +337,8 @@ var IndexPlugin = {
 		rewriteProps: { columns: ({ columns: h }, { store: W }) => (h = h.map((h, K) => ({
 			...h,
 			...G?.[K],
-			[W.raw]: h[W.raw] ?? h
-		})), untrack(() => batch(() => reconcile(h, { key: W.raw })(W.__fit_col_width__cols ??= [])))) }
+			[W.ID]: h[W.ID] ??= Symbol()
+		})), untrack(() => batch(() => reconcile(h, { key: W.ID })(W.__fit_col_width__cols ??= [])))) }
 	};
 };
 const ScrollPlugin = {

package/dist/plugins/CellSelectionPlugin.js

@@ -5,22 +5,25 @@ import { combineProps } from "@solid-primitives/props";
 var _tmpl$ = /* @__PURE__ */ template("<div class=area>"), inrange = (e, i, a) => e <= a && e >= i;
 const CellSelectionPlugin = {
 	name: "cell-selection",
-	store: () => ({ selected: {
-		start: [],
-		end: []
-	} }),
+	store: (e) => ({
+		selected: {
+			start: [],
+			end: []
+		},
+		cellSelectionRect: () => {
+			let { start: i, end: a } = e.selected, o = [i[0], a[0]].sort((e, i) => e - i), s = [i[1], a[1]].sort((e, i) => e - i);
+			return {
+				xs: o,
+				ys: s
+			};
+		}
+	}),
 	commands: (e) => ({ getAreaRows() {
 		let { start: i, end: a } = e.selected, [o, s] = [i[1], a[1]].sort((e, i) => e - i);
 		return e.props.data.slice(o, s + 1);
 	} }),
 	rewriteProps: {
-		Table: ({ Table: a }, { store: o }) => (s) => (o.cellSelectionRect ??= createMemo(() => {
-			let { start: e, end: i } = o.selected, a = [e[0], i[0]].sort((e, i) => e - i), s = [e[1], i[1]].sort((e, i) => e - i);
-			return {
-				xs: a,
-				ys: s
-			};
-		}), usePointerDrag(() => o.table, {
+		Table: ({ Table: a }, { store: o }) => (s) => (usePointerDrag(() => o.table, {
 			preventDefault: !1,
 			start(e, i, a) {
 				batch(() => {
@@ -73,7 +76,7 @@ const CellSelectionPlugin = {
 		Td: ({ Td: e }, { store: s }) => (c) => {
 			let u = createMemo(() => {
 				let e = "", { xs: i, ys: a } = s.cellSelectionRect(), o = inrange(c.x, i[0], i[1]), l = inrange(c.y, a[0], a[1]);
-				return o && l && (e += "range-selected ", c.x == i[0] && (e += "range-selected-l "), c.x == i[1] && (e += "range-selected-r "), c.y == a[0] && (e += "range-selected-t "), c.y == a[1] && (e += "range-selected-b ")), c.col.id == s.$index.id && l && (e += "row-range-highlight "), e;
+				return o && l && (e += "range-selected ", c.x == i[0] && (e += "range-selected-l "), c.x == i[1] && (e += "range-selected-r "), c.y == a[0] && (e += "range-selected-t "), c.y == a[1] && (e += "range-selected-b ")), c.col.id == s.$index?.id && l && (e += "row-range-highlight "), e;
 			}), d = combineProps(c, {
 				get class() {
 					return u();

package/dist/plugins/DiffPlugin.js

@@ -7,6 +7,7 @@ import { v4 } from "uuid";
 import { diffArrays } from "diff";
 var DEL = Symbol("del"), NEW = Symbol("new");
 const DiffPlugin = {
+	name: "diff",
 	priority: Infinity,
 	store: (e) => {
 		let a = e.rawProps.data || [];

package/dist/plugins/DragPlugin.js

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

package/dist/plugins/HeaderGroup.js

@@ -9,38 +9,38 @@ function maxDepth(e) {
 	for (let n of e) n.children?.length && (t = Math.max(t, maxDepth(n.children)));
 	return t + 1;
 }
-function flatLeaves(e, t = []) {
-	for (let n of e) n.children?.length ? flatLeaves(n.children, t) : t.push(n);
+function flatLeaves(e, t = [], n) {
+	for (let r of e) r[n.ID] ??= Symbol(), r.children?.length ? flatLeaves(r.children, t, n) : t.push(r);
 	return t;
 }
 function buildFlatGrid(e, t, n, r, i, a) {
 	let o = n.length, s = Array.from({ length: t }, () => Array(o).fill(null)), c = 0;
-	function l(e, a) {
-		for (let o of e) {
-			let e = !!o.children?.length, d = leafCount(o), f = e ? 1 : t - a, p = e ? i[c] : o, m = r.get(p);
-			if (m == null) {
+	function l(e, o) {
+		for (let d of e) {
+			let e = !!d.children?.length, f = leafCount(d), p = e ? 1 : t - o, m = e ? i[c] : d, h = r.get(m[a.ID]);
+			if (h == null) {
 				e || c++;
 				continue;
 			}
-			s[a][m] = {
+			s[o][h] = {
 				kind: "anchor",
-				anchorCol: o,
-				colspan: d,
-				rowspan: f
+				anchorCol: d,
+				colspan: f,
+				rowspan: p
 			};
-			for (let e = 1; e < d; e++) s[a][m + e] = {
+			for (let e = 1; e < f; e++) s[o][h + e] = {
 				kind: "colspan-hidden",
-				anchorCol: o,
-				colspan: d,
-				rowspan: f
+				anchorCol: d,
+				colspan: f,
+				rowspan: p
 			};
-			for (let e = 1; e < f; e++) for (let t = 0; t < d; t++) s[a + e][m + t] = {
+			for (let e = 1; e < p; e++) for (let t = 0; t < f; t++) s[o + e][h + t] = {
 				kind: "rowspan-hidden",
-				anchorCol: n[m + t],
+				anchorCol: n[h + t],
 				colspan: 1,
 				rowspan: 1
 			};
-			e ? l(o.children, a + 1) : c++;
+			e ? l(d.children, o + 1) : c++;
 		}
 	}
 	c = 0, l(e, 0);
@@ -69,32 +69,32 @@ const HeaderGroupPlugin = {
 	store: (e) => ({ _headerGroupAnchors(t, n) {
 		let r = e.rawProps.columns || [];
 		if (!r.some((e) => e.children?.length) || maxDepth(r) <= 1) return [];
-		let i = e.props.columns || [], a = flatLeaves(r), o = /* @__PURE__ */ new Map();
-		for (let t = 0; t < i.length; t++) o.set(i[t][e.raw] || i[t], t);
+		let i = e.props.columns || [], a = flatLeaves(r, [], e), o = /* @__PURE__ */ new Map();
+		for (let t = 0; t < i.length; t++) o.set(i[t][e.ID], t);
 		let s = [], c = 0;
-		function l(e) {
-			for (let r of e) if (r.children?.length) {
-				let e = leafCount(r), i = a[c];
-				if (i) {
-					let r = o.get(i);
-					if (r != null) {
-						let i = r + e - 1;
-						r <= n && i >= t && s.push(r);
+		function l(r) {
+			for (let i of r) if (i.children?.length) {
+				let r = leafCount(i), d = a[c];
+				if (d) {
+					let i = o.get(d[e.ID]);
+					if (i != null) {
+						let e = i + r - 1;
+						i <= n && e >= t && s.push(i);
 					}
 				}
-				l(r.children);
+				l(i.children);
 			} else c++;
 		}
 		return l(r), s;
 	} }),
 	rewriteProps: {
-		columns: ({ columns: e }) => flatLeaves(e),
+		columns: ({ columns: e }, { store: t }) => flatLeaves(e, [], t),
 		Thead: ({ Thead: u }, { store: m }) => (h) => {
 			let { props: g } = useContext(Ctx), _ = createMemo(() => {
 				let e = m.rawProps.columns || [], t = maxDepth(e);
 				if (t <= 1) return null;
-				let n = g.columns || [], r = flatLeaves(e), i = /* @__PURE__ */ new Map();
-				for (let e = 0; e < n.length; e++) i.set(n[e][m.raw] || n[e], e);
+				let n = g.columns || [], r = flatLeaves(e, [], m), i = /* @__PURE__ */ new Map();
+				for (let e = 0; e < n.length; e++) i.set(n[e][m.ID], e);
 				return {
 					grid: buildFlatGrid(e, t, n, i, r, m),
 					depth: t

package/dist/plugins/ResizePlugin.js

@@ -14,7 +14,7 @@ var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW =
 		p.stopPropagation();
 		let _ = e.x, { min: b, max: x } = g.resizable.col, S = y.parentElement, C = S.offsetWidth;
 		m((p, { ox: m }) => v[COL][e.x] = clamp(C + m, b, x)), h(() => {
-			let e = g.columns[_], p = [...v.rawProps.columns || []], m = p.indexOf(e[v.raw] ?? e);
+			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
@@ -31,7 +31,7 @@ var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW =
 		let _ = e.y, { min: b, max: x } = g.resizable.row, S = y.parentElement.offsetHeight;
 		m((p, { oy: m }) => v[ROW][e.y] = clamp(S + m, b, x)), h(() => {
 			let e = g.data[_];
-			[...v.rawProps.data || []].indexOf(e[v.raw] ?? e);
+			[...v.rawProps.data || []].findIndex((p) => p[v.ID] === e[v.ID]);
 		});
 	} }), createEventListener(() => y, "dblclick", () => e.data[COL] = void 0), (() => {
 		var p = _tmpl$(), m = y;
@@ -60,16 +60,14 @@ const ResizePlugin = {
 		}),
 		columns: ({ columns: e }, { store: p }) => (e = e.map((e, m) => ({
 			...e,
-			[p.raw]: e[p.raw] ?? e
+			[p.ID]: e[p.ID] ??= Symbol()
 		})), e = e.map((e) => e.resizable === void 0 ? {
 			...e,
-			resizable: p.props?.resizable?.col.enable,
-			[p.raw]: e[p.raw] ?? e
+			resizable: p.props?.resizable?.col.enable
 		} : e), e = e.map((e, m) => p[COL][m] ? {
 			...e,
-			width: p[COL][m],
-			[p.raw]: e[p.raw] ?? e
-		} : e), untrack(() => batch(() => reconcile(e, { key: p.raw })(p.__resize__cols ??= [])))),
+			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))];
 		} }))),

package/dist/plugins/RowGroupPlugin.js

@@ -6,6 +6,7 @@ import { groupBy, zipObject } from "es-toolkit";
 import { findLast } from "es-toolkit/compat";
 var _tmpl$ = /* @__PURE__ */ template("<div class=\"flex items-center\">"), pathKey = (e) => e.join("\0");
 const RowGroupPlugin = {
+	name: "row-group",
 	priority: -Infinity,
 	store: (e) => ({ rowGroup: {
 		expandKeys: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intable",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "type": "module",
   "files": [