flexi-datagrid 1.2.6 → 1.2.7

package/dist/index.es.js

@@ -1,17 +1,17 @@
-import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronRight as i, Filter as a, Pin as o, PinOff as s, X as ee } from "lucide-react";
-import { useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { createPortal as te } from "react-dom";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/DataTable.tsx
+import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronLeft as i, ChevronRight as a, ChevronsLeft as o, ChevronsRight as s, Filter as ee, Pin as te, PinOff as ne, RotateCcw as re, Settings as ie, X as c } from "lucide-react";
+import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { createPortal as ae } from "react-dom";
+import { Fragment as oe, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/Datatable.tsx
 var h = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		e.children && e.children.length > 0 ? t.push(...h(e.children)) : t.push(e);
 	}), t;
-}, g = (...e) => e.filter(Boolean).join(" "), ne = (e) => {
+}, g = (...e) => e.filter(Boolean).join(" "), se = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-}, re = (e, t, n) => {
+}, ce = (e, t, n) => {
 	let r = (e) => {
 		let n = t[e];
 		return n === "left" ? 0 : n === "right" ? 2 : 1;
@@ -26,42 +26,69 @@ var h = (e) => {
 		children: i(e.children)
 	} : e);
 	return i(e);
-}, ie = 48, ae = 150, oe = 60;
-function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy: x = !1, defaultGroupBy: ce = [], onPinChange: le, onGroupChange: S, containerStyle: ue, tableStyle: de, bordered: fe = !1, pinnedBottomRowData: C = [], pinnedRowClassName: pe, rowHeight: w = ie, overscan: me = 8, onColumnResize: he, onColumnReorder: ge, rowClassRules: _e, onRowClick: T }) {
-	let [E, ve] = d(null), [D, ye] = d({}), [O, k] = d(""), [A, be] = d(null), j = u(/* @__PURE__ */ new Map()), [M, xe] = d(ce), [N, Se] = d({}), [Ce, P] = d(!1), [F, we] = d({
+}, le = 48, ue = 150, de = 60;
+function _({ columns: _, data: v, rowKey: fe, actions: y, isLoading: pe, groupBy: b = !1, defaultGroupBy: me = [], onPinChange: he, onGroupChange: x, containerStyle: ge, tableStyle: _e, bordered: ve = !1, pinnedBottomRowData: S = [], pinnedRowClassName: ye, rowHeight: C = le, overscan: be = 8, onColumnResize: xe, onColumnReorder: Se, rowClassRules: Ce, onRowClick: we, rowSpanColumns: w, controlPanel: Te = !1, defaultDisplayPinnedIcon: Ee = !0, defaultHiddenColumns: De = [], onColumnVisibilityChange: T, pagination: E = !1, defaultPageSize: Oe = 10, pageSizeOptions: ke = [
+	10,
+	25,
+	50,
+	100
+], onPageChange: D }) {
+	let [O, Ae] = f(null), [k, je] = f({}), [A, Me] = f(""), [Ne, Pe] = f(null), [Fe, Ie] = f(null), j = d(/* @__PURE__ */ new Map()), [M, Le] = f(me), [Re, ze] = f({}), [Be, Ve] = f(!1), [N, He] = f({
 		key: null,
 		direction: null
-	}), [I, Te] = d({}), [L, Ee] = d({}), R = u(null), z = u(!1), B = u(null), V = l(() => h(_), [_]), [H, De] = d(() => {
+	}), [Ue, We] = f({}), [Ge, Ke] = f({}), [qe, Je] = f(Ee), [P, Ye] = f(De), [F, Xe] = f(!1), Ze = d(null), I = d(null), [L, R] = f(1), [z, Qe] = f(Oe), $e = d(null), et = d(!1), B = d(null), V = u(() => h(_), [_]), [H, tt] = f(() => {
 		let e = {};
 		return V.forEach((t) => {
-			let n = ne(t.pinned);
+			let n = se(t.pinned);
 			n && (e[t.key] = n);
 		}), e;
-	}), U = l(() => re(_, H, L), [
+	}), U = u(() => ce(_, H, Ge), [
 		_,
 		H,
-		L
-	]), W = l(() => {
-		let e = h(U), t = x ? M : [];
-		return e.filter((e) => !t.includes(e.key));
+		Ge
+	]), W = u(() => {
+		let e = h(U), t = b ? M : [];
+		return e.filter((e) => !t.includes(e.key) && !P.includes(e.key));
 	}, [
 		U,
 		M,
-		x
-	]), G = u(null), K = u(null);
-	c(() => {
+		b,
+		P
+	]), G = d(null), nt = d(null);
+	l(() => {
+		function e(e) {
+			let t = e.target, n = O ? j.current.get(O) : null;
+			nt.current && !nt.current.contains(t) && !(n && n.contains(t)) && (Ae(null), Me(""));
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [O]), l(() => {
+		if (!F) return;
 		function e(e) {
-			let t = e.target, n = E ? j.current.get(E) : null;
-			K.current && !K.current.contains(t) && !(n && n.contains(t)) && (ve(null), k(""));
+			let t = e.target;
+			Ze.current && !Ze.current.contains(t) && !(I.current && I.current.contains(t)) && Xe(!1);
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [E]), c(() => {
-		if (!E) return;
+	}, [F]), l(() => {
+		if (!F) return;
+		let e = () => {
+			let e = I.current, t = G.current;
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+			Ie({
+				top: n.bottom - r.top + 4,
+				right: r.right - n.right
+			});
+		};
+		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [F]), l(() => {
+		if (!O) return;
 		let e = () => {
-			let e = j.current.get(E), t = G.current;
+			let e = j.current.get(O), t = G.current;
 			if (!e || !t) return;
 			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
-			be({
+			Pe({
 				top: n.bottom - r.top + 4,
 				left: n.left - r.left
 			});
@@ -69,87 +96,94 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [E]);
-	let Oe = (e) => typeof y == "function" ? y(e) : String(e[y]), ke = (e, t) => {
-		if (!_e) return;
+	}, [O]);
+	let rt = (e) => typeof fe == "function" ? fe(e) : String(e[fe]), it = (e, t) => {
+		if (!Ce) return;
 		let n;
-		for (let r in _e) _e[r](e, t) && (n = n ? `${n} ${r}` : r);
+		for (let r in Ce) Ce[r](e, t) && (n = n ? `${n} ${r}` : r);
 		return n;
-	}, Ae = (e) => {
-		De((t) => {
+	}, at = (e) => {
+		tt((t) => {
 			let n = t[e], r = n ? n === "left" ? "right" : void 0 : "left", i = { ...t };
-			return r ? i[e] = r : delete i[e], le && le(e, !!r, r), i;
+			return r ? i[e] = r : delete i[e], he && he(e, !!r, r), i;
+		});
+	}, ot = (e) => {
+		Ye((t) => {
+			let n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
+			return T && T(n), n;
 		});
-	}, je = (e) => {
+	}, st = () => {
+		Je(Ee), Ye(De), T && T(De);
+	}, ct = (e) => {
 		let t = "asc";
-		F.key === e && (t = F.direction === "asc" ? "desc" : F.direction === "desc" ? null : "asc"), we({
+		N.key === e && (t = N.direction === "asc" ? "desc" : N.direction === "desc" ? null : "asc"), He({
 			key: t ? e : null,
 			direction: t
 		});
-	}, Me = (e, t, n) => {
-		if (z.current) {
+	}, lt = (e, t, n) => {
+		if (et.current) {
 			e.preventDefault();
 			return;
 		}
-		R.current = t, n && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
-	}, Ne = (e, t, n) => {
+		$e.current = t, n && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
+	}, ut = (e, t, n) => {
 		let r = e.map((e) => e.key);
 		if (r.includes(t) && r.includes(n)) return e;
 		for (let r of e) if (r.children && r.children.length > 0) {
-			let e = Ne(r.children, t, n);
+			let e = ut(r.children, t, n);
 			if (e) return e;
 		}
 		return null;
-	}, Pe = (e, t) => {
+	}, dt = (e, t) => {
 		e.preventDefault(), e.stopPropagation();
-		let n = R.current;
-		if (R.current = null, !n || n === t) return;
-		let r = Ne(U, n, t);
+		let n = $e.current;
+		if ($e.current = null, !n || n === t) return;
+		let r = ut(U, n, t);
 		if (!r) return;
 		let i = r.map((e) => e.key), a = i.indexOf(n), o = i.indexOf(t);
 		i.splice(o, 0, i.splice(a, 1)[0]);
-		let s = { ...L };
+		let s = { ...Ge };
 		i.forEach((e, t) => {
 			s[e] = t;
-		}), Ee(s), ge && ge(h(re(_, H, s)).map((e) => e.key));
-	}, Fe = (e, t) => {
-		e.preventDefault(), e.stopPropagation(), z.current = !0, B.current = {
+		}), Ke(s), Se && Se(h(ce(_, H, s)).map((e) => e.key));
+	}, ft = (e, t) => {
+		e.preventDefault(), e.stopPropagation(), et.current = !0, B.current = {
 			key: t.key,
 			startX: e.clientX,
-			startWidth: J(t)
+			startWidth: K(t)
 		};
-		let n = t.minWidth ?? oe, r = t.maxWidth, i = (e) => {
+		let n = t.minWidth ?? de, r = t.maxWidth, i = (e) => {
 			let t = B.current;
 			if (!t) return;
 			let i = t.startWidth + (e.clientX - t.startX);
-			i = Math.max(n, i), r && (i = Math.min(r, i)), Te((e) => e[t.key] === i ? e : {
+			i = Math.max(n, i), r && (i = Math.min(r, i)), We((e) => e[t.key] === i ? e : {
 				...e,
 				[t.key]: i
 			});
 		}, a = () => {
 			let e = B.current;
 			B.current = null, window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", a), requestAnimationFrame(() => {
-				z.current = !1;
-			}), e && he && Te((t) => (t[e.key] !== void 0 && he(e.key, t[e.key]), t));
+				et.current = !1;
+			}), e && xe && We((t) => (t[e.key] !== void 0 && xe(e.key, t[e.key]), t));
 		};
 		window.addEventListener("mousemove", i), window.addEventListener("mouseup", a);
-	}, Ie = (e) => {
-		e.preventDefault(), P(!1);
+	}, pt = (e) => {
+		e.preventDefault(), Ve(!1);
 		let t = e.dataTransfer.getData("text/plain");
 		if (t && !M.includes(t)) {
 			let e = [...M, t];
-			xe(e), S && S(e);
+			Le(e), x && x(e);
 		}
-	}, Le = (e) => {
+	}, mt = (e) => {
 		let t = M.filter((t) => t !== e);
-		xe(t), Se({}), S && S(t);
-	}, q = l(() => {
+		Le(t), ze({}), x && x(t);
+	}, ht = u(() => {
 		let e = (t) => {
 			let n = 0;
 			return t.forEach((t) => {
 				n = t.children && t.children.length > 0 ? Math.max(n, 1 + e(t.children)) : Math.max(n, 1);
 			}), n;
-		}, t = e(U), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? M.includes(e.key) && x ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = x ? M : [], a = (e, o) => {
+		}, t = e(U), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? b && M.includes(e.key) || P.includes(e.key) ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = b ? M : [], a = (e, o) => {
 			e.forEach((e) => {
 				if (i.includes(e.key)) return;
 				let s = r(e);
@@ -168,70 +202,71 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 	}, [
 		U,
 		M,
-		x
-	]), J = (e) => {
-		if (I[e.key] !== void 0) return I[e.key];
-		let t = e.style?.width || e.headerStyle?.width || `${ae}px`;
-		return typeof t == "number" ? t : parseInt(String(t), 10) || ae;
-	}, Re = l(() => {
+		b,
+		P
+	]), K = (e) => {
+		if (Ue[e.key] !== void 0) return Ue[e.key];
+		let t = e.style?.width || e.headerStyle?.width || `${ue}px`;
+		return typeof t == "number" ? t : parseInt(String(t), 10) || ue;
+	}, gt = u(() => {
 		let e = {}, t = 0;
-		x && M.length > 0 && (t += 48), W.forEach((n) => {
+		b && M.length > 0 && (t += 48), W.forEach((n) => {
 			H[n.key] === "left" && (e[n.key] = {
 				side: "left",
 				offset: t
-			}, t += J(n));
+			}, t += K(n));
 		});
-		let n = b ? 100 : 0;
+		let n = y ? 100 : 0;
 		for (let t = W.length - 1; t >= 0; t--) {
 			let r = W[t];
 			H[r.key] === "right" && (e[r.key] = {
 				side: "right",
 				offset: n
-			}, n += J(r));
+			}, n += K(r));
 		}
 		return e;
 	}, [
 		W,
 		H,
 		M,
-		x,
 		b,
-		I
-	]), ze = (e, t) => {
-		ye((n) => {
+		y,
+		Ue
+	]), _t = (e, t) => {
+		je((n) => {
 			let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
 				...n,
 				[e]: i
 			};
 			return a[e].length === 0 && delete a[e], a;
 		});
-	}, Be = (e) => {
-		ye((t) => {
+	}, vt = (e) => {
+		je((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, Y = l(() => {
+	}, q = u(() => {
 		let e = /* @__PURE__ */ new Map();
 		return V.forEach((t) => e.set(t.key, t)), e;
-	}, [V]), Ve = l(() => {
-		if (!E) return [];
-		let e = Y.get(E), t = v.map((t) => e?.getValue ? e.getValue(t) : t[E]);
+	}, [V]), yt = u(() => {
+		if (!O) return [];
+		let e = q.get(O), t = v.map((t) => e?.getValue ? e.getValue(t) : t[O]);
 		return Array.from(new Set(t)).filter((e) => e != null);
 	}, [
 		v,
-		E,
-		Y
-	]), He = l(() => {
-		if (!O.trim()) return Ve;
-		let e = O.toLowerCase();
-		return Ve.filter((t) => String(t).toLowerCase().includes(e));
-	}, [Ve, O]), Ue = l(() => {
-		let e = Object.entries(D).filter(([, e]) => e && e.length > 0), t = e.length === 0 ? v : v.filter((t) => e.every(([e, n]) => {
-			let r = Y.get(e), i = r?.getValue ? r.getValue(t) : t[e];
+		O,
+		q
+	]), bt = u(() => {
+		if (!A.trim()) return yt;
+		let e = A.toLowerCase();
+		return yt.filter((t) => String(t).toLowerCase().includes(e));
+	}, [yt, A]), J = u(() => {
+		let e = Object.entries(k).filter(([, e]) => e && e.length > 0), t = e.length === 0 ? v : v.filter((t) => e.every(([e, n]) => {
+			let r = q.get(e), i = r?.getValue ? r.getValue(t) : t[e];
 			return n.includes(i);
 		}));
-		if (F.key && F.direction) {
-			let { key: e, direction: n } = F, r = Y.get(e);
+		if (N.key && N.direction) {
+			let { key: e, direction: n } = N, r = q.get(e);
 			t = [...t].sort((t, i) => {
 				let a = r?.getValue ? r.getValue(t) : t[e], o = r?.getValue ? r.getValue(i) : i[e];
 				if (a === o) return 0;
@@ -247,18 +282,46 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 		return t;
 	}, [
 		v,
-		D,
-		F,
-		Y
-	]), We = l(() => {
-		if (!x || M.length === 0) return Ue;
+		k,
+		N,
+		q
+	]), Y = J.length, X = E ? Math.max(1, Math.ceil(Y / z)) : 1;
+	l(() => {
+		R(1);
+	}, [
+		k,
+		N,
+		z,
+		E
+	]), l(() => {
+		L > X && R(X);
+	}, [L, X]);
+	let xt = u(() => {
+		if (!E) return J;
+		let e = (L - 1) * z;
+		return J.slice(e, e + z);
+	}, [
+		J,
+		E,
+		L,
+		z
+	]), St = (e) => {
+		let t = Math.min(Math.max(1, e), X);
+		R(t), D && D(t, z);
+	}, Ct = (e) => {
+		Qe(e), R(1), D && D(1, e);
+	}, wt = u(() => {
+		if (!b || M.length === 0) return xt;
 		let e = (t, n, r = "") => {
 			if (n >= M.length) return t;
-			let i = M[n], a = Y.get(i), o = {};
+			let i = M[n], a = q.get(i), o = {};
 			return t.forEach((e) => {
 				let t = a?.getValue ? a.getValue(e) : e[i], n = String(t ?? "N/A");
 				o[n] || (o[n] = []), o[n].push(e);
-			}), Object.entries(o).map(([t, a]) => {
+			}), Object.entries(o).sort(([e], [t]) => e.localeCompare(t, void 0, {
+				numeric: !0,
+				sensitivity: "base"
+			})).map(([t, a]) => {
 				let o = r ? `${r}➔${t}` : t;
 				return {
 					isGroupRow: !0,
@@ -271,70 +334,117 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 				};
 			});
 		};
-		return e(Ue, 0);
+		return e(xt, 0);
 	}, [
-		Ue,
+		xt,
 		M,
-		x,
-		Y
-	]), Ge = (e) => {
-		Se((t) => {
+		b,
+		q
+	]), Tt = (e) => {
+		ze((t) => {
 			let n = t[e] !== !1;
 			return {
 				...t,
 				[e]: !n
 			};
 		});
-	}, X = l(() => {
-		if (!x || M.length === 0) return We;
+	}, Et = u(() => {
+		if (!b || M.length === 0) return wt;
 		let e = [], t = (n) => {
 			n.forEach((n) => {
-				n.isGroupRow ? (e.push(n), N[n.path] !== !1 && t(n.children)) : e.push(n);
+				n.isGroupRow ? (e.push(n), Re[n.path] !== !1 && t(n.children)) : e.push(n);
 			});
 		};
-		return t(We), e;
+		return t(wt), e;
 	}, [
-		We,
-		N,
+		wt,
+		Re,
 		M,
-		x
-	]), Ke = u(null), [qe, Je] = d(0), [Ye, Xe] = d(0);
-	c(() => {
-		let e = Ke.current;
+		b
+	]), Dt = d(null), [Ot, kt] = f(0), [At, jt] = f(0);
+	l(() => {
+		let e = Dt.current;
 		if (!e) return;
-		let t = () => Je(e.scrollTop);
-		Xe(e.clientHeight), Je(e.scrollTop), e.addEventListener("scroll", t, { passive: !0 });
+		let t = () => kt(e.scrollTop);
+		jt(e.clientHeight), kt(e.scrollTop), e.addEventListener("scroll", t, { passive: !0 });
 		let n;
-		return typeof ResizeObserver < "u" && (n = new ResizeObserver(() => Xe(e.clientHeight)), n.observe(e)), () => {
+		return typeof ResizeObserver < "u" && (n = new ResizeObserver(() => jt(e.clientHeight)), n.observe(e)), () => {
 			e.removeEventListener("scroll", t), n?.disconnect();
 		};
 	}, []);
-	let Z = X.length, { startIndex: Ze, endIndex: Qe, topSpacerHeight: Q, bottomSpacerHeight: $e } = l(() => {
-		if (Ye === 0) return {
+	let Z = Et.length, { startIndex: Q, endIndex: Mt, topSpacerHeight: Nt, bottomSpacerHeight: Pt } = u(() => {
+		if (At === 0) return {
 			startIndex: 0,
 			endIndex: Z,
 			topSpacerHeight: 0,
 			bottomSpacerHeight: 0
 		};
-		let e = Math.floor(qe / w), t = Math.ceil(Ye / w), n = Math.max(0, e - me), r = Math.min(Z, e + t + me);
+		let e = Math.max(0, Z - 1), t = Math.min(e, Math.floor(Ot / C)), n = Math.ceil(At / C) + 1, r = Math.max(0, t - be), i = Math.min(Z, t + n + be);
 		return {
-			startIndex: n,
-			endIndex: r,
-			topSpacerHeight: n * w,
-			bottomSpacerHeight: (Z - r) * w
+			startIndex: r,
+			endIndex: i,
+			topSpacerHeight: r * C,
+			bottomSpacerHeight: (Z - i) * C
 		};
 	}, [
-		qe,
-		Ye,
+		Ot,
+		At,
 		Z,
+		C,
+		be
+	]), Ft = u(() => Et.slice(Q, Mt), [
+		Et,
+		Q,
+		Mt
+	]), It = u(() => {
+		let e = /* @__PURE__ */ new Map();
+		if (!w || w.length === 0) return e;
+		let t = (e, t) => {
+			let n = q.get(t);
+			return n?.getValue ? n.getValue(e) : e[t];
+		}, n = Ft, r = n.map(() => w.map(() => !0)), i = null;
+		for (let e = 0; e < n.length; e++) {
+			let a = n[e];
+			if (a.isGroupRow) {
+				i = null;
+				continue;
+			}
+			if (i !== null) {
+				let o = n[i], s = !0;
+				for (let n = 0; n < w.length; n++) {
+					let i = w[n];
+					s && t(a, i) === t(o, i) ? r[e][n] = !1 : (s = !1, r[e][n] = !0);
+				}
+			}
+			i = e;
+		}
+		return w.forEach((t, i) => {
+			let a = 0;
+			for (; a < n.length;) {
+				if (n[a].isGroupRow || !r[a][i]) {
+					a++;
+					continue;
+				}
+				let o = a + 1;
+				for (; o < n.length && !n[o].isGroupRow && !r[o][i];) o++;
+				if (o - a > 1) {
+					let n = e.get(Q + a) || {};
+					n[t] = o - a, e.set(Q + a, n);
+					for (let n = a + 1; n < o; n++) {
+						let r = e.get(Q + n) || {};
+						r[t] = "skip", e.set(Q + n, r);
+					}
+				}
+				a = o;
+			}
+		}), e;
+	}, [
+		Ft,
 		w,
-		me
-	]), et = l(() => X.slice(Ze, Qe), [
-		X,
-		Ze,
-		Qe
-	]), tt = (e, t = !1, n) => {
-		let r = Re[e];
+		q,
+		Q
+	]), Lt = (e, t = !1, n) => {
+		let r = gt[e];
 		if (!r) return n || {};
 		let i = r.side === "right";
 		return {
@@ -346,237 +456,378 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 			boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
 			...n
 		};
-	}, nt = l(() => C.map((e, t) => (C.length - 1 - t) * 48), [C]), $ = W.length + +!!b + (x && M.length > 0 ? 1 : 0);
-	return /* @__PURE__ */ m("div", {
-		ref: G,
-		className: "flexi-root",
-		children: [x && /* @__PURE__ */ p("div", {
-			onDragOver: (e) => {
-				e.preventDefault(), P(!0);
-			},
-			onDragLeave: () => P(!1),
-			onDrop: Ie,
-			className: g("flexi-groupzone", Ce && "flexi-groupzone--dragover"),
-			children: M.length === 0 ? /* @__PURE__ */ p("span", {
-				className: "flexi-groupzone-hint",
-				children: "Drag a column header here to group your records by that field"
-			}) : /* @__PURE__ */ m("div", {
-				className: "flexi-groupzone-chips",
+	}, Rt = u(() => S.map((e, t) => (S.length - 1 - t) * 48), [S]), $ = W.length + +!!y + (b && M.length > 0 ? 1 : 0), zt = /* @__PURE__ */ p("button", {
+		type: "button",
+		ref: I,
+		onClick: (e) => {
+			e.stopPropagation(), Xe((e) => !e);
+		},
+		className: g("flexi-icon-btn", "flexi-settings-btn", F && "flexi-settings-btn--active"),
+		title: "Grid display settings",
+		children: /* @__PURE__ */ p(ie, { className: "flexi-icon-sm" })
+	}), Bt = F && Fe && G.current && ae(/* @__PURE__ */ m("div", {
+		ref: Ze,
+		className: "flexi-settings-menu",
+		style: {
+			top: Fe.top,
+			right: Fe.right,
+			zIndex: 9999
+		},
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flexi-settings-section",
 				children: [/* @__PURE__ */ p("span", {
-					className: "flexi-groupzone-label",
-					children: "Grouped By:"
-				}), M.map((e) => /* @__PURE__ */ m("div", {
-					className: "flexi-chip",
-					children: [/* @__PURE__ */ p("span", { children: V.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
-						type: "button",
-						onClick: () => Le(e),
-						className: "flexi-icon-btn flexi-chip-remove",
-						children: /* @__PURE__ */ p(ee, { className: "flexi-icon-xs" })
+					className: "flexi-settings-heading",
+					children: "Action Icons"
+				}), /* @__PURE__ */ m("label", {
+					className: "flexi-filter-option",
+					children: [/* @__PURE__ */ p("input", {
+						type: "checkbox",
+						className: "flexi-checkbox",
+						checked: qe,
+						onChange: () => Je((e) => !e)
+					}), /* @__PURE__ */ p("span", {
+						className: "flexi-filter-option-text",
+						children: "Show pin icon on hover"
 					})]
-				}, e))]
+				})]
+			}),
+			/* @__PURE__ */ p("div", { className: "flexi-settings-divider" }),
+			/* @__PURE__ */ m("div", {
+				className: "flexi-settings-section",
+				children: [/* @__PURE__ */ p("span", {
+					className: "flexi-settings-heading",
+					children: "Columns"
+				}), V.map((e) => /* @__PURE__ */ m("label", {
+					className: "flexi-filter-option",
+					children: [/* @__PURE__ */ p("input", {
+						type: "checkbox",
+						className: "flexi-checkbox",
+						checked: !P.includes(e.key),
+						onChange: () => ot(e.key)
+					}), /* @__PURE__ */ p("span", {
+						className: "flexi-filter-option-text",
+						children: e.header
+					})]
+				}, e.key))]
+			}),
+			/* @__PURE__ */ p("div", { className: "flexi-settings-divider" }),
+			/* @__PURE__ */ m("button", {
+				type: "button",
+				onClick: st,
+				className: "flexi-settings-reset",
+				title: "Reset pin icon visibility and hidden columns to their defaults",
+				children: [/* @__PURE__ */ p(re, { className: "flexi-icon-sm" }), /* @__PURE__ */ p("span", { children: "Reset to defaults" })]
 			})
-		}), /* @__PURE__ */ p("div", {
-			ref: Ke,
-			className: "flexi-table-wrap",
-			style: ue,
-			children: /* @__PURE__ */ m("table", {
-				className: g("flexi-table", fe && "flexi-table--bordered"),
-				style: de,
-				children: [
-					/* @__PURE__ */ m("colgroup", { children: [
-						x && M.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
-						W.map((e) => /* @__PURE__ */ p("col", { style: {
-							...e.style,
-							width: J(e)
-						} }, e.key)),
-						b && /* @__PURE__ */ p("col", { style: { width: "100px" } })
-					] }),
-					/* @__PURE__ */ p("thead", {
-						className: "flexi-thead",
-						children: q.map((r, i) => /* @__PURE__ */ m("tr", {
-							className: "flexi-header-row",
-							children: [
-								i === 0 && x && M.length > 0 && /* @__PURE__ */ p("th", {
-									rowSpan: q.length,
-									className: "flexi-group-spacer-th",
-									style: {
-										position: "sticky",
-										top: 0,
-										left: 0,
-										zIndex: 35,
-										backgroundColor: "rgb(248, 250, 252)"
-									}
-								}),
-								r.map(({ col: r, rowSpan: i, colSpan: ee }) => {
-									let c = (D[r.key]?.length || 0) > 0, l = !!H[r.key], u = tt(r.key, !0, r.headerStyle), d = !r.children || r.children.length === 0, f = F.key === r.key, h = !!(x && d), ne = d && r.resizable !== !1;
-									return /* @__PURE__ */ m("th", {
-										rowSpan: i,
-										colSpan: ee,
-										draggable: !0,
-										onDragStart: (e) => Me(e, r.key, d),
-										onDragOver: (e) => e.preventDefault(),
-										onDrop: (e) => Pe(e, r.key),
-										className: g("flexi-th", "flexi-th--draggable", h && "flexi-th--group-draggable", l && "flexi-th--pinned", r.className, r.headerClassName),
-										style: u,
-										children: [/* @__PURE__ */ m("div", {
-											className: "flexi-th-inner",
-											children: [
-												/* @__PURE__ */ m("div", {
-													className: g("flexi-th-label", r.sortable && d && "flexi-th-label--sortable"),
-													onClick: () => r.sortable && d && je(r.key),
-													children: [/* @__PURE__ */ p("span", {
-														className: "flexi-th-text",
-														children: r.header
-													}), d && r.sortable && /* @__PURE__ */ p("span", {
-														className: g("flexi-sort-icon", f && "flexi-sort-icon--active"),
-														children: f && F.direction === "asc" ? /* @__PURE__ */ p(t, { className: "flexi-icon-sm" }) : f && F.direction === "desc" ? /* @__PURE__ */ p(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ p(n, { className: "flexi-icon-sm" })
-													})]
-												}),
-												/* @__PURE__ */ m("div", {
-													className: "flexi-th-actions",
-													children: [d && r.filterable && /* @__PURE__ */ p("button", {
-														type: "button",
-														ref: (e) => {
-															e ? j.current.set(r.key, e) : j.current.delete(r.key);
-														},
-														onClick: (e) => {
-															e.stopPropagation(), k(""), ve(E === r.key ? null : r.key);
-														},
-														className: g("flexi-icon-btn", "flexi-filter-btn", c && "flexi-filter-btn--active"),
-														children: /* @__PURE__ */ p(a, { className: "flexi-icon-sm" })
-													}), d && /* @__PURE__ */ p("button", {
-														type: "button",
-														onClick: (e) => {
-															e.stopPropagation(), Ae(r.key);
-														},
-														className: g("flexi-icon-btn", "flexi-pin-btn", l && "flexi-pin-btn--pinned"),
-														title: H[r.key] === "left" ? "Pinned left (click to pin right)" : H[r.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
-														children: p(l ? s : o, { className: "flexi-icon-sm" })
-													})]
-												}),
-												E === r.key && d && A && G.current && te(/* @__PURE__ */ m("div", {
-													ref: K,
-													className: "flexi-filter-dropdown",
-													style: {
-														top: A.top,
-														left: A.left,
-														zIndex: 9999
-													},
-													children: [
-														/* @__PURE__ */ p("div", {
-															className: "flexi-filter-search",
-															children: /* @__PURE__ */ p("input", {
-																type: "text",
-																placeholder: "Search values...",
-																value: O,
-																onChange: (e) => k(e.target.value),
-																className: "flexi-input",
-																onClick: (e) => e.stopPropagation()
-															})
-														}),
-														/* @__PURE__ */ p("div", {
-															className: "flexi-filter-list",
-															children: He.length === 0 ? /* @__PURE__ */ p("div", {
-																className: "flexi-filter-empty",
-																children: "No results found"
-															}) : He.map((e, t) => /* @__PURE__ */ m("label", {
-																className: "flexi-filter-option",
-																children: [/* @__PURE__ */ p("input", {
-																	type: "checkbox",
-																	className: "flexi-checkbox",
-																	checked: D[r.key]?.includes(e) || !1,
-																	onChange: () => ze(r.key, e)
-																}), /* @__PURE__ */ p("span", {
-																	className: "flexi-filter-option-text",
-																	children: String(e)
-																})]
-															}, t))
-														}),
-														c && /* @__PURE__ */ p("div", {
-															className: "flexi-filter-footer",
-															children: /* @__PURE__ */ p("button", {
+		]
+	}), G.current);
+	return /* @__PURE__ */ m("div", {
+		ref: G,
+		className: "flexi-root",
+		children: [
+			b && /* @__PURE__ */ p("div", {
+				onDragOver: (e) => {
+					e.preventDefault(), Ve(!0);
+				},
+				onDragLeave: () => Ve(!1),
+				onDrop: pt,
+				className: g("flexi-groupzone", Be && "flexi-groupzone--dragover"),
+				children: M.length === 0 ? /* @__PURE__ */ p("span", {
+					className: "flexi-groupzone-hint",
+					children: "Drag a column header here to group your records by that field"
+				}) : /* @__PURE__ */ m("div", {
+					className: "flexi-groupzone-chips",
+					children: [/* @__PURE__ */ p("span", {
+						className: "flexi-groupzone-label",
+						children: "Grouped By:"
+					}), M.map((e) => /* @__PURE__ */ m("div", {
+						className: "flexi-chip",
+						children: [/* @__PURE__ */ p("span", { children: V.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
+							type: "button",
+							onClick: () => mt(e),
+							className: "flexi-icon-btn flexi-chip-remove",
+							children: /* @__PURE__ */ p(c, { className: "flexi-icon-xs" })
+						})]
+					}, e))]
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				ref: Dt,
+				className: "flexi-table-wrap",
+				style: ge,
+				children: /* @__PURE__ */ m("table", {
+					className: g("flexi-table", ve && "flexi-table--bordered"),
+					style: _e,
+					children: [
+						/* @__PURE__ */ m("colgroup", { children: [
+							b && M.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
+							W.map((e) => /* @__PURE__ */ p("col", { style: {
+								...e.style,
+								width: K(e)
+							} }, e.key)),
+							y && /* @__PURE__ */ p("col", { style: { width: "100px" } })
+						] }),
+						/* @__PURE__ */ p("thead", {
+							className: "flexi-thead",
+							children: ht.map((r, i) => /* @__PURE__ */ m("tr", {
+								className: "flexi-header-row",
+								children: [
+									i === 0 && b && M.length > 0 && /* @__PURE__ */ p("th", {
+										rowSpan: ht.length,
+										className: "flexi-group-spacer-th",
+										style: {
+											position: "sticky",
+											top: 0,
+											left: 0,
+											zIndex: 35,
+											backgroundColor: "rgb(248, 250, 252)"
+										}
+									}),
+									r.map(({ col: a, rowSpan: o, colSpan: s }, re) => {
+										let ie = (k[a.key]?.length || 0) > 0, c = !!H[a.key], l = Lt(a.key, !0, a.headerStyle), u = !a.children || a.children.length === 0, d = N.key === a.key, f = !!(b && u), oe = u && a.resizable !== !1, h = i === 0 && re === r.length - 1;
+										return /* @__PURE__ */ m("th", {
+											rowSpan: o,
+											colSpan: s,
+											draggable: !0,
+											onDragStart: (e) => lt(e, a.key, u),
+											onDragOver: (e) => e.preventDefault(),
+											onDrop: (e) => dt(e, a.key),
+											className: g("flexi-th", "flexi-th--draggable", f && "flexi-th--group-draggable", c && "flexi-th--pinned", a.className, a.headerClassName),
+											style: l,
+											children: [/* @__PURE__ */ m("div", {
+												className: "flexi-th-inner",
+												children: [
+													/* @__PURE__ */ m("div", {
+														className: g("flexi-th-label", a.sortable && u && "flexi-th-label--sortable"),
+														onClick: () => a.sortable && u && ct(a.key),
+														children: [/* @__PURE__ */ p("span", {
+															className: "flexi-th-text",
+															children: a.header
+														}), u && a.sortable && /* @__PURE__ */ p("span", {
+															className: g("flexi-sort-icon", d && "flexi-sort-icon--active"),
+															children: d && N.direction === "asc" ? /* @__PURE__ */ p(t, { className: "flexi-icon-sm" }) : d && N.direction === "desc" ? /* @__PURE__ */ p(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ p(n, { className: "flexi-icon-sm" })
+														})]
+													}),
+													/* @__PURE__ */ m("div", {
+														className: "flexi-th-actions",
+														children: [
+															u && a.filterable && /* @__PURE__ */ p("button", {
+																type: "button",
+																ref: (e) => {
+																	e ? j.current.set(a.key, e) : j.current.delete(a.key);
+																},
+																onClick: (e) => {
+																	e.stopPropagation(), Me(""), Ae(O === a.key ? null : a.key);
+																},
+																className: g("flexi-icon-btn", "flexi-filter-btn", ie && "flexi-filter-btn--active"),
+																children: /* @__PURE__ */ p(ee, { className: "flexi-icon-sm" })
+															}),
+															u && qe && /* @__PURE__ */ p("button", {
 																type: "button",
-																onClick: () => Be(r.key),
-																className: "flexi-filter-clear",
-																children: "Clear Filter"
+																onClick: (e) => {
+																	e.stopPropagation(), at(a.key);
+																},
+																className: g("flexi-icon-btn", "flexi-pin-btn", c && "flexi-pin-btn--pinned"),
+																title: H[a.key] === "left" ? "Pinned left (click to pin right)" : H[a.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
+																children: p(c ? ne : te, { className: "flexi-icon-sm" })
+															}),
+															Te && h && zt
+														]
+													}),
+													O === a.key && u && Ne && G.current && ae(/* @__PURE__ */ m("div", {
+														ref: nt,
+														className: "flexi-filter-dropdown",
+														style: {
+															top: Ne.top,
+															left: Ne.left,
+															zIndex: 9999
+														},
+														children: [
+															/* @__PURE__ */ p("div", {
+																className: "flexi-filter-search",
+																children: /* @__PURE__ */ p("input", {
+																	type: "text",
+																	placeholder: "Search values...",
+																	value: A,
+																	onChange: (e) => Me(e.target.value),
+																	className: "flexi-input",
+																	onClick: (e) => e.stopPropagation()
+																})
+															}),
+															/* @__PURE__ */ p("div", {
+																className: "flexi-filter-list",
+																children: bt.length === 0 ? /* @__PURE__ */ p("div", {
+																	className: "flexi-filter-empty",
+																	children: "No results found"
+																}) : bt.map((e, t) => /* @__PURE__ */ m("label", {
+																	className: "flexi-filter-option",
+																	children: [/* @__PURE__ */ p("input", {
+																		type: "checkbox",
+																		className: "flexi-checkbox",
+																		checked: k[a.key]?.includes(e) || !1,
+																		onChange: () => _t(a.key, e)
+																	}), /* @__PURE__ */ p("span", {
+																		className: "flexi-filter-option-text",
+																		children: String(e)
+																	})]
+																}, t))
+															}),
+															ie && /* @__PURE__ */ p("div", {
+																className: "flexi-filter-footer",
+																children: /* @__PURE__ */ p("button", {
+																	type: "button",
+																	onClick: () => vt(a.key),
+																	className: "flexi-filter-clear",
+																	children: "Clear Filter"
+																})
 															})
-														})
-													]
-												}), G.current)
-											]
-										}), ne && /* @__PURE__ */ p("div", {
-											className: "flexi-th-resizer",
-											onMouseDown: (e) => Fe(e, r),
-											onClick: (e) => e.stopPropagation(),
-											onDragStart: (e) => e.preventDefault()
-										})]
-									}, r.key);
+														]
+													}), G.current)
+												]
+											}), oe && /* @__PURE__ */ p("div", {
+												className: "flexi-th-resizer",
+												onMouseDown: (e) => ft(e, a),
+												onClick: (e) => e.stopPropagation(),
+												onDragStart: (e) => e.preventDefault()
+											})]
+										}, a.key);
+									}),
+									i === 0 && y && /* @__PURE__ */ p("th", {
+										rowSpan: ht.length,
+										className: "flexi-actions-th",
+										style: {
+											position: "sticky",
+											top: 0,
+											right: 0,
+											zIndex: 35,
+											backgroundColor: "rgb(248, 250, 252)"
+										},
+										children: Te && zt
+									})
+								]
+							}, `header-row-${i}`))
+						}),
+						/* @__PURE__ */ p("tbody", {
+							className: "flexi-tbody",
+							children: pe ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
+								colSpan: $,
+								className: "flexi-empty-cell",
+								children: "Loading records..."
+							}) }) : Et.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
+								colSpan: $,
+								className: "flexi-empty-cell",
+								children: "No records found matching criteria."
+							}) }) : /* @__PURE__ */ m(oe, { children: [
+								Nt > 0 && /* @__PURE__ */ p("tr", {
+									"aria-hidden": "true",
+									style: { height: Nt },
+									children: /* @__PURE__ */ p("td", {
+										colSpan: $,
+										style: {
+											padding: 0,
+											border: "none",
+											height: Nt
+										}
+									})
 								}),
-								i === 0 && b && /* @__PURE__ */ p("th", {
-									rowSpan: q.length,
-									className: "flexi-actions-th",
-									style: {
-										position: "sticky",
-										top: 0,
-										right: 0,
-										zIndex: 35,
-										backgroundColor: "rgb(248, 250, 252)"
-									}
+								Ft.map((e, t) => Vt(e, Q + t)),
+								Pt > 0 && /* @__PURE__ */ p("tr", {
+									"aria-hidden": "true",
+									style: { height: Pt },
+									children: /* @__PURE__ */ p("td", {
+										colSpan: $,
+										style: {
+											padding: 0,
+											border: "none",
+											height: Pt
+										}
+									})
 								})
-							]
-						}, `header-row-${i}`))
+							] })
+						}),
+						S.length > 0 && /* @__PURE__ */ p("tbody", {
+							className: "flexi-tbody flexi-tbody--pinned-bottom",
+							children: S.map((e, t) => Ht(e, t))
+						})
+					]
+				})
+			}),
+			Bt,
+			E && /* @__PURE__ */ m("div", {
+				className: "flexi-pagination",
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: "flexi-pagination-size",
+						children: [/* @__PURE__ */ p("span", { children: "Rows per page" }), /* @__PURE__ */ p("select", {
+							value: z,
+							onChange: (e) => Ct(Number(e.target.value)),
+							className: "flexi-pagination-select",
+							children: ke.map((e) => /* @__PURE__ */ p("option", {
+								value: e,
+								children: e
+							}, e))
+						})]
 					}),
-					/* @__PURE__ */ p("tbody", {
-						className: "flexi-tbody",
-						children: se ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
-							colSpan: $,
-							className: "flexi-empty-cell",
-							children: "Loading records..."
-						}) }) : X.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
-							colSpan: $,
-							className: "flexi-empty-cell",
-							children: "No records found matching criteria."
-						}) }) : /* @__PURE__ */ m(f, { children: [
-							Q > 0 && /* @__PURE__ */ p("tr", {
-								"aria-hidden": "true",
-								style: { height: Q },
-								children: /* @__PURE__ */ p("td", {
-									colSpan: $,
-									style: {
-										padding: 0,
-										border: "none",
-										height: Q
-									}
-								})
+					/* @__PURE__ */ p("div", {
+						className: "flexi-pagination-info",
+						children: Y === 0 ? "0 of 0" : `${(L - 1) * z + 1}–${Math.min(L * z, Y)} of ${Y}`
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flexi-pagination-controls",
+						children: [
+							/* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => St(1),
+								disabled: L === 1,
+								className: "flexi-icon-btn",
+								title: "First page",
+								children: /* @__PURE__ */ p(o, { className: "flexi-icon-sm" })
 							}),
-							et.map((e, t) => rt(e, Ze + t)),
-							$e > 0 && /* @__PURE__ */ p("tr", {
-								"aria-hidden": "true",
-								style: { height: $e },
-								children: /* @__PURE__ */ p("td", {
-									colSpan: $,
-									style: {
-										padding: 0,
-										border: "none",
-										height: $e
-									}
-								})
+							/* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => St(L - 1),
+								disabled: L === 1,
+								className: "flexi-icon-btn",
+								title: "Previous page",
+								children: /* @__PURE__ */ p(i, { className: "flexi-icon-sm" })
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "flexi-pagination-page",
+								children: [
+									"Page ",
+									L,
+									" of ",
+									X
+								]
+							}),
+							/* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => St(L + 1),
+								disabled: L === X,
+								className: "flexi-icon-btn",
+								title: "Next page",
+								children: /* @__PURE__ */ p(a, { className: "flexi-icon-sm" })
+							}),
+							/* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => St(X),
+								disabled: L === X,
+								className: "flexi-icon-btn",
+								title: "Last page",
+								children: /* @__PURE__ */ p(s, { className: "flexi-icon-sm" })
 							})
-						] })
-					}),
-					C.length > 0 && /* @__PURE__ */ p("tbody", {
-						className: "flexi-tbody flexi-tbody--pinned-bottom",
-						children: C.map((e, t) => it(e, t))
+						]
 					})
 				]
 			})
-		})]
+		]
 	});
-	function rt(e, t) {
+	function Vt(e, t) {
 		if (e.isGroupRow) {
-			let n = N[e.path] !== !1;
+			let n = Re[e.path] !== !1;
 			return /* @__PURE__ */ m("tr", {
 				className: "flexi-group-row",
+				style: { height: C },
 				children: [/* @__PURE__ */ p("td", {
 					className: "flexi-group-cell",
 					style: {
@@ -588,10 +839,10 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 					},
 					children: /* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: () => Ge(e.path),
+						onClick: () => Tt(e.path),
 						className: "flexi-group-toggle",
 						children: [
-							p(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
+							p(n ? r : a, { className: "flexi-icon-md flexi-icon-muted" }),
 							/* @__PURE__ */ p("span", {
 								className: "flexi-group-value",
 								children: e.groupValue
@@ -608,12 +859,13 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 				})]
 			}, `group-header-${e.path}-${t}`);
 		}
-		let n = Oe(e);
+		let n = rt(e);
 		return /* @__PURE__ */ m("tr", {
-			className: g("flexi-row", T && "flexi-row--clickable", ke(e, t)),
-			onClick: T ? (n) => T(e, t, n) : void 0,
+			className: g("flexi-row", we && "flexi-row--clickable", it(e, t)),
+			style: { height: C },
+			onClick: we ? (n) => we(e, t, n) : void 0,
 			children: [
-				x && M?.length > 0 && /* @__PURE__ */ p("td", {
+				b && M?.length > 0 && /* @__PURE__ */ p("td", {
 					className: "flexi-row-indent-cell",
 					style: {
 						position: "sticky",
@@ -621,18 +873,21 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 						zIndex: 10
 					}
 				}),
-				W?.map((t) => {
-					let n = e[t.key], r = tt(t.key, !1, t.style);
+				W?.map((n) => {
+					let r = w?.includes(n.key) ? It.get(t)?.[n.key] : void 0;
+					if (r === "skip") return null;
+					let i = e[n.key], a = Lt(n.key, !1, n.style), o = !!H[n.key];
 					return /* @__PURE__ */ p("td", {
-						className: g("flexi-cell", !!H[t.key] && "flexi-cell--pinned", t.className),
-						style: r,
-						children: t.render ? t.render(n, e) : /* @__PURE__ */ p("span", {
+						rowSpan: typeof r == "number" ? r : void 0,
+						className: g("flexi-cell", o && "flexi-cell--pinned", n.className),
+						style: a,
+						children: n.render ? n.render(i, e) : /* @__PURE__ */ p("span", {
 							className: "flexi-cell-text",
-							children: n
+							children: i
 						})
-					}, t.key);
+					}, n.key);
 				}),
-				b && /* @__PURE__ */ p("td", {
+				y && /* @__PURE__ */ p("td", {
 					className: "flexi-actions-cell",
 					style: {
 						position: "sticky",
@@ -640,16 +895,16 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 					},
 					children: /* @__PURE__ */ p("div", {
 						className: "flexi-actions-inner",
-						children: b(e)
+						children: y(e)
 					})
 				})
 			]
 		}, n ?? `row-${t}`);
 	}
-	function it(e, t) {
-		let n = typeof pe == "function" ? pe(e, t) : pe, r = {
+	function Ht(e, t) {
+		let n = typeof ye == "function" ? ye(e, t) : ye, r = {
 			position: "sticky",
-			bottom: `${nt[t]}px`,
+			bottom: `${Rt[t]}px`,
 			background: "#",
 			zIndex: 45
 		};
@@ -657,7 +912,7 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 			className: g("flexi-row", "flexi-row--pinned-bottom", n),
 			style: r,
 			children: [
-				x && M?.length > 0 && /* @__PURE__ */ p("td", {
+				b && M?.length > 0 && /* @__PURE__ */ p("td", {
 					className: "flexi-row-indent-cell",
 					style: {
 						position: "sticky",
@@ -666,7 +921,7 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 					}
 				}),
 				W?.map((t) => {
-					let n = e[t.key], r = tt(t.key, !1, t.style), i = !!H[t.key], a = t.pinnedRender ?? t.render;
+					let n = e[t.key], r = Lt(t.key, !1, t.style), i = !!H[t.key], a = t.pinnedRender ?? t.render;
 					return /* @__PURE__ */ p("td", {
 						className: g("flexi-cell", i && "flexi-cell--pinned", t.className),
 						style: r,
@@ -676,7 +931,7 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 						})
 					}, t.key);
 				}),
-				b && /* @__PURE__ */ p("td", {
+				y && /* @__PURE__ */ p("td", {
 					className: "flexi-actions-cell",
 					style: {
 						position: "sticky",
@@ -684,7 +939,7 @@ function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy:
 					},
 					children: /* @__PURE__ */ p("div", {
 						className: "flexi-actions-inner",
-						children: b(e)
+						children: y(e)
 					})
 				})
 			]