intable 0.0.60 → 0.0.62

package/dist/index.js

@@ -1,5 +1,5 @@
 import { renderComponent, solidComponent } from "./components/utils.js";
-import { unFn } from "./utils.js";
+import { pxsuffix, unFn } from "./utils.js";
 import './style.css';;/* empty css      */
 /* empty css      */
 import { CellSelectionPlugin } from "./plugins/CellSelectionPlugin.js";
@@ -25,6 +25,7 @@ import { ImportExportPlugin } from "./plugins/ImportExportPlugin.js";
 import { TooltipPlugin } from "./plugins/TooltipPlugin.js";
 import { KeyEachPlugin } from "./plugins/KeyEachPlugin.js";
 import { PaginationPlugin } from "./plugins/PaginationPlugin.js";
+import { BranchGraphPlugin } from "./plugins/BranchGraphPlugin.js";
 import loading_bold_default from "./loading-bold.js";
 import { className, createComponent, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
 import { $PROXY, For, batch, createComputed, createContext, createEffect, createMemo, createRenderEffect, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, onCleanup, onMount, runWithOwner, useContext } from "solid-js";
@@ -38,49 +39,49 @@ var _tmpl$ = /* @__PURE__ */ template("<div>"), _tmpl$2 = /* @__PURE__ */ templa
 const Ctx = createContext({
 	props: {},
 	store: {}
-}), Intable = (_) => {
-	_ = mergeProps$1({ rowKey: "id" }, _);
-	let K = getOwner(), J = createMutable({
+}), Intable = (g) => {
+	g = mergeProps$1({ rowKey: "id" }, g);
+	let G = getOwner(), K = createMutable({
 		get rawProps() {
-			return _[$PROXY] ||= _;
+			return g[$PROXY] ||= g;
 		},
 		get plugins() {
-			return X();
+			return Y();
 		},
 		owner: getOwner()
-	}), Y = memoize((_) => runWithOwner(K, () => unFn(_, J))), X = createMemo((q) => {
-		let X = uniq([
+	}), J = memoize((g) => runWithOwner(G, () => unFn(g, K))), Y = createMemo((q) => {
+		let Y = uniq([
 			...defaultsPlugins,
-			..._.plugins || [],
+			...g.plugins || [],
 			RenderPlugin
-		].flat().map(Y).sort((_, K) => (K.priority || 0) - (_.priority || 0))), Q = difference(X, q);
-		return runWithOwner(K, () => {
-			Q.forEach((_) => Object.assign(J, _.store?.(J)));
-		}), X;
+		].flat().map(J).sort((g, G) => (G.priority || 0) - (g.priority || 0))), X = difference(Y, q);
+		return runWithOwner(G, () => {
+			X.forEach((g) => Object.assign(K, g.store?.(K)));
+		}), Y;
 	}, [], { equals: isEqual });
-	J.props = (() => {
-		let K = getOwner(), q = {}, Y = (_) => q[_] ??= runWithOwner(K, () => createMemo(() => Z(_)));
-		function Z(K) {
-			return createMemo(() => X().map((_) => _.rewriteProps?.[K]).filter((_) => _), void 0, { equals: isEqual })().reduce((_, q) => q({ [K]: _ }, { store: J }), _[K]);
+	K.props = (() => {
+		let G = getOwner(), q = {}, J = (g) => q[g] ??= runWithOwner(G, () => createMemo(() => X(g)));
+		function X(G) {
+			return createMemo(() => Y().map((g) => g.rewriteProps?.[G]).filter((g) => g), void 0, { equals: isEqual })().reduce((g, q) => q({ [G]: g }, { store: K }), g[G]);
 		}
-		return new Proxy({}, { get(_, K, q) {
-			return K == $PROXY ? q : Y(K)();
+		return new Proxy({}, { get(g, G, K) {
+			return G == $PROXY ? K : J(G)();
 		} });
-	})(), createComputed(mapArray(X, (_) => _.onInit?.(J))), onMount(() => {
-		createEffect(mapArray(X, (_) => _.onMount?.(J)));
+	})(), createComputed(mapArray(Y, (g) => g.onInit?.(K))), onMount(() => {
+		createEffect(mapArray(Y, (g) => g.onMount?.(K)));
 	});
-	let Q = createMutable({
-		props: J.props,
-		store: J
+	let X = createMutable({
+		props: K.props,
+		store: K
 	});
-	return window.store = J, window.ctx = Q, createRenderEffect(() => {
-		let _ = J.props.store;
-		_ && (typeof _ == "function" ? _(J) : "value" in _ ? _.value = J : "current" in _ && (_.current = J));
+	return window.store = K, window.ctx = X, createRenderEffect(() => {
+		let g = K.props.store;
+		g && (typeof g == "function" ? g(K) : "value" in g ? g.value = K : "current" in g && (g.current = K));
 	}), createComponent(Ctx.Provider, {
-		value: Q,
+		value: X,
 		get children() {
-			return createComponent(Q.props.Scroll, { get children() {
-				return createComponent(Q.props.Table, { get children() {
+			return createComponent(X.props.Scroll, { get children() {
+				return createComponent(X.props.Table, { get children() {
 					return [createComponent(THead, {}), createComponent(TBody, {})];
 				} });
 			} });
@@ -88,65 +89,65 @@ const Ctx = createContext({
 	});
 };
 var THead = () => {
-	let { props: K, store: q } = useContext(Ctx);
-	return createComponent(K.Thead, { get children() {
-		return createComponent(K.Tr, { get children() {
-			return createComponent(K.EachCells, {
+	let { props: G, store: K } = useContext(Ctx);
+	return createComponent(G.Thead, { get children() {
+		return createComponent(G.Tr, { get children() {
+			return createComponent(G.EachCells, {
 				get each() {
-					return K.columns || [];
+					return G.columns || [];
 				},
-				children: (J, Y) => createComponent(K.Th, {
+				children: (q, J) => createComponent(G.Th, {
 					get col() {
-						return J();
+						return q();
 					},
 					get x() {
-						return Y();
+						return J();
 					},
 					get children() {
-						return renderComponent(J().name, void 0, q);
+						return renderComponent(q().name, void 0, K);
 					}
 				})
 			});
 		} });
 	} });
 }, TBody = () => {
-	let { props: _, store: K } = useContext(Ctx);
-	return createComponent(_.Tbody, { get children() {
-		return createComponent(_.EachRows, {
+	let { props: g, store: G } = useContext(Ctx);
+	return createComponent(g.Tbody, { get children() {
+		return createComponent(g.EachRows, {
 			get each() {
-				return _.data;
+				return g.data;
 			},
-			children: (q, J) => createComponent(_.Tr, {
+			children: (K, q) => createComponent(g.Tr, {
 				get y() {
-					return J();
+					return q();
 				},
 				get data() {
-					return q();
+					return K();
 				},
 				get children() {
-					return createComponent(_.EachCells, {
+					return createComponent(g.EachCells, {
 						get each() {
-							return _.columns;
+							return g.columns;
 						},
-						children: (Y, X) => createComponent(_.Td, {
+						children: (J, Y) => createComponent(g.Td, {
 							get col() {
-								return Y();
+								return J();
 							},
 							get x() {
-								return X();
+								return Y();
 							},
 							get y() {
-								return J();
+								return q();
 							},
 							get data() {
-								return q();
+								return K();
 							},
 							get value() {
-								return q()[Y().id];
+								return K()[J().id];
 							},
-							onChange: (_) => K.commands.rowChange({
-								...q(),
-								[Y().id]: _
+							onChange: (g) => G.commands.rowChange({
+								...K(),
+								[J().id]: g
 							})
 						})
 					});
@@ -156,60 +157,60 @@ var THead = () => {
 	} });
 }, src_default = Intable;
 function BasePlugin() {
-	let _ = {
+	let g = {
 		col: null,
 		data: null,
 		onChange: null
-	}, K = (_) => (() => {
-		var K = _tmpl$();
-		return spread(K, _, !1, !1), K;
-	})(), J = (_) => (() => {
-		var K = _tmpl$2();
-		return spread(K, _, !1, !1), K;
-	})(), Y = (_) => (() => {
-		var K = _tmpl$3();
-		return spread(K, _, !1, !1), K;
-	})(), X = (_) => (() => {
-		var K = _tmpl$4();
-		return spread(K, _, !1, !1), K;
-	})(), Z = (K) => (() => {
-		var q = _tmpl$5();
-		return spread(q, mergeProps(K, _), !1, !1), q;
-	})(), Q = (K) => (() => {
-		var q = _tmpl$6();
-		return spread(q, mergeProps(K, _), !1, !1), q;
-	})(), $ = (K) => (() => {
-		var q = _tmpl$7();
-		return spread(q, mergeProps(K, _), !1, !1), q;
+	}, G = (g) => (() => {
+		var G = _tmpl$();
+		return spread(G, g, !1, !1), G;
+	})(), J = (g) => (() => {
+		var G = _tmpl$2();
+		return spread(G, g, !1, !1), G;
+	})(), Y = (g) => (() => {
+		var G = _tmpl$3();
+		return spread(G, g, !1, !1), G;
+	})(), X = (g) => (() => {
+		var G = _tmpl$4();
+		return spread(G, g, !1, !1), G;
+	})(), Z = (G) => (() => {
+		var K = _tmpl$5();
+		return spread(K, mergeProps(G, g), !1, !1), K;
+	})(), Q = (G) => (() => {
+		var K = _tmpl$6();
+		return spread(K, mergeProps(G, g), !1, !1), K;
+	})(), $ = (G) => (() => {
+		var K = _tmpl$7();
+		return spread(K, mergeProps(G, g), !1, !1), K;
 	})();
 	return {
 		name: "base",
 		priority: Infinity,
-		store: (_) => {
-			let K = makeResizeObserver((K) => {
+		store: (g) => {
+			let G = makeResizeObserver((G) => {
 				batch(() => {
-					for (let q of K) {
-						let K = q.target, { inlineSize: J, blockSize: Y } = q.borderBoxSize[0], X = K.getAttribute("x");
-						X >= 0 && K.parentElement && (_.thSizes[X] = {
-							width: J,
-							height: Y
+					for (let K of G) {
+						let G = K.target, { inlineSize: q, blockSize: J } = K.borderBoxSize[0], Y = G.getAttribute("x");
+						Y >= 0 && G.parentElement && (g.thSizes[Y] = {
+							width: q,
+							height: J
 						});
 					}
 				});
-			}), q = makeResizeObserver((K) => {
+			}), K = makeResizeObserver((G) => {
 				batch(() => {
-					for (let q of K) {
-						let K = q.target, { inlineSize: J, blockSize: Y } = q.borderBoxSize[0], X = K.getAttribute("y");
-						X >= 0 && K.parentElement && (_.trSizes[X] = {
-							width: J,
-							height: Y
+					for (let K of G) {
+						let G = K.target, { inlineSize: q, blockSize: J } = K.borderBoxSize[0], Y = G.getAttribute("y");
+						Y >= 0 && G.parentElement && (g.trSizes[Y] = {
+							width: q,
+							height: J
 						});
 					}
 				});
 			});
 			return {
-				thObs: K,
-				trObs: q,
+				thObs: G,
+				trObs: K,
 				ths: [],
 				thSizes: [],
 				trs: [],
@@ -220,139 +221,149 @@ function BasePlugin() {
 			};
 		},
 		rewriteProps: {
-			data: ({ data: _ = [] }) => _,
-			columns: ({ columns: _ = [] }) => _,
-			newRow: ({ newRow: _ }, { store: K }) => function() {
-				let q = _?.(...arguments) || {};
-				return q[K.props.rowKey] ??= Symbol(), q;
+			data: ({ data: g = [] }) => g,
+			columns: ({ columns: g = [] }) => g,
+			newRow: ({ newRow: g }, { store: G }) => function() {
+				let K = g?.(...arguments) || {};
+				return K[G.props.rowKey] ??= Symbol(), K;
 			},
-			Scroll: ({ Scroll: _ = K }, { store: q }) => (K) => {
-				let J = createScrollPosition(() => q.scroll_el), Y = createElementSize(() => q.scroll_el), X = createMemo(() => {
-					let _ = q.scroll_el;
-					if (!_) return;
-					let K = J.x == 0, X = J.x >= _.scrollWidth - (Y.width || 0);
-					return K && X ? "" : !K && !X ? "is-scroll-mid" : K ? "is-scroll-left" : X ? "is-scroll-right" : "";
+			Scroll: ({ Scroll: g = G }, { store: K }) => (G) => {
+				let q = createScrollPosition(() => K.scroll_el), J = createElementSize(() => K.scroll_el), Y = createMemo(() => {
+					let g = K.scroll_el;
+					if (!g) return;
+					let G = q.x == 0, Y = q.x >= g.scrollWidth - (J.width || 0);
+					return G && Y ? "" : !G && !Y ? "is-scroll-mid" : G ? "is-scroll-left" : Y ? "is-scroll-right" : "";
 				});
-				K = combineProps(K, { get class() {
-					return `data-table data-table--${q.props.size} flex flex-col`;
+				G = combineProps(G, { get class() {
+					return `data-table data-table--${K.props.size} flex flex-col`;
 				} }, {
 					get class() {
-						return q.props.class;
+						return K.props.class;
 					},
 					get style() {
-						return q.props.style;
+						return K.props.style;
 					}
 				}, { get class() {
-					return X();
+					return Y();
 				} });
-				let Z = mapArray(() => q.plugins.flatMap((_) => _.layers ?? []), (_) => createComponent(_, q));
-				return createComponent(_, mergeProps({ tabindex: -1 }, K, { get children() {
+				let X = mapArray(() => K.plugins.flatMap((g) => g.layers ?? []), (g) => createComponent(g, K));
+				return createComponent(g, mergeProps({ tabindex: -1 }, G, { get children() {
 					return [
-						createComponent(q.props.Header, {}),
+						createComponent(K.props.Header, {}),
 						(() => {
-							var _ = _tmpl$8();
-							return insert(_, Z), _;
+							var g = _tmpl$8();
+							return insert(g, X), g;
 						})(),
 						(() => {
-							var _ = _tmpl$();
-							return use((_) => q.scroll_el = _, _), insert(_, () => K.children, null), insert(_, createComponent(q.props.ScrollFooter, {}), null), insert(_, (() => {
-								var _ = memo(() => !q.props.data.length);
-								return () => _() && _tmpl$9();
-							})(), null), effect(() => className(_, `data-table--scroll-view relative h-full max-h-inherit flex-1 ${q.props.border && "data-table--border"}`)), _;
+							var g = _tmpl$();
+							return use((g) => K.scroll_el = g, g), insert(g, () => G.children, null), insert(g, createComponent(K.props.ScrollFooter, {}), null), insert(g, (() => {
+								var g = memo(() => !K.props.data.length);
+								return () => g() && _tmpl$9();
+							})(), null), effect(() => className(g, `data-table--scroll-view relative h-full max-h-inherit flex-1 ${K.props.border && "data-table--border"}`)), g;
 						})(),
-						createComponent(q.props.Footer, {})
+						createComponent(K.props.Footer, {})
 					];
 				} }));
 			},
-			Header: ({ Header: _ }) => (_ ??= (_) => (() => {
-				var K = _tmpl$();
-				return spread(K, mergeProps(() => combineProps({ class: "data-table__header" }, _)), !1, !1), K;
-			})(), (K) => createComponent(_, K)),
-			Footer: ({ Footer: _ }) => (_ ??= (_) => (() => {
-				var K = _tmpl$();
-				return spread(K, mergeProps(() => combineProps({ class: "data-table__footer" }, _)), !1, !1), K;
-			})(), (K) => createComponent(_, K)),
-			ScrollFooter: ({ ScrollFooter: _ }) => (_ ??= (_) => (() => {
-				var K = _tmpl$();
-				return spread(K, mergeProps(() => combineProps({ class: "data-table__scroll__footer" }, _)), !1, !1), K;
-			})(), (K) => createComponent(_, K)),
-			Table: ({ Table: _ = J }, { store: K }) => (q) => (q = combineProps({
-				ref: (_) => K.table = _,
-				class: "data-table--table"
-			}, q), createComponent(_, q)),
-			Thead: ({ Thead: _ = Y }, { store: K }) => (q) => (q = combineProps({ ref: (_) => K.thead = _ }, q), createComponent(_, q)),
-			Tbody: ({ Tbody: _ = X }, { store: K }) => (q) => (q = combineProps({ ref: (_) => K.tbody = _ }, q), createComponent(_, q)),
-			Tr: ({ Tr: _ = Z }, { store: K }) => (q) => {
-				let [J, Y] = createSignal();
-				return q = combineProps({ ref: Y }, q), createEffect(() => {
-					let { y: _ } = q;
-					_ != null && (K.trs[_] = J(), K.trObs.observe(J()), onCleanup(() => {
-						K.trObs.unobserve(J()), K.trs[_] = void 0, !(K.props.data.length > _) && (K.trSizes[_] = void 0);
+			Header: ({ Header: g }) => (g ??= (g) => (() => {
+				var G = _tmpl$();
+				return spread(G, mergeProps(() => combineProps({ class: "data-table__header" }, g)), !1, !1), G;
+			})(), (G) => createComponent(g, G)),
+			Footer: ({ Footer: g }) => (g ??= (g) => (() => {
+				var G = _tmpl$();
+				return spread(G, mergeProps(() => combineProps({ class: "data-table__footer" }, g)), !1, !1), G;
+			})(), (G) => createComponent(g, G)),
+			ScrollFooter: ({ ScrollFooter: g }) => (g ??= (g) => (() => {
+				var G = _tmpl$();
+				return spread(G, mergeProps(() => combineProps({ class: "data-table__scroll__footer" }, g)), !1, !1), G;
+			})(), (G) => createComponent(g, G)),
+			Table: ({ Table: g = J }, { store: G }) => (q) => (q = combineProps({
+				ref: (g) => G.table = g,
+				class: "data-table--table",
+				style: `width: ${pxsuffix(G.scroll?.x) ?? ""}`
+			}, q), createComponent(g, q)),
+			Thead: ({ Thead: g = Y }, { store: G }) => (K) => (K = combineProps({ ref: (g) => G.thead = g }, K), createComponent(g, K)),
+			Tbody: ({ Tbody: g = X }, { store: G }) => (K) => (K = combineProps({ ref: (g) => G.tbody = g }, K), createComponent(g, K)),
+			Tr: ({ Tr: g = Z }, { store: G }) => (K) => {
+				let [J, Y] = createSignal(), X = combineProps({
+					ref: Y,
+					get class() {
+						return K.y == null ? "" : unFn(G.props.rowClass, K);
+					},
+					get style() {
+						return K.y == null ? "" : unFn(G.props.rowStyle, K);
+					},
+					onClick: (g) => K.y != null && G.props.onRowClick?.(K.data, K.y, g)
+				}, K);
+				return createEffect(() => {
+					let { y: g } = K;
+					g != null && (G.trs[g] = J(), G.trObs.observe(J()), onCleanup(() => {
+						G.trObs.unobserve(J()), G.trs[g] = void 0, !(G.props.data.length > g) && (G.trSizes[g] = void 0);
 					}));
-				}), createComponent(_, q);
+				}), createComponent(g, X);
 			},
-			Th: ({ Th: _ = Q }, { store: K }) => (J) => {
-				let [Y, X] = createSignal(), { props: Z } = useContext(Ctx), Q = combineProps(J, {
-					ref: X,
+			Th: ({ Th: g = Q }, { store: G }) => (K) => {
+				let [J, Y] = createSignal(), { props: X } = useContext(Ctx), Z = combineProps(K, {
+					ref: Y,
 					get class() {
-						return [unFn(Z.cellClass, J), J.col.class].filter(Boolean).join(" ");
+						return [unFn(X.cellClass, K), K.col.class].filter(Boolean).join(" ");
 					},
 					get style() {
 						return [
-							unFn(Z.cellStyle, J),
-							J.col.style,
-							J.col.width && `width: ${J.col.width}px; min-width: ${J.col.width}px; max-width: ${J.col.width}px`
+							unFn(X.cellStyle, K),
+							K.col.style,
+							K.col.width && `width: ${K.col.width}px; min-width: ${K.col.width}px; max-width: ${K.col.width}px`
 						].filter(Boolean).join(";");
 					}
 				});
 				return createEffect(() => {
-					if (J.covered || (J.colspan ?? 1) != 1) return;
-					let { x: _ } = J;
-					K.ths[_] = Y(), K.thObs.observe(Y()), onCleanup(() => {
-						K.thObs.unobserve(Y()), K.ths[_] = void 0, !(K.props.columns.length > _) && (K.thSizes[_] = void 0);
+					if (K.covered || (K.colspan ?? 1) != 1) return;
+					let { x: g } = K;
+					G.ths[g] = J(), G.thObs.observe(J()), onCleanup(() => {
+						G.thObs.unobserve(J()), G.ths[g] = void 0, !(G.props.columns.length > g) && (G.thSizes[g] = void 0);
 					});
-				}), createComponent(_, mergeProps(Q, { get children() {
-					return J.children;
+				}), createComponent(g, mergeProps(Z, { get children() {
+					return K.children;
 				} }));
 			},
-			Td: ({ Td: _ = $ }, { store: K }) => (K) => {
-				let { props: J } = useContext(Ctx), Y = mergeProps$1(K, {
+			Td: ({ Td: g = $ }, { store: G }) => (G) => {
+				let { props: K } = useContext(Ctx), J = mergeProps$1(G, {
 					get class() {
 						return [
-							unFn(J.cellClass, K),
-							K.col.class,
-							K.class
+							unFn(K.cellClass, G),
+							G.col.class,
+							G.class
 						].filter(Boolean).join(" ");
 					},
 					get style() {
 						return [
-							unFn(J.cellStyle, K),
-							K.col.style,
-							K.col.width && `width: ${K.col.width}px; min-width: ${K.col.width}px; max-width: ${K.col.width}px`,
-							K.style
+							unFn(K.cellStyle, G),
+							G.col.style,
+							G.col.width && `width: ${G.col.width}px; min-width: ${G.col.width}px; max-width: ${G.col.width}px`,
+							G.style
 						].filter(Boolean).join(";");
 					}
 				});
-				return createComponent(_, Y);
+				return createComponent(g, J);
 			},
-			EachRows: ({ EachRows: _ }) => _ || ((_) => createComponent(For, {
+			EachRows: ({ EachRows: g }) => g || ((g) => createComponent(For, {
 				get each() {
-					return _.each;
+					return g.each;
 				},
-				children: (K, q) => _.children(() => K, q)
+				children: (G, K) => g.children(() => G, K)
 			})),
-			EachCells: ({ EachCells: _ }) => _ || ((_) => createComponent(For, {
+			EachCells: ({ EachCells: g }) => g || ((g) => createComponent(For, {
 				get each() {
-					return _.each;
+					return g.each;
 				},
-				children: (K, q) => _.children(() => K, q)
+				children: (G, K) => g.children(() => G, K)
 			})),
-			renderer: ({ renderer: _ = (_) => _ }) => _
+			renderer: ({ renderer: g = (g) => g }) => g
 		},
-		layers: [function(_) {
-			return memo(() => memo(() => !!_.props.loading)() ? (() => {
-				var _ = _tmpl$0();
-				return insert(_, createComponent(loading_bold_default, { class: "text-2xl animate-spin" })), _;
+		layers: [function(g) {
+			return memo(() => memo(() => !!g.props.loading)() ? (() => {
+				var g = _tmpl$0();
+				return insert(g, createComponent(loading_bold_default, { class: "text-2xl animate-spin" })), g;
 			})() : null);
 		}]
 	};
@@ -364,30 +375,30 @@ const defaultsPlugins = [
 	CellSelectionPlugin,
 	{
 		name: "sticky-header",
-		rewriteProps: { Thead: ({ Thead: _ }) => (K) => {
-			let { props: q } = useContext(Ctx);
-			return K = combineProps({ get class() {
-				return q.stickyHeader ? "sticky-header" : "";
-			} }, K), createComponent(_, K);
+		rewriteProps: { Thead: ({ Thead: g }) => (G) => {
+			let { props: K } = useContext(Ctx);
+			return G = combineProps({ get class() {
+				return K.stickyHeader ? "sticky-header" : "";
+			} }, G), createComponent(g, G);
 		} }
 	},
 	HeaderGroupPlugin,
-	(_) => {
-		let K = createLazyMemo(() => {
-			let K = {};
-			for (let [q, J] of _.props.columns.entries()) J.fixed === "left" && (K[q] = sumBy(_.thSizes.slice(0, q), (_) => _?.width || 0)), J.fixed === "right" && (K[q] = sumBy(_.thSizes.slice(q + 1), (_) => _?.width || 0));
-			return K;
-		}), J = createLazyMemo(() => _.props.columns.filter((_) => _.fixed == "left").length - 1), Y = createLazyMemo(() => _.props.columns.length - _.props.columns.filter((_) => _.fixed == "right").length);
+	(g) => {
+		let G = createLazyMemo(() => {
+			let G = {};
+			for (let [K, q] of g.props.columns.entries()) q.fixed === "left" && (G[K] = sumBy(g.thSizes.slice(0, K), (g) => g?.width || 0)), q.fixed === "right" && (G[K] = sumBy(g.thSizes.slice(K + 1), (g) => g?.width || 0));
+			return G;
+		}), K = createLazyMemo(() => g.props.columns.filter((g) => g.fixed == "left").length - 1), J = createLazyMemo(() => g.props.columns.length - g.props.columns.filter((g) => g.fixed == "right").length);
 		return {
 			name: "fixed-column",
 			rewriteProps: {
-				columns: ({ columns: _ }) => [
-					..._?.filter((_) => _.fixed == "left") || [],
-					..._?.filter((_) => !_.fixed) || [],
-					..._?.filter((_) => _.fixed == "right") || []
+				columns: ({ columns: g }) => [
+					...g?.filter((g) => g.fixed == "left") || [],
+					...g?.filter((g) => !g.fixed) || [],
+					...g?.filter((g) => g.fixed == "right") || []
 				],
-				cellClass: ({ cellClass: _ }) => (K) => (unFn(_, K) || "") + (K.col.fixed ? ` fixed-${K.col.fixed} ${K.x == J() ? "is-last" : ""} ${K.x == Y() ? "is-first" : ""}` : ""),
-				cellStyle: ({ cellStyle: _ }) => (J) => (unFn(_, J) || "") + (J.col.fixed ? `; ${J.col.fixed}: ${K()[J.x]}px` : "")
+				cellClass: ({ cellClass: g }) => (G) => (unFn(g, G) || "") + (G.col.fixed ? ` fixed-${G.col.fixed} ${G.x == K() ? "is-last" : ""} ${G.x == J() ? "is-first" : ""}` : ""),
+				cellStyle: ({ cellStyle: g }) => (K) => (unFn(g, K) || "") + (K.col.fixed ? `; ${K.col.fixed}: ${G()[K.x]}px` : "")
 			}
 		};
 	},
@@ -398,17 +409,17 @@ const defaultsPlugins = [
 	{
 		name: "index",
 		priority: -Infinity,
-		store: (_) => ({ $index: {
+		store: (g) => ({ $index: {
 			name: "",
 			id: Symbol("index"),
 			fixed: "left",
-			[_.internal]: 1,
+			[g.internal]: 1,
 			width: 40,
 			style: "text-align: center",
 			class: "index",
-			render: solidComponent((_) => memo(() => _.y + 1))
+			render: solidComponent((g) => memo(() => g.y + 1))
 		} }),
-		rewriteProps: { columns: ({ columns: _ }, { store: K }) => K.props?.index ? [K.$index, ..._ || []] : _ }
+		rewriteProps: { columns: ({ columns: g }, { store: G }) => G.props?.index ? [G.$index, ...g || []] : g }
 	},
 	FilterPlugin,
 	SortPlugin,
@@ -418,11 +429,11 @@ const defaultsPlugins = [
 	TreePlugin,
 	{
 		name: "fit-col-width",
-		rewriteProps: { Table: ({ Table: _ }, { store: K }) => (q) => {
-			let J = createMemo(() => K.props.columns.some((_) => !_.width));
-			return q = combineProps(q, { get style() {
-				return J() ? "min-width: 100%" : "min-width: unset";
-			} }), createComponent(_, q);
+		rewriteProps: { Table: ({ Table: g }, { store: G }) => (K) => {
+			let q = createMemo(() => G.props.columns.some((g) => !g.width));
+			return K = combineProps(K, { get style() {
+				return q() ? "min-width: 100%" : "min-width: unset";
+			} }), createComponent(g, K);
 		} }
 	},
 	RowGroupPlugin,
@@ -432,6 +443,7 @@ const defaultsPlugins = [
 	ImportExportPlugin,
 	TooltipPlugin,
 	KeyEachPlugin,
-	PaginationPlugin
+	PaginationPlugin,
+	BranchGraphPlugin
 ];
 export { Ctx, Intable, src_default as default, defaultsPlugins };

package/dist/plugins/BranchGraphPlugin.d.ts

@@ -0,0 +1,24 @@
+import { type Plugin$0 } from '../index';
+declare module '../index' {
+    interface TableProps {
+        /**
+         * Render a git-style branch graph in a dedicated leading column.
+         *
+         * Each row links to its parent(s) via a `parentid` field (a single id or an
+         * array of ids for merge rows). Display order must be topological: a parent
+         * must appear above its children. The connecting lines are drawn as a single
+         * SVG overlay injected through `rewriteProps.Table`.
+         */
+        branchGraph?: {
+            /** Field holding a row's parent id(s). Default `'parentid'`. */
+            parentField?: string;
+            /** Branch graph column width. Default `120`. */
+            width?: number;
+            /** Pixel gap between lanes. Default `18`. */
+            laneGap?: number;
+            /** Lane color palette (cycled by lane index). */
+            colors?: string[];
+        };
+    }
+}
+export declare const BranchGraphPlugin: Plugin$0;