intable 0.0.23 → 0.0.24

package/dist/index.js

@@ -17,120 +17,122 @@ import { CellMergePlugin } from "./plugins/CellMergePlugin.js";
 import { TreePlugin } from "./plugins/TreePlugin.js";
 import { HeaderGroupPlugin } from "./plugins/HeaderGroup.js";
 import { ValidatorPlugin } from "./plugins/ValidatorPlugin.js";
-import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { $PROXY, For, batch, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { $PROXY, For, batch, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
 import { createMutable, reconcile } from "solid-js/store";
 import { combineProps } from "@solid-primitives/props";
 import { createLazyMemo } from "@solid-primitives/memo";
 import { createElementSize, createResizeObserver, makeResizeObserver } from "@solid-primitives/resize-observer";
 import { createScrollPosition } from "@solid-primitives/scroll";
 import { difference, isEqual, memoize, sumBy } from "es-toolkit";
-var _tmpl$ = /* @__PURE__ */ template("<table>"), _tmpl$2 = /* @__PURE__ */ template("<thead>"), _tmpl$3 = /* @__PURE__ */ template("<tbody>"), _tmpl$4 = /* @__PURE__ */ template("<tr>"), _tmpl$5 = /* @__PURE__ */ template("<th>"), _tmpl$6 = /* @__PURE__ */ template("<td>"), _tmpl$7 = /* @__PURE__ */ template("<div tabindex=-1><div class=data-table__layers></div><table class=data-table--table>"), _tmpl$8 = /* @__PURE__ */ template("<div class=data-table__empty>No data");
+var _tmpl$ = /* @__PURE__ */ template("<div>"), _tmpl$2 = /* @__PURE__ */ template("<table>"), _tmpl$3 = /* @__PURE__ */ template("<thead>"), _tmpl$4 = /* @__PURE__ */ template("<tbody>"), _tmpl$5 = /* @__PURE__ */ template("<tr>"), _tmpl$6 = /* @__PURE__ */ template("<th>"), _tmpl$7 = /* @__PURE__ */ template("<td>"), _tmpl$8 = /* @__PURE__ */ template("<div class=data-table__layers>"), _tmpl$9 = /* @__PURE__ */ template("<div class=data-table__empty>No data");
 const Ctx = createContext({
 	props: {},
 	store: {}
-}), Intable = (q) => {
-	q = mergeProps$1({ rowKey: "id" }, q);
-	let J = getOwner(), Y = createMutable({
+}), Intable = (K) => {
+	K = mergeProps$1({ rowKey: "id" }, K);
+	let q = getOwner(), J = createMutable({
 		get rawProps() {
-			return q;
+			return K;
 		},
 		get plugins() {
-			return Z();
+			return X();
 		}
-	}), X = memoize((q) => runWithOwner(J, () => unFn(q, Y))), Z = createMemo((v) => {
-		let Z = [
-			...defaultsPlugins,
-			...q.plugins || [],
-			RenderPlugin
-		].map(X).sort((v, q) => (q.priority || 0) - (v.priority || 0)), $ = difference(Z, v);
-		return runWithOwner(J, () => {
-			$.forEach((v) => Object.assign(Y, v.store?.(Y)));
-		}), Z;
-	}, []);
-	Y.props = (() => {
-		let v = getOwner(), J = {}, X = (q) => J[q] ??= runWithOwner(v, () => createMemo(() => Q(q)));
-		function Q(v) {
-			return createMemo(() => Z().map((q) => q.rewriteProps?.[v]).filter((v) => v), void 0, { equals: isEqual })().reduce((q, J) => J({ [v]: q }, { store: Y }), q[v]);
+	}), Y = memoize((K) => runWithOwner(q, () => unFn(K, J))), X = createMemo(() => [
+		...defaultsPlugins,
+		...K.plugins || [],
+		RenderPlugin
+	].map(Y).sort((_, K) => (K.priority || 0) - (_.priority || 0)));
+	createComputed((_) => {
+		let K = difference(X(), _);
+		return runWithOwner(q, () => {
+			K.forEach((_) => Object.assign(J, _.store?.(J)));
+		}), X();
+	}, []), J.props = (() => {
+		let _ = getOwner(), q = {}, Y = (K) => q[K] ??= runWithOwner(_, () => createMemo(() => Z(K)));
+		function Z(_) {
+			return createMemo(() => X().map((K) => K.rewriteProps?.[_]).filter((_) => _), void 0, { equals: isEqual })().reduce((K, q) => q({ [_]: K }, { store: J }), K[_]);
 		}
-		return new Proxy({}, { get(v, q, J) {
-			return q == $PROXY ? J : X(q)();
+		return new Proxy({}, { get(_, K, q) {
+			return K == $PROXY ? q : Y(K)();
 		} });
 	})(), onMount(() => {
-		createEffect(mapArray(Z, (v) => v.onMount?.(Y)));
+		createEffect(mapArray(X, (_) => _.onMount?.(J)));
 	});
-	let $ = createMutable({
-		props: Y.props,
-		store: Y
+	let Q = createMutable({
+		props: J.props,
+		store: J
 	});
-	return window.store = Y, window.ctx = $, createEffect(async () => {
-		let v = Y.props.store;
-		await Promise.resolve(), v && (typeof v == "function" ? v(Y) : "value" in v ? v.value = Y : "current" in v && (v.current = Y));
+	return window.store = J, window.ctx = Q, createEffect(async () => {
+		let _ = J.props.store;
+		await Promise.resolve(), _ && (typeof _ == "function" ? _(J) : "value" in _ ? _.value = J : "current" in _ && (_.current = J));
 	}), createComponent(Ctx.Provider, {
-		value: $,
+		value: Q,
 		get children() {
-			return createComponent($.props.Table, { get children() {
-				return [createComponent(THead, {}), createComponent(TBody, {})];
+			return createComponent(Q.props.Scroll, { get children() {
+				return createComponent(Q.props.Table, { get children() {
+					return [createComponent(THead, {}), createComponent(TBody, {})];
+				} });
 			} });
 		}
 	});
 };
 var THead = () => {
-	let { props: v, store: q } = useContext(Ctx);
-	return createComponent(v.Thead, { get children() {
-		return createComponent(v.Tr, { get children() {
-			return createComponent(v.EachCells, {
+	let { props: _, store: K } = useContext(Ctx);
+	return createComponent(_.Thead, { get children() {
+		return createComponent(_.Tr, { get children() {
+			return createComponent(_.EachCells, {
 				get each() {
-					return v.columns || [];
+					return _.columns || [];
 				},
-				children: (J, Y) => createComponent(v.Th, {
+				children: (q, J) => createComponent(_.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: v } = useContext(Ctx);
-	return createComponent(v.Tbody, { get children() {
-		return createComponent(v.EachRows, {
+	let { props: _ } = useContext(Ctx);
+	return createComponent(_.Tbody, { get children() {
+		return createComponent(_.EachRows, {
 			get each() {
-				return v.data;
+				return _.data;
 			},
-			children: (q, J) => createComponent(v.Tr, {
+			children: (K, q) => createComponent(_.Tr, {
 				get y() {
-					return J();
+					return q();
 				},
 				get data() {
-					return q();
+					return K();
 				},
 				get children() {
-					return createComponent(v.EachCells, {
+					return createComponent(_.EachCells, {
 						get each() {
-							return v.columns;
+							return _.columns;
 						},
-						children: (Y, X) => createComponent(v.Td, {
+						children: (J, Y) => createComponent(_.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 children() {
-								return q()[Y().id];
+								return K()[J().id];
 							}
 						})
 					});
@@ -140,56 +142,59 @@ var THead = () => {
 	} });
 }, src_default = Intable;
 function BasePlugin() {
-	let q = {
+	let K = {
 		col: null,
 		data: null
-	}, J = (v) => (() => {
-		var q = _tmpl$();
-		return spread(q, v, !1, !1), q;
-	})(), Y = (v) => (() => {
-		var q = _tmpl$2();
-		return spread(q, v, !1, !1), q;
-	})(), X = (v) => (() => {
-		var q = _tmpl$3();
-		return spread(q, v, !1, !1), q;
-	})(), Z = (v) => (() => {
-		var J = _tmpl$4();
-		return spread(J, mergeProps(v, q), !1, !1), J;
-	})(), Q = (v) => (() => {
-		var J = _tmpl$5();
-		return spread(J, mergeProps(v, q), !1, !1), J;
-	})(), $ = (v) => (() => {
-		var J = _tmpl$6();
-		return spread(J, mergeProps(v, q), !1, !1), J;
+	}, q = (_) => (() => {
+		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 = (_) => (() => {
+		var q = _tmpl$5();
+		return spread(q, mergeProps(_, K), !1, !1), q;
+	})(), Q = (_) => (() => {
+		var q = _tmpl$6();
+		return spread(q, mergeProps(_, K), !1, !1), q;
+	})(), $ = (_) => (() => {
+		var q = _tmpl$7();
+		return spread(q, mergeProps(_, K), !1, !1), q;
 	})();
 	return {
 		name: "base",
 		priority: Infinity,
-		store: (v) => {
-			let q = makeResizeObserver((q) => {
+		store: (_) => {
+			let K = makeResizeObserver((K) => {
 				batch(() => {
-					for (let J of q) {
-						let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = q.getAttribute("x");
-						Z >= 0 && q.parentElement && (v.thSizes[Z] = {
-							width: Y,
-							height: X
+					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
 						});
 					}
 				});
-			}), J = makeResizeObserver(async (q) => {
+			}), q = makeResizeObserver((K) => {
 				batch(() => {
-					for (let J of q) {
-						let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = q.getAttribute("y");
-						Z >= 0 && q.parentElement && (v.trSizes[Z] = {
-							width: Y,
-							height: X
+					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
 						});
 					}
 				});
 			});
 			return {
-				thObs: q,
-				trObs: J,
+				thObs: K,
+				trObs: q,
 				ths: [],
 				thSizes: [],
 				trs: [],
@@ -200,202 +205,206 @@ function BasePlugin() {
 			};
 		},
 		rewriteProps: {
-			data: ({ data: v = [] }) => v,
-			columns: ({ columns: v = [] }) => v,
-			newRow: ({ newRow: v = () => ({}) }) => v,
-			Table: ({ Table: v = J }, { store: q }) => (q) => {
-				let [J, Y] = createSignal(), { props: X } = useContext(Ctx);
-				return q = combineProps({
-					ref: Y,
+			data: ({ data: _ = [] }) => _,
+			columns: ({ columns: _ = [] }) => _,
+			newRow: ({ newRow: _ = () => ({}) }) => _,
+			Scroll: ({ Scroll: _ = q }, { store: K }) => (q) => {
+				let J = createScrollPosition(() => K.scroll_el), Y = createElementSize(() => K.scroll_el), X = createMemo(() => {
+					let _ = K.scroll_el;
+					if (!_) return;
+					let q = J.x == 0, X = J.x >= _.scrollWidth - (Y.width || 0);
+					return q && X ? "" : !q && !X ? "is-scroll-mid" : q ? "is-scroll-left" : X ? "is-scroll-right" : "";
+				});
+				q = combineProps(q, {
+					ref: (_) => K.scroll_el = _,
+					class: "data-table--scroll-view"
+				}, { get class() {
+					return `data-table ${K.props.border && "data-table--border"} data-table--${K.props.size}`;
+				} }, {
 					get class() {
-						return `data-table ${X.class} ${X.border && "data-table--border"} data-table--${X.size}`;
+						return K.props.class;
 					},
 					get style() {
-						return X.style;
+						return K.props.style;
 					}
-				}, q), createComponent(v, q);
+				}, { get class() {
+					return X();
+				} });
+				let Z = mapArray(() => K.plugins.flatMap((_) => _.layers ?? []), (_) => createComponent(_, K));
+				return createComponent(_, mergeProps({ tabindex: -1 }, q, { get children() {
+					return [
+						(() => {
+							var _ = _tmpl$8();
+							return insert(_, Z), _;
+						})(),
+						memo(() => q.children),
+						createComponent(K.props.Footer, {}),
+						memo(() => memo(() => !K.props.data.length)() && _tmpl$9())
+					];
+				} }));
 			},
-			Thead: ({ Thead: v = Y }, { store: q }) => (J) => (J = combineProps({ ref: (v) => q.thead = v }, J), createComponent(v, J)),
-			Tbody: ({ Tbody: v = X }, { store: q }) => (J) => (J = combineProps({ ref: (v) => q.tbody = v }, J), createComponent(v, J)),
-			Tr: ({ Tr: v = Z }, { store: q }) => (J) => {
-				let [Y, X] = createSignal();
-				return J = combineProps({ ref: X }, J), createEffect(() => {
-					let { y: v } = J;
-					v != null && (q.trs[v] = Y(), q.trObs.observe(Y()), onCleanup(() => {
-						q.trSizes[v] = q.trs[v] = void 0, q.trObs.unobserve(Y());
+			Footer: ({ Footer: _ }) => (_ ??= (_) => (() => {
+				var K = _tmpl$();
+				return spread(K, mergeProps(() => combineProps({ class: "data-table__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.trSizes[_] = K.trs[_] = void 0, K.trObs.unobserve(J());
 					}));
-				}), createComponent(v, J);
+				}), createComponent(_, q);
 			},
-			Th: ({ Th: q = Q }, { store: J }) => (Y) => {
-				let [X, Z] = createSignal(), { props: Q } = useContext(Ctx), $ = combineProps(Y, { ref: Z }, {
+			Th: ({ Th: K = Q }, { store: q }) => (J) => {
+				let [Y, X] = createSignal(), { props: Z } = useContext(Ctx), Q = combineProps(J, { ref: X }, {
 					get class() {
-						return unFn(Q.cellClass, Y);
+						return unFn(Z.cellClass, J);
 					},
 					get style() {
-						return unFn(Q.cellStyle, Y);
+						return unFn(Z.cellStyle, J);
 					}
 				}, {
 					get class() {
-						return Y.col.class;
+						return J.col.class;
 					},
 					get style() {
-						return Y.col.style;
+						return J.col.style;
 					}
 				}, { get style() {
-					return Y.col.width ? `width: ${Y.col.width}px` : "";
+					return J.col.width ? `width: ${J.col.width}px` : "";
 				} });
 				return createEffect(() => {
-					if (Y.covered || (Y.colspan ?? 1) != 1) return;
-					let { x: v } = Y;
-					J.ths[v] = X(), J.thObs.observe(X()), onCleanup(() => {
-						J.thSizes[v] = J.ths[v] = void 0, J.thObs.unobserve(X());
+					if (J.covered || (J.colspan ?? 1) != 1) return;
+					let { x: _ } = J;
+					q.ths[_] = Y(), q.thObs.observe(Y()), onCleanup(() => {
+						q.thSizes[_] = q.ths[_] = void 0, q.thObs.unobserve(Y());
 					});
-				}), createComponent(q, mergeProps($, { get children() {
-					return Y.children;
+				}), createComponent(K, mergeProps(Q, { get children() {
+					return J.children;
 				} }));
 			},
-			Td: ({ Td: q = $ }, { store: J }) => (J) => {
-				let { props: Y } = useContext(Ctx), X = combineProps(J, {
+			Td: ({ Td: K = $ }, { store: q }) => (q) => {
+				let { props: J } = useContext(Ctx), Y = combineProps(q, {
 					get class() {
-						return unFn(Y.cellClass, J);
+						return unFn(J.cellClass, q);
 					},
 					get style() {
-						return unFn(Y.cellStyle, J);
+						return unFn(J.cellStyle, q);
 					}
 				}, {
 					get class() {
-						return J.col.class;
+						return q.col.class;
 					},
 					get style() {
-						return J.col.style;
+						return q.col.style;
 					}
 				}, { get style() {
-					return J.col.width ? `width: ${J.col.width}px` : "";
+					return q.col.width ? `width: ${q.col.width}px` : "";
 				} });
-				return createComponent(q, mergeProps(X, { get children() {
-					return J.children;
+				return createComponent(K, mergeProps(Y, { get children() {
+					return q.children;
 				} }));
 			},
-			EachRows: ({ EachRows: v }) => v || ((v) => createComponent(For, {
+			EachRows: ({ EachRows: _ }) => _ || ((_) => createComponent(For, {
 				get each() {
-					return v.each;
+					return _.each;
 				},
-				children: (q, J) => v.children(() => q, J)
+				children: (K, q) => _.children(() => K, q)
 			})),
-			EachCells: ({ EachCells: v }) => v || ((v) => createComponent(For, {
+			EachCells: ({ EachCells: _ }) => _ || ((_) => createComponent(For, {
 				get each() {
-					return v.each;
+					return _.each;
 				},
-				children: (q, J) => v.children(() => q, J)
+				children: (K, q) => _.children(() => K, q)
 			})),
-			renderer: ({ renderer: v = (v) => v }) => v
+			renderer: ({ renderer: _ = (_) => _ }) => _
 		}
 	};
 }
-var IndexPlugin = {
-	name: "index",
-	priority: -Infinity,
-	store: (v) => ({ $index: {
-		name: "",
-		id: Symbol("index"),
-		fixed: "left",
-		[v.internal]: 1,
-		width: 40,
-		style: "text-align: center",
-		class: "index",
-		render: solidComponent((v) => memo(() => v.y + 1))
-	} }),
-	rewriteProps: { columns: ({ columns: v }, { store: q }) => q.props?.index ? [q.$index, ...v || []] : v }
-}, StickyHeaderPlugin = {
-	name: "sticky-header",
-	rewriteProps: { Thead: ({ Thead: v }) => (q) => {
-		let { props: J } = useContext(Ctx);
-		return q = combineProps({ get class() {
-			return J.stickyHeader ? "sticky-header" : "";
-		} }, q), createComponent(v, q);
-	} }
-}, FixedColumnPlugin = (q) => {
-	let J = createLazyMemo(() => {
-		let v = {};
-		for (let [J, Y] of q.props.columns.entries()) Y.fixed === "left" && (v[J] = sumBy(q.thSizes.slice(0, J), (v) => v?.width || 0)), Y.fixed === "right" && (v[J] = sumBy(q.thSizes.slice(J + 1), (v) => v?.width || 0));
-		return v;
-	}), Y = createLazyMemo(() => q.props.columns.filter((v) => v.fixed == "left").length - 1), X = createLazyMemo(() => q.props.columns.length - q.props.columns.filter((v) => v.fixed == "right").length);
-	return {
-		name: "fixed-column",
-		rewriteProps: {
-			columns: ({ columns: v }) => [
-				...v?.filter((v) => v.fixed == "left") || [],
-				...v?.filter((v) => !v.fixed) || [],
-				...v?.filter((v) => v.fixed == "right") || []
-			],
-			cellClass: ({ cellClass: q }) => (J) => (unFn(q, J) || "") + (J.col.fixed ? ` fixed-${J.col.fixed} ${J.x == Y() ? "is-last" : ""} ${J.x == X() ? "is-first" : ""}` : ""),
-			cellStyle: ({ cellStyle: q }) => (Y) => (unFn(q, Y) || "") + (Y.col.fixed ? `; ${Y.col.fixed}: ${J()[Y.x]}px` : "")
-		}
-	};
-}, FitColWidthPlugin = (v) => {
-	let q = createMutable({ width: 0 });
-	createResizeObserver(() => v.scroll_el, (v, J, Y) => q.width = Y.contentBoxSize[0].inlineSize);
-	let J = createMutable([]), Y = !1;
-	return createEffect(on(() => [q.width, v.props.columns.map((v) => v.width)], async () => {
-		if (!q.width || Y) return;
-		J.length = 0, Y = !0, await Promise.resolve();
-		let X = (q.width - v.table.getBoundingClientRect().width) / v.props.columns.filter((v) => !v.width).length, Z = v.props.columns.map((q, J) => q.width ? null : { width: Math.max((v.ths[J]?.getBoundingClientRect().width || 0) + X, 80) });
-		J.push(...Z), Y = !1;
-	})), {
-		name: "fit-col-width",
-		priority: -Infinity,
-		rewriteProps: { columns: ({ columns: v }, { store: q }) => (v = v.map((v, Y) => ({
-			...v,
-			...J?.[Y],
-			[q.ID]: v[q.ID] ??= Symbol()
-		})), untrack(() => batch(() => reconcile(v, { key: q.ID })(q.__fit_col_width__cols ??= [])))) }
-	};
-};
-const ScrollPlugin = {
-	name: "scroll",
-	priority: Infinity,
-	rewriteProps: { Table: (v, { store: q }) => (v) => {
-		let J = createScrollPosition(() => q.scroll_el), Y = createElementSize(() => q.scroll_el), X = createMemo(() => {
-			let v = q.scroll_el;
-			if (!v) return;
-			let X = J.x == 0, Z = J.x >= v.scrollWidth - (Y.width || 0);
-			return X && Z ? "" : !X && !Z ? "is-scroll-mid" : X ? "is-scroll-left" : Z ? "is-scroll-right" : "";
-		});
-		v = combineProps(v, {
-			ref: (v) => q.scroll_el = v,
-			class: "data-table--scroll-view"
-		}, { get class() {
-			return X();
-		} });
-		let Z = mapArray(() => q.plugins.flatMap((v) => v.layers ?? []), (v) => createComponent(v, q));
-		return (() => {
-			var J = _tmpl$7(), Y = J.firstChild, X = Y.nextSibling;
-			return spread(J, v, !1, !0), insert(Y, Z), use((v) => q.table = v, X), insert(X, () => v.children), insert(J, (() => {
-				var v = memo(() => !q.props.data.length);
-				return () => v() && _tmpl$8();
-			})(), null), J;
-		})();
-	} }
-}, defaultsPlugins = [
-	ScrollPlugin,
+const defaultsPlugins = [
 	BasePlugin,
 	CommandPlugin,
 	MenuPlugin,
 	CellSelectionPlugin,
-	StickyHeaderPlugin,
+	{
+		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);
+		} }
+	},
 	HeaderGroupPlugin,
-	FixedColumnPlugin,
+	(K) => {
+		let q = createLazyMemo(() => {
+			let _ = {};
+			for (let [q, J] of K.props.columns.entries()) J.fixed === "left" && (_[q] = sumBy(K.thSizes.slice(0, q), (_) => _?.width || 0)), J.fixed === "right" && (_[q] = sumBy(K.thSizes.slice(q + 1), (_) => _?.width || 0));
+			return _;
+		}), J = createLazyMemo(() => K.props.columns.filter((_) => _.fixed == "left").length - 1), Y = createLazyMemo(() => K.props.columns.length - K.props.columns.filter((_) => _.fixed == "right").length);
+		return {
+			name: "fixed-column",
+			rewriteProps: {
+				columns: ({ columns: _ }) => [
+					..._?.filter((_) => _.fixed == "left") || [],
+					..._?.filter((_) => !_.fixed) || [],
+					..._?.filter((_) => _.fixed == "right") || []
+				],
+				cellClass: ({ cellClass: K }) => (q) => (unFn(K, q) || "") + (q.col.fixed ? ` fixed-${q.col.fixed} ${q.x == J() ? "is-last" : ""} ${q.x == Y() ? "is-first" : ""}` : ""),
+				cellStyle: ({ cellStyle: K }) => (J) => (unFn(K, J) || "") + (J.col.fixed ? `; ${J.col.fixed}: ${q()[J.x]}px` : "")
+			}
+		};
+	},
 	DragPlugin,
 	ClipboardPlugin,
 	ExpandPlugin,
 	RowSelectionPlugin,
-	IndexPlugin,
+	{
+		name: "index",
+		priority: -Infinity,
+		store: (_) => ({ $index: {
+			name: "",
+			id: Symbol("index"),
+			fixed: "left",
+			[_.internal]: 1,
+			width: 40,
+			style: "text-align: center",
+			class: "index",
+			render: solidComponent((_) => memo(() => _.y + 1))
+		} }),
+		rewriteProps: { columns: ({ columns: _ }, { store: K }) => K.props?.index ? [K.$index, ..._ || []] : _ }
+	},
 	ValidatorPlugin,
 	EditablePlugin,
 	CellMergePlugin,
 	TreePlugin,
-	FitColWidthPlugin,
+	(_) => {
+		let K = createMutable({ width: 0 });
+		createResizeObserver(() => _.scroll_el, (_, q, J) => K.width = J.contentBoxSize[0].inlineSize);
+		let q = createMutable([]), J = !1;
+		return createEffect(on(() => [K.width, _.props.columns.map((_) => _.width)], async () => {
+			if (!K.width || J) return;
+			q.length = 0, J = !0, await Promise.resolve();
+			let Y = (K.width - _.table.getBoundingClientRect().width) / _.props.columns.filter((_) => !_.width).length, X = _.props.columns.map((K, q) => K.width ? null : { width: Math.max((_.ths[q]?.getBoundingClientRect().width || 0) + Y, 80) });
+			q.push(...X), J = !1;
+		})), {
+			name: "fit-col-width",
+			priority: -Infinity,
+			rewriteProps: { columns: ({ columns: _ }, { store: K }) => (_ = _.map((_, J) => ({
+				..._,
+				...q?.[J],
+				[K.ID]: _[K.ID] ??= Symbol()
+			})), untrack(() => batch(() => reconcile(_, { key: K.ID })(K.__fit_col_width__cols ??= [])))) }
+		};
+	},
 	RowGroupPlugin,
 	ResizePlugin
 ];
-export { Ctx, Intable, ScrollPlugin, src_default as default, defaultsPlugins };
+export { Ctx, Intable, src_default as default, defaultsPlugins };

package/dist/plugins/FilterPlugin.d.ts

@@ -2,7 +2,11 @@ import type { Plugin } from '..';
 import type { AndOrNode } from '../components/AndOr';
 declare module '../index' {
     interface TableProps {
-        filterable?: boolean;
+        filter?: {
+            onChange?: (value: AndOrNode[]) => void;
+            /** @default true */
+            autoMatch?: boolean;
+        };
     }
     interface TableColumn {
         filterable?: boolean;