flexi-datagrid 1.2.6 → 1.2.8

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