flexi-datagrid 1.2.5 → 1.2.7

package/dist/index.es.js

@@ -1,60 +1,94 @@
-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 c } 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 c } from "lucide-react";
 import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { createPortal as ee } from "react-dom";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/DataTable.tsx
+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(" "), _ = (e) => {
+}, g = (...e) => e.filter(Boolean).join(" "), se = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-};
-function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy: S = !1, defaultGroupBy: ne = [], onPinChange: C, onGroupChange: w, containerStyle: re, tableStyle: ie, bordered: ae = !1, pinnedBottomRowData: T = [], pinnedRowClassName: E }) {
-	let [D, O] = f(null), [k, A] = f({}), [j, M] = f(""), [N, oe] = f(null), P = d(/* @__PURE__ */ new Map()), [F, I] = f(ne), [L, se] = f({}), [ce, R] = f(!1), [z, le] = f({
+}, ce = (e, t, n) => {
+	let r = (e) => {
+		let n = t[e];
+		return n === "left" ? 0 : n === "right" ? 2 : 1;
+	}, i = (e) => e.map((e, t) => ({
+		col: e,
+		idx: t
+	})).sort((e, t) => {
+		let i = r(e.col.key) - r(t.col.key);
+		return i === 0 ? (n[e.col.key] ?? e.idx) - (n[t.col.key] ?? t.idx) : i;
+	}).map(({ col: e }) => e.children && e.children.length > 0 ? {
+		...e,
+		children: i(e.children)
+	} : e);
+	return i(e);
+}, 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
-	}), B = u(() => h(v), [v]), [V, ue] = f(() => {
+	}), [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 B.forEach((t) => {
-			let n = _(t.pinned);
+		return V.forEach((t) => {
+			let n = se(t.pinned);
 			n && (e[t.key] = n);
 		}), e;
-	}), H = u(() => {
-		let e = (t) => {
-			let n = (e) => {
-				let t = V[e];
-				return t === "left" ? 0 : t === "right" ? 2 : 1;
-			};
-			return [...t].sort((e, t) => n(e.key) - n(t.key)).map((t) => t.children && t.children.length > 0 ? {
-				...t,
-				children: e(t.children)
-			} : t);
-		};
-		return e(v);
-	}, [v, V]), U = u(() => {
-		let e = h(H), t = S ? F : [];
-		return e.filter((e) => !t.includes(e.key));
-	}, [
+	}), U = u(() => ce(_, H, Ge), [
+		_,
 		H,
-		F,
-		S
-	]), W = d(null), G = d(null);
+		Ge
+	]), W = u(() => {
+		let e = h(U), t = b ? M : [];
+		return e.filter((e) => !t.includes(e.key) && !P.includes(e.key));
+	}, [
+		U,
+		M,
+		b,
+		P
+	]), G = d(null), nt = d(null);
 	l(() => {
 		function e(e) {
-			let t = e.target, n = D ? P.current.get(D) : null;
-			G.current && !G.current.contains(t) && !(n && n.contains(t)) && (O(null), M(""));
+			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;
+			Ze.current && !Ze.current.contains(t) && !(I.current && I.current.contains(t)) && Xe(!1);
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [D]), l(() => {
-		if (!D) return;
+	}, [F]), l(() => {
+		if (!F) return;
 		let e = () => {
-			let e = P.current.get(D), t = W.current;
+			let e = I.current, t = G.current;
 			if (!e || !t) return;
 			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
-			oe({
+			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(O), t = G.current;
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+			Pe({
 				top: n.bottom - r.top + 4,
 				left: n.left - r.left
 			});
@@ -62,37 +96,94 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [D]);
-	let de = (e) => typeof b == "function" ? b(e) : String(e[b]), fe = (e) => {
-		ue((t) => {
+	}, [O]);
+	let rt = (e) => typeof fe == "function" ? fe(e) : String(e[fe]), it = (e, t) => {
+		if (!Ce) return;
+		let n;
+		for (let r in Ce) Ce[r](e, t) && (n = n ? `${n} ${r}` : r);
+		return n;
+	}, 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], C && C(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;
 		});
-	}, pe = (e) => {
+	}, st = () => {
+		Je(Ee), Ye(De), T && T(De);
+	}, ct = (e) => {
 		let t = "asc";
-		z.key === e && (t = z.direction === "asc" ? "desc" : z.direction === "desc" ? null : "asc"), le({
+		N.key === e && (t = N.direction === "asc" ? "desc" : N.direction === "desc" ? null : "asc"), He({
 			key: t ? e : null,
 			direction: t
 		});
-	}, me = (e, t) => {
-		S && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
-	}, he = (e) => {
-		e.preventDefault(), R(!1);
+	}, lt = (e, t, n) => {
+		if (et.current) {
+			e.preventDefault();
+			return;
+		}
+		$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 = ut(r.children, t, n);
+			if (e) return e;
+		}
+		return null;
+	}, dt = (e, t) => {
+		e.preventDefault(), e.stopPropagation();
+		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 = { ...Ge };
+		i.forEach((e, t) => {
+			s[e] = t;
+		}), 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: K(t)
+		};
+		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)), 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(() => {
+				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);
+	}, pt = (e) => {
+		e.preventDefault(), Ve(!1);
 		let t = e.dataTransfer.getData("text/plain");
-		if (t && !F.includes(t)) {
-			let e = [...F, t];
-			I(e), w && w(e);
+		if (t && !M.includes(t)) {
+			let e = [...M, t];
+			Le(e), x && x(e);
 		}
-	}, ge = (e) => {
-		let t = F.filter((t) => t !== e);
-		I(t), se({}), w && w(t);
-	}, K = u(() => {
+	}, mt = (e) => {
+		let t = M.filter((t) => t !== e);
+		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(H), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? F.includes(e.key) && S ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = S ? F : [], 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);
@@ -107,69 +198,77 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				}));
 			});
 		};
-		return a(H, 0), n.filter((e) => e.length > 0);
+		return a(U, 0), n.filter((e) => e.length > 0);
 	}, [
-		H,
-		F,
-		S
-	]), q = (e) => {
-		let t = e.style?.width || e.headerStyle?.width || "150px";
-		return typeof t == "number" ? t : parseInt(String(t), 10) || 150;
-	}, _e = u(() => {
+		U,
+		M,
+		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;
-		S && F.length > 0 && (t += 48), U.forEach((n) => {
-			V[n.key] === "left" && (e[n.key] = {
+		b && M.length > 0 && (t += 48), W.forEach((n) => {
+			H[n.key] === "left" && (e[n.key] = {
 				side: "left",
 				offset: t
-			}, t += q(n));
+			}, t += K(n));
 		});
-		let n = x ? 100 : 0;
-		for (let t = U.length - 1; t >= 0; t--) {
-			let r = U[t];
-			V[r.key] === "right" && (e[r.key] = {
+		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 += q(r));
+			}, n += K(r));
 		}
 		return e;
 	}, [
-		U,
-		V,
-		F,
-		S,
-		x
-	]), ve = (e, t) => {
-		A((n) => {
+		W,
+		H,
+		M,
+		b,
+		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;
 		});
-	}, ye = (e) => {
-		A((t) => {
+	}, vt = (e) => {
+		je((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, J = u(() => {
-		if (!D) return [];
-		let e = B.find((e) => e.key === D), t = y.map((t) => e?.getValue ? e.getValue(t) : t[D]), n = Array.from(new Set(t)).filter((e) => e != null);
-		return j.trim() ? n.filter((e) => String(e).toLowerCase().includes(j.toLowerCase())) : n;
+	}, q = u(() => {
+		let e = /* @__PURE__ */ new Map();
+		return V.forEach((t) => e.set(t.key, 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);
 	}, [
-		y,
-		D,
-		j,
-		B
-	]), Y = u(() => {
-		let e = y.filter((e) => Object.entries(k).every(([t, n]) => {
-			if (!n || n.length === 0) return !0;
-			let r = B.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
+		v,
+		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 (z.key && z.direction) {
-			let { key: t, direction: n } = z, r = B.find((e) => e.key === t);
-			e = [...e].sort((e, i) => {
-				let a = r?.getValue ? r.getValue(e) : e[t], o = r?.getValue ? r.getValue(i) : i[t];
+		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;
 				if (a == null) return 1;
 				if (o == null) return -1;
@@ -180,21 +279,49 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				}), n === "asc" ? s : -s;
 			});
 		}
-		return e;
+		return t;
+	}, [
+		v,
+		k,
+		N,
+		q
+	]), Y = J.length, X = E ? Math.max(1, Math.ceil(Y / z)) : 1;
+	l(() => {
+		R(1);
 	}, [
-		y,
 		k,
+		N,
 		z,
-		B
-	]), X = u(() => {
-		if (!S || F.length === 0) return Y;
+		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 >= F.length) return t;
-			let i = F[n], a = B.find((e) => e.key === i), o = {};
+			if (n >= M.length) return t;
+			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,
@@ -207,35 +334,117 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				};
 			});
 		};
-		return e(Y, 0);
+		return e(xt, 0);
 	}, [
-		Y,
-		F,
-		S,
-		B
-	]), be = (e) => {
-		se((t) => {
+		xt,
+		M,
+		b,
+		q
+	]), Tt = (e) => {
+		ze((t) => {
 			let n = t[e] !== !1;
 			return {
 				...t,
 				[e]: !n
 			};
 		});
-	}, Z = u(() => {
-		if (!S || F.length === 0) return X;
+	}, Et = u(() => {
+		if (!b || M.length === 0) return wt;
 		let e = [], t = (n) => {
 			n.forEach((n) => {
-				n.isGroupRow ? (e.push(n), L[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(X), e;
+		return t(wt), e;
 	}, [
-		X,
-		L,
-		F,
-		S
-	]), Q = (e, t = !1, n) => {
-		let r = _e[e];
+		wt,
+		Re,
+		M,
+		b
+	]), Dt = d(null), [Ot, kt] = f(0), [At, jt] = f(0);
+	l(() => {
+		let e = Dt.current;
+		if (!e) return;
+		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(() => jt(e.clientHeight)), n.observe(e)), () => {
+			e.removeEventListener("scroll", t), n?.disconnect();
+		};
+	}, []);
+	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.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: r,
+			endIndex: i,
+			topSpacerHeight: r * C,
+			bottomSpacerHeight: (Z - i) * C
+		};
+	}, [
+		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,
+		q,
+		Q
+	]), Lt = (e, t = !1, n) => {
+		let r = gt[e];
 		if (!r) return n || {};
 		let i = r.side === "right";
 		return {
@@ -247,202 +456,378 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 			boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
 			...n
 		};
-	}, xe = u(() => T.map((e, t) => (T.length - 1 - t) * 48), [T]), $ = U.length + +!!x + (S && F.length > 0 ? 1 : 0);
-	return /* @__PURE__ */ m("div", {
-		ref: W,
-		className: "flexi-root",
-		children: [S && /* @__PURE__ */ p("div", {
-			onDragOver: (e) => {
-				e.preventDefault(), R(!0);
-			},
-			onDragLeave: () => R(!1),
-			onDrop: he,
-			className: g("flexi-groupzone", ce && "flexi-groupzone--dragover"),
-			children: F.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:"
-				}), F.map((e) => /* @__PURE__ */ m("div", {
-					className: "flexi-chip",
-					children: [/* @__PURE__ */ p("span", { children: B.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
-						type: "button",
-						onClick: () => ge(e),
-						className: "flexi-icon-btn flexi-chip-remove",
-						children: /* @__PURE__ */ p(c, { 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"
+					})]
+				})]
+			}),
+			/* @__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))]
+				}, 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", {
-			className: "flexi-table-wrap",
-			style: re,
-			children: /* @__PURE__ */ m("table", {
-				className: g("flexi-table", ae && "flexi-table--bordered"),
-				style: ie,
-				children: [
-					/* @__PURE__ */ m("colgroup", { children: [
-						S && F.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
-						U.map((e) => /* @__PURE__ */ p("col", { style: e.style }, e.key)),
-						x && /* @__PURE__ */ p("col", { style: { width: "100px" } })
-					] }),
-					/* @__PURE__ */ p("thead", {
-						className: "flexi-thead",
-						children: K.map((r, i) => /* @__PURE__ */ m("tr", {
-							className: "flexi-header-row",
-							children: [
-								i === 0 && S && F.length > 0 && /* @__PURE__ */ p("th", {
-									rowSpan: K.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: c }) => {
-									let l = (k[r.key]?.length || 0) > 0, u = !!V[r.key], d = Q(r.key, !0, r.headerStyle), f = !r.children || r.children.length === 0, h = z.key === r.key, _ = !!(S && f);
-									return /* @__PURE__ */ p("th", {
-										rowSpan: i,
-										colSpan: c,
-										..._ ? {
+		]
+	}), 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) => me(e, r.key)
-										} : {},
-										className: g("flexi-th", _ && "flexi-th--draggable", u && "flexi-th--pinned", r.className),
-										style: d,
-										children: /* @__PURE__ */ m("div", {
-											className: "flexi-th-inner",
-											children: [
-												/* @__PURE__ */ m("div", {
-													className: g("flexi-th-label", r.sortable && f && "flexi-th-label--sortable"),
-													onClick: () => r.sortable && f && pe(r.key),
-													children: [/* @__PURE__ */ p("span", {
-														className: "flexi-th-text",
-														children: r.header
-													}), f && r.sortable && /* @__PURE__ */ p("span", {
-														className: g("flexi-sort-icon", h && "flexi-sort-icon--active"),
-														children: h && z.direction === "asc" ? /* @__PURE__ */ p(t, { className: "flexi-icon-sm" }) : h && z.direction === "desc" ? /* @__PURE__ */ p(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ p(n, { className: "flexi-icon-sm" })
-													})]
-												}),
-												/* @__PURE__ */ m("div", {
-													className: "flexi-th-actions",
-													children: [f && r.filterable && /* @__PURE__ */ p("button", {
-														type: "button",
-														ref: (e) => {
-															e ? P.current.set(r.key, e) : P.current.delete(r.key);
-														},
-														onClick: (e) => {
-															e.stopPropagation(), M(""), O(D === r.key ? null : r.key);
-														},
-														className: g("flexi-icon-btn", "flexi-filter-btn", l && "flexi-filter-btn--active"),
-														children: /* @__PURE__ */ p(a, { className: "flexi-icon-sm" })
-													}), f && /* @__PURE__ */ p("button", {
-														type: "button",
-														onClick: (e) => {
-															e.stopPropagation(), fe(r.key);
-														},
-														className: g("flexi-icon-btn", "flexi-pin-btn", u && "flexi-pin-btn--pinned"),
-														title: V[r.key] === "left" ? "Pinned left (click to pin right)" : V[r.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
-														children: p(u ? s : o, { className: "flexi-icon-sm" })
-													})]
-												}),
-												D === r.key && f && N && W.current && ee(/* @__PURE__ */ m("div", {
-													ref: G,
-													className: "flexi-filter-dropdown",
-													style: {
-														top: N.top,
-														left: N.left,
-														zIndex: 9999
-													},
-													children: [
-														/* @__PURE__ */ p("div", {
-															className: "flexi-filter-search",
-															children: /* @__PURE__ */ p("input", {
-																type: "text",
-																placeholder: "Search values...",
-																value: j,
-																onChange: (e) => M(e.target.value),
-																className: "flexi-input",
-																onClick: (e) => e.stopPropagation()
-															})
-														}),
-														/* @__PURE__ */ p("div", {
-															className: "flexi-filter-list",
-															children: J.length === 0 ? /* @__PURE__ */ p("div", {
-																className: "flexi-filter-empty",
-																children: "No results found"
-															}) : J.map((e, t) => /* @__PURE__ */ m("label", {
-																className: "flexi-filter-option",
-																children: [/* @__PURE__ */ p("input", {
-																	type: "checkbox",
-																	className: "flexi-checkbox",
-																	checked: k[r.key]?.includes(e) || !1,
-																	onChange: () => ve(r.key, e)
-																}), /* @__PURE__ */ p("span", {
-																	className: "flexi-filter-option-text",
-																	children: String(e)
-																})]
-															}, t))
-														}),
-														l && /* @__PURE__ */ p("div", {
-															className: "flexi-filter-footer",
-															children: /* @__PURE__ */ p("button", {
+											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: () => ye(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"
+																})
 															})
-														})
-													]
-												}), W.current)
-											]
-										})
-									}, 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 && x && /* @__PURE__ */ p("th", {
-									rowSpan: K.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: te ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
-							colSpan: $,
-							className: "flexi-empty-cell",
-							children: "Loading records..."
-						}) }) : Z.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
-							colSpan: $,
-							className: "flexi-empty-cell",
-							children: "No records found matching criteria."
-						}) }) : Z.map((e, t) => Se(e, t))
+					/* @__PURE__ */ p("div", {
+						className: "flexi-pagination-info",
+						children: Y === 0 ? "0 of 0" : `${(L - 1) * z + 1}–${Math.min(L * z, Y)} of ${Y}`
 					}),
-					T.length > 0 && /* @__PURE__ */ p("tbody", {
-						className: "flexi-tbody flexi-tbody--pinned-bottom",
-						children: T.map((e, t) => Ce(e, t))
+					/* @__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" })
+							}),
+							/* @__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" })
+							})
+						]
 					})
 				]
 			})
-		})]
+		]
 	});
-	function Se(e, t) {
+	function Vt(e, t) {
 		if (e.isGroupRow) {
-			let n = L[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: {
@@ -454,10 +839,10 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					},
 					children: /* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: () => be(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
@@ -474,11 +859,13 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				})]
 			}, `group-header-${e.path}-${t}`);
 		}
-		let n = de(e);
+		let n = rt(e);
 		return /* @__PURE__ */ m("tr", {
-			className: "flexi-row",
+			className: g("flexi-row", we && "flexi-row--clickable", it(e, t)),
+			style: { height: C },
+			onClick: we ? (n) => we(e, t, n) : void 0,
 			children: [
-				S && F?.length > 0 && /* @__PURE__ */ p("td", {
+				b && M?.length > 0 && /* @__PURE__ */ p("td", {
 					className: "flexi-row-indent-cell",
 					style: {
 						position: "sticky",
@@ -486,18 +873,21 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						zIndex: 10
 					}
 				}),
-				U?.map((t) => {
-					let n = e[t.key], r = Q(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", !!V[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);
 				}),
-				x && /* @__PURE__ */ p("td", {
+				y && /* @__PURE__ */ p("td", {
 					className: "flexi-actions-cell",
 					style: {
 						position: "sticky",
@@ -505,16 +895,16 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					},
 					children: /* @__PURE__ */ p("div", {
 						className: "flexi-actions-inner",
-						children: x(e)
+						children: y(e)
 					})
 				})
 			]
 		}, n ?? `row-${t}`);
 	}
-	function Ce(e, t) {
-		let n = typeof E == "function" ? E(e, t) : E, r = {
+	function Ht(e, t) {
+		let n = typeof ye == "function" ? ye(e, t) : ye, r = {
 			position: "sticky",
-			bottom: `${xe[t]}px`,
+			bottom: `${Rt[t]}px`,
 			background: "#",
 			zIndex: 45
 		};
@@ -522,7 +912,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 			className: g("flexi-row", "flexi-row--pinned-bottom", n),
 			style: r,
 			children: [
-				S && F?.length > 0 && /* @__PURE__ */ p("td", {
+				b && M?.length > 0 && /* @__PURE__ */ p("td", {
 					className: "flexi-row-indent-cell",
 					style: {
 						position: "sticky",
@@ -530,8 +920,8 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						zIndex: 10
 					}
 				}),
-				U?.map((t) => {
-					let n = e[t.key], r = Q(t.key, !1, t.style), i = !!V[t.key], a = t.pinnedRender ?? t.render;
+				W?.map((t) => {
+					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,
@@ -541,7 +931,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						})
 					}, t.key);
 				}),
-				x && /* @__PURE__ */ p("td", {
+				y && /* @__PURE__ */ p("td", {
 					className: "flexi-actions-cell",
 					style: {
 						position: "sticky",
@@ -549,7 +939,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					},
 					children: /* @__PURE__ */ p("div", {
 						className: "flexi-actions-inner",
-						children: x(e)
+						children: y(e)
 					})
 				})
 			]
@@ -557,4 +947,4 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 	}
 }
 //#endregion
-export { v as DataTable };
+export { _ as DataTable };