flexi-datagrid 1.2.8 → 1.2.9

package/dist/index.es.js

@@ -1,17 +1,152 @@
-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 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) => {
+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 c, Pin as l, PinOff as u, RotateCcw as d, Settings as f, X as p } from "lucide-react";
+import { createContext as m, useCallback as h, useContext as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { createPortal as C } from "react-dom";
+//#region src/DataTable/context/DataTableContext.tsx
+var w = m(null);
+function T({ value: e, children: t }) {
+	return /* @__PURE__ */ x(w.Provider, {
+		value: e,
+		children: t
+	});
+}
+function E() {
+	let e = g(w);
+	if (!e) throw Error("DataTable components must be rendered inside <DataTable>.");
+	return e;
+}
+//#endregion
+//#region src/DataTable/utils/classNames.ts
+var D = (...e) => e.filter(Boolean).join(" ");
+//#endregion
+//#region src/DataTable/components/GroupZone.tsx
+function O() {
+	let { groupedColumns: e, columnsByKey: t, addGroup: n, removeGroup: r } = E(), [i, a] = b(!1);
+	return /* @__PURE__ */ x("div", {
+		onDragOver: (e) => {
+			e.preventDefault(), a(!0);
+		},
+		onDragLeave: () => a(!1),
+		onDrop: (e) => {
+			e.preventDefault(), a(!1);
+			let r = e.dataTransfer.getData("text/plain");
+			r && t.has(r) && n(r);
+		},
+		className: D("flexi-groupzone", i && "flexi-groupzone--dragover"),
+		children: e.length === 0 ? /* @__PURE__ */ x("span", {
+			className: "flexi-groupzone-hint",
+			children: "Drag a column header here to group your records by that field"
+		}) : /* @__PURE__ */ S("div", {
+			className: "flexi-groupzone-chips",
+			children: [/* @__PURE__ */ x("span", {
+				className: "flexi-groupzone-label",
+				children: "Grouped By:"
+			}), e.map((e) => /* @__PURE__ */ S("div", {
+				className: "flexi-chip",
+				children: [/* @__PURE__ */ x("span", { children: t.get(e)?.header || e }), /* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: () => r(e),
+					className: "flexi-icon-btn flexi-chip-remove",
+					children: /* @__PURE__ */ x(p, { className: "flexi-icon-xs" })
+				})]
+			}, e))]
+		})
+	});
+}
+//#endregion
+//#region src/DataTable/components/Pagination.tsx
+function k() {
+	let { currentPage: e, pageSize: t, totalPages: n, totalCount: r, pageSizeOptions: c, goToPage: l, changePageSize: u } = E();
+	return /* @__PURE__ */ S("div", {
+		className: "flexi-pagination",
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: "flexi-pagination-size",
+				children: [/* @__PURE__ */ x("span", { children: "Rows per page" }), /* @__PURE__ */ x("select", {
+					value: t,
+					onChange: (e) => u(Number(e.target.value)),
+					className: "flexi-pagination-select",
+					children: c.map((e) => /* @__PURE__ */ x("option", {
+						value: e,
+						children: e
+					}, e))
+				})]
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "flexi-pagination-info",
+				children: r === 0 ? "0 of 0" : `${(e - 1) * t + 1}–${Math.min(e * t, r)} of ${r}`
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "flexi-pagination-controls",
+				children: [
+					/* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => l(1),
+						disabled: e === 1,
+						className: "flexi-icon-btn",
+						title: "First page",
+						children: /* @__PURE__ */ x(o, { className: "flexi-icon-sm" })
+					}),
+					/* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => l(e - 1),
+						disabled: e === 1,
+						className: "flexi-icon-btn",
+						title: "Previous page",
+						children: /* @__PURE__ */ x(i, { className: "flexi-icon-sm" })
+					}),
+					/* @__PURE__ */ S("span", {
+						className: "flexi-pagination-page",
+						children: [
+							"Page ",
+							e,
+							" of ",
+							n
+						]
+					}),
+					/* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => l(e + 1),
+						disabled: e === n,
+						className: "flexi-icon-btn",
+						title: "Next page",
+						children: /* @__PURE__ */ x(a, { className: "flexi-icon-sm" })
+					}),
+					/* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => l(n),
+						disabled: e === n,
+						className: "flexi-icon-btn",
+						title: "Last page",
+						children: /* @__PURE__ */ x(s, { className: "flexi-icon-sm" })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/DataTable/constants.ts
+var ee = [
+	10,
+	25,
+	50,
+	100
+], A = [], j = [], M = (e) => {
 	let t = [];
 	return e.forEach((e) => {
-		e.children && e.children.length > 0 ? t.push(...m(e.children)) : t.push(e);
+		e.children && e.children.length > 0 ? t.push(...M(e.children)) : t.push(e);
 	}), t;
-}, h = (...e) => e.filter(Boolean).join(" "), ce = (e) => {
+}, N = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-}, le = (e, t, n) => {
+}, P = (e) => {
+	let t = {};
+	return e.forEach((e) => {
+		let n = N(e.pinned);
+		n && (t[e.key] = n);
+	}), t;
+}, F = (e, t, n) => {
 	let r = (e) => {
 		let n = t[e];
 		return n === "left" ? 0 : n === "right" ? 2 : 1;
@@ -26,922 +161,1087 @@ var m = (e) => {
 		children: i(e.children)
 	} : e);
 	return i(e);
-}, 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
-	}), [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 z.forEach((t) => {
-			let n = ce(t.pinned);
-			n && (e[t.key] = n);
-		}), e;
-	}), 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));
-	}, [
-		V,
-		A,
-		y,
-		M
-	]), U = u(null), it = u(null);
-	c(() => {
-		function e(e) {
-			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);
-	}, [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 = Re.current.get(D), t = U.current;
-			if (!e || !t) return;
-			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
-			Fe({
-				top: n.bottom - r.top + 4,
-				left: n.left - r.left
-			});
-		};
-		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
-			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
-		};
-	}, [D]);
-	let at = (e) => typeof pe == "function" ? pe(e) : String(e[pe]), ot = (e, t) => {
-		if (!we) return;
-		let n;
-		for (let r in we) we[r](e, t) && (n = n ? `${n} ${r}` : r);
-		return n;
-	}, 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], 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;
-		});
-	}, lt = () => {
-		Xe(De), Ze(Oe), w && w(Oe);
-	}, ut = (e) => {
-		let t = "asc";
-		j.key === e && (t = j.direction === "asc" ? "desc" : j.direction === "desc" ? null : "asc"), We({
-			key: t ? e : null,
-			direction: t
-		});
-	}, dt = (e, t, n) => {
-		if (nt.current) {
-			e.preventDefault();
-			return;
-		}
-		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 = ft(r.children, t, n);
-			if (e) return e;
-		}
-		return null;
-	}, pt = (e, t) => {
-		e.preventDefault(), e.stopPropagation();
-		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 = { ...qe };
-		i.forEach((e, t) => {
-			s[e] = t;
-		}), 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: W(t)
-		};
-		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)), Ke((e) => e[t.key] === i ? e : {
-				...e,
-				[t.key]: i
-			});
-		}, a = () => {
-			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);
-	}, ht = (e) => {
-		e.preventDefault(), Ue(!1);
-		let t = e.dataTransfer.getData("text/plain");
-		if (t && !A.includes(t)) {
-			let e = [...A, t];
-			ze(e), b && b(e);
-		}
-	}, 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(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);
-				s !== 0 && (e.children && e.children.length > 0 ? (n[o].push({
-					col: e,
-					rowSpan: 1,
-					colSpan: s
-				}), a(e.children, o + 1)) : n[o].push({
-					col: e,
-					rowSpan: t - o,
-					colSpan: 1
-				}));
-			});
-		};
-		return a(V, 0), n.filter((e) => e.length > 0);
-	}, [
-		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;
-		y && A.length > 0 && (t += 48), H.forEach((n) => {
-			B[n.key] === "left" && (e[n.key] = {
-				side: "left",
-				offset: t
-			}, t += W(n));
-		});
-		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 += W(r));
-		}
-		return e;
-	}, [
-		H,
-		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;
-		});
-	}, bt = (e) => {
-		Me((t) => {
-			let n = { ...t };
-			return delete n[e], n;
-		});
-	}, G = l(() => {
-		let e = /* @__PURE__ */ new Map();
-		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);
-	}, [
-		_,
-		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 (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;
-				if (a == null) return 1;
-				if (o == null) return -1;
-				let s = 0;
-				return s = typeof a == "number" && typeof o == "number" ? a - o : String(a).localeCompare(String(o), void 0, {
-					numeric: !0,
-					sensitivity: "base"
-				}), n === "asc" ? s : -s;
-			});
-		}
-		return t;
-	}, [
-		_,
-		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,
-		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 >= 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).sort(([e], [t]) => e.localeCompare(t, void 0, {
-				numeric: !0,
-				sensitivity: "base"
-			})).map(([t, a]) => {
-				let o = r ? `${r}➔${t}` : t;
-				return {
-					isGroupRow: !0,
-					groupKey: i,
-					groupValue: t,
-					path: o,
-					depth: n,
-					children: e(a, n + 1, o),
-					totalItemsCount: a.length
-				};
-			});
-		};
-		return e(Ct, 0);
-	}, [
-		Ct,
-		A,
-		y,
-		G
-	]), Et = (e) => {
-		Ve((t) => {
-			let n = t[e] !== !1;
-			return {
-				...t,
-				[e]: !n
-			};
+}, te = (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 = te(r.children, t, n);
+		if (e) return e;
+	}
+	return null;
+}, I = (e, t) => {
+	let n = t[e.key];
+	if (n !== void 0) return n;
+	let r = e.style?.width || e.headerStyle?.width || "150px";
+	if (typeof r == "number") return r;
+	let i = String(r).trim();
+	return /^\d+(\.\d+)?(px)?$/i.test(i) && parseInt(i, 10) || 150;
+}, ne = (e, t, n) => {
+	let r = (e) => {
+		let t = 0;
+		return e.forEach((e) => {
+			t = e.children && e.children.length > 0 ? Math.max(t, 1 + r(e.children)) : Math.max(t, 1);
+		}), t;
+	}, i = r(e), a = Array.from({ length: i }, () => []), o = (e) => !e.children || e.children.length === 0 ? t.includes(e.key) || n.includes(e.key) ? 0 : 1 : e.children.reduce((e, t) => e + o(t), 0), s = (e, n) => {
+		e.forEach((e) => {
+			if (t.includes(e.key)) return;
+			let r = o(e);
+			r !== 0 && (e.children && e.children.length > 0 ? (a[n].push({
+				col: e,
+				rowSpan: 1,
+				colSpan: r
+			}), s(e.children, n + 1)) : a[n].push({
+				col: e,
+				rowSpan: i - n,
+				colSpan: 1
+			}));
 		});
-	}, X = l(() => {
-		if (!y || A.length === 0) return Tt;
-		let e = [], t = (n) => {
-			n.forEach((n) => {
-				n.isGroupRow ? (e.push(n), Be[n.path] !== !1 && t(n.children)) : e.push(n);
-			});
-		};
-		return t(Tt), e;
-	}, [
-		Tt,
-		Be,
-		A,
-		y
-	]), Dt = u(null), [Ot, kt] = d(0), [At, jt] = d(0);
-	c(() => {
-		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 = 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.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: r,
-			endIndex: i,
-			topSpacerHeight: r * S,
-			bottomSpacerHeight: (Z - i) * S
-		};
-	}, [
-		Ot,
-		At,
-		Z,
-		S,
-		xe
-	]), Ft = l(() => X.slice(Q, Mt), [
-		X,
-		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 {
+	};
+	s(e, 0);
+	let c = a.filter((e) => e.length > 0);
+	return c.map((e, t) => e.map((e) => ({
+		...e,
+		rowSpan: Math.min(e.rowSpan, c.length - t)
+	})));
+}, re = ({ visibleLeafColumns: e, pinnedColumns: t, columnWidths: n, hasGroups: r, hasActions: i }) => {
+	let a = {}, o = r ? 48 : 0;
+	e.forEach((e) => {
+		t[e.key] === "left" && (a[e.key] = {
+			side: "left",
+			offset: o
+		}, o += I(e, n));
+	});
+	let s = i ? 100 : 0;
+	for (let r = e.length - 1; r >= 0; r--) {
+		let i = e[r];
+		t[i.key] === "right" && (a[i.key] = {
+			side: "right",
+			offset: s
+		}, s += I(i, n));
+	}
+	return a;
+}, L = (e, t, n = !1, r) => {
+	let i = e[t];
+	if (!i) return r || {};
+	let a = i.side === "right";
+	return {
+		position: "sticky",
+		[a ? "right" : "left"]: `${i.offset}px`,
+		...n ? { top: 0 } : {},
+		zIndex: n ? 30 : 20,
+		background: "#f8fafc",
+		boxShadow: a ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
+		...r
+	};
+}, ie = () => /* @__PURE__ */ x("td", {
+	className: "flexi-row-indent-cell",
+	style: {
+		position: "sticky",
+		left: 0,
+		zIndex: 10
+	}
+});
+function R({ children: e }) {
+	return /* @__PURE__ */ x("td", {
+		className: "flexi-actions-cell",
+		style: {
 			position: "sticky",
-			[i ? "right" : "left"]: `${r.offset}px`,
-			...t ? { top: 0 } : {},
-			zIndex: t ? 30 : 20,
-			background: "#f8fafc",
-			boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
-			...n
-		};
-	}, 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", {
+			right: 0
+		},
+		children: /* @__PURE__ */ x("div", {
+			className: "flexi-actions-inner",
+			children: e
+		})
+	});
+}
+function ae({ node: e }) {
+	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: i, totalColumnsCount: o } = E(), s = n[e.path] !== !1;
+	return /* @__PURE__ */ S("tr", {
+		className: "flexi-group-row",
+		style: { height: t },
+		children: [/* @__PURE__ */ x("td", {
+			className: "flexi-group-cell",
+			style: {
+				position: "sticky",
+				left: 0,
+				zIndex: 20,
+				backgroundColor: "rgba(248, 250, 252, 0.9)",
+				paddingLeft: `${e.depth * 12 + 16}px`
+			},
+			children: /* @__PURE__ */ S("button", {
+				type: "button",
+				onClick: () => i(e.path),
+				className: "flexi-group-toggle",
+				children: [
+					x(s ? r : a, { className: "flexi-icon-md flexi-icon-muted" }),
+					/* @__PURE__ */ x("span", {
+						className: "flexi-group-value",
+						children: e.groupValue
+					}),
+					/* @__PURE__ */ x("span", {
+						className: "flexi-group-count",
+						children: e.totalItemsCount
+					})
+				]
+			})
+		}), /* @__PURE__ */ x("td", {
+			colSpan: Math.max(1, o - 1),
+			className: "flexi-group-filler"
+		})]
+	});
+}
+function oe({ record: e, rowIndex: t, className: n }) {
+	let { rowHeight: r, hasGroups: i, hasActions: a, actions: o, onRowClick: s, visibleLeafColumns: c, pinnedColumns: l, pinOffsets: u, rowSpanColumns: d, rowSpanInfo: f } = E(), p = f.get(t);
+	return /* @__PURE__ */ S("tr", {
+		className: D("flexi-row", s && "flexi-row--clickable", n),
+		style: { height: r },
+		onClick: s ? (n) => s(e, t, n) : void 0,
+		children: [
+			i && /* @__PURE__ */ x(ie, {}),
+			c.map((t) => {
+				let n = d?.includes(t.key) ? p?.[t.key] : void 0;
+				if (n === "skip") return null;
+				let r = e[t.key];
+				return /* @__PURE__ */ x("td", {
+					rowSpan: typeof n == "number" ? n : void 0,
+					className: D("flexi-cell", !!l[t.key] && "flexi-cell--pinned", t.className),
+					style: L(u, t.key, !1, t.style),
+					children: t.render ? t.render(r, e) : /* @__PURE__ */ x("span", {
+						className: "flexi-cell-text",
+						children: r
+					})
+				}, t.key);
+			}),
+			a && o && /* @__PURE__ */ x(R, { children: o(e) })
+		]
+	});
+}
+function se({ record: e, index: t, className: n }) {
+	let { hasGroups: r, hasActions: i, actions: a, pinnedBottomRowData: o, visibleLeafColumns: s, pinnedColumns: c, pinOffsets: l } = E(), u = {
+		position: "sticky",
+		bottom: `${(o.length - 1 - t) * 48}px`,
+		zIndex: 45
+	};
+	return /* @__PURE__ */ S("tr", {
+		className: D("flexi-row", "flexi-row--pinned-bottom", n),
+		style: u,
+		children: [
+			r && /* @__PURE__ */ x(ie, {}),
+			s.map((t) => {
+				let n = e[t.key], r = t.pinnedRender ?? t.render;
+				return /* @__PURE__ */ x("td", {
+					className: D("flexi-cell", !!c[t.key] && "flexi-cell--pinned", t.className),
+					style: L(l, t.key, !1, t.style),
+					children: r ? r(n, e) : /* @__PURE__ */ x("span", {
+						className: "flexi-cell-text",
+						children: n
+					})
+				}, t.key);
+			}),
+			i && a && /* @__PURE__ */ x(R, { children: a(e) })
+		]
+	});
+}
+//#endregion
+//#region src/DataTable/components/PinnedBottomBody.tsx
+function z() {
+	let { pinnedBottomRowData: e, pinnedRowClassName: t } = E();
+	return e.length === 0 ? null : /* @__PURE__ */ x("tbody", {
+		className: "flexi-tbody flexi-tbody--pinned-bottom",
+		children: e.map((e, n) => /* @__PURE__ */ x(se, {
+			record: e,
+			index: n,
+			className: typeof t == "function" ? t(e, n) : t
+		}, `pinned-bottom-row-${n}`))
+	});
+}
+//#endregion
+//#region src/DataTable/components/SettingsMenu.tsx
+function B() {
+	let { settingsMenu: e } = E();
+	return /* @__PURE__ */ x("button", {
 		type: "button",
-		ref: P,
-		onClick: (e) => {
-			e.stopPropagation(), Qe((e) => !e);
+		ref: e.buttonRef,
+		onClick: (t) => {
+			t.stopPropagation(), e.toggle();
 		},
-		className: h("flexi-icon-btn", N && "flexi-settings-btn--active"),
+		className: D("flexi-icon-btn", e.isOpen && "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,
+		children: /* @__PURE__ */ x(f, { className: "flexi-icon-sm" })
+	});
+}
+function V() {
+	let { gridRootRef: e, settingsMenu: t, displayPinnedIcon: n, toggleDisplayPinnedIcon: r, initialLeafColumns: i, hiddenColumns: a, toggleColumnVisibility: o, resetControlPanelDefaults: s } = E(), c = e.current;
+	return !t.isOpen || !t.position || !c ? null : C(/* @__PURE__ */ S("div", {
+		ref: t.menuRef,
 		className: "flexi-settings-menu",
 		style: {
-			top: Ie.top,
-			right: Ie.right,
+			top: t.position.top,
+			right: t.position.right,
 			zIndex: 9999
 		},
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flexi-settings-section",
-				children: [/* @__PURE__ */ f("span", {
+				children: [/* @__PURE__ */ x("span", {
 					className: "flexi-settings-heading",
 					children: "Action Icons"
-				}), /* @__PURE__ */ p("label", {
+				}), /* @__PURE__ */ S("label", {
 					className: "flexi-filter-option",
-					children: [/* @__PURE__ */ f("input", {
+					children: [/* @__PURE__ */ x("input", {
 						type: "checkbox",
 						className: "flexi-checkbox",
-						checked: Ye,
-						onChange: () => Xe((e) => !e)
-					}), /* @__PURE__ */ f("span", {
+						checked: n,
+						onChange: r
+					}), /* @__PURE__ */ x("span", {
 						className: "flexi-filter-option-text",
 						children: "Show pin icon on hover"
 					})]
 				})]
 			}),
-			/* @__PURE__ */ f("div", { className: "flexi-settings-divider" }),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ x("div", { className: "flexi-settings-divider" }),
+			/* @__PURE__ */ S("div", {
 				className: "flexi-settings-section",
-				children: [/* @__PURE__ */ f("span", {
+				children: [/* @__PURE__ */ x("span", {
 					className: "flexi-settings-heading",
 					children: "Columns"
-				}), z.map((e) => /* @__PURE__ */ p("label", {
+				}), i.map((e) => /* @__PURE__ */ S("label", {
 					className: "flexi-filter-option",
-					children: [/* @__PURE__ */ f("input", {
+					children: [/* @__PURE__ */ x("input", {
 						type: "checkbox",
 						className: "flexi-checkbox",
-						checked: !M.includes(e.key),
-						onChange: () => ct(e.key)
-					}), /* @__PURE__ */ f("span", {
+						checked: !a.includes(e.key),
+						onChange: () => o(e.key)
+					}), /* @__PURE__ */ x("span", {
 						className: "flexi-filter-option-text",
 						children: e.header
 					})]
 				}, e.key))]
 			}),
-			/* @__PURE__ */ f("div", { className: "flexi-settings-divider" }),
-			/* @__PURE__ */ p("button", {
+			/* @__PURE__ */ x("div", { className: "flexi-settings-divider" }),
+			/* @__PURE__ */ S("button", {
 				type: "button",
-				onClick: lt,
+				onClick: s,
 				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" })]
+				children: [/* @__PURE__ */ x(d, { className: "flexi-icon-sm" }), /* @__PURE__ */ x("span", { children: "Reset to defaults" })]
 			})
 		]
-	}), U.current);
-	return /* @__PURE__ */ p("div", {
-		ref: U,
-		className: "flexi-root",
+	}), c);
+}
+//#endregion
+//#region src/DataTable/utils/records.ts
+var H = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], U = (e, t) => {
+	let n = typeof t == "function" ? t(e) : e[t];
+	return n == null ? void 0 : String(n);
+}, W = (e, t, n) => {
+	if (!n) return;
+	let r;
+	for (let i in n) n[i](e, t) && (r = r ? `${r} ${i}` : i);
+	return r;
+}, G = (e, t, n) => {
+	let r = e.map((e) => H(e, t, n));
+	return Array.from(new Set(r)).filter((e) => e != null);
+}, ce = (e, t, n) => {
+	let r = Object.entries(t).filter(([, e]) => e && e.length > 0);
+	return r.length === 0 ? e : e.filter((e) => r.every(([t, r]) => r.includes(H(e, t, n.get(t)))));
+}, K = (e) => e == null || typeof e == "number" && Number.isNaN(e), q = (e, t) => typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
+	numeric: !0,
+	sensitivity: "base"
+}), le = (e, t, n, r) => [...e].sort((e, i) => {
+	let a = H(e, t, r), o = H(i, t, r);
+	if (a === o) return 0;
+	let s = K(a), c = K(o);
+	if (s && c) return 0;
+	if (s) return 1;
+	if (c) return -1;
+	let l = q(a, o);
+	return n === "asc" ? l : -l;
+});
+//#endregion
+//#region src/DataTable/components/TableBody.tsx
+function ue() {
+	let { isLoading: e, visibleRows: t, startIndex: n, totalRowCount: r, topSpacerHeight: i, bottomSpacerHeight: a, totalColumnsCount: o, rowKey: s, rowClassRules: c } = E(), l = Math.max(1, o);
+	return e || r === 0 ? /* @__PURE__ */ x("tbody", {
+		className: "flexi-tbody",
+		children: /* @__PURE__ */ x("tr", { children: /* @__PURE__ */ x("td", {
+			colSpan: l,
+			className: "flexi-empty-cell",
+			children: e ? "Loading records..." : "No records found matching criteria."
+		}) })
+	}) : /* @__PURE__ */ S("tbody", {
+		className: "flexi-tbody",
 		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))]
+			i > 0 && /* @__PURE__ */ x("tr", {
+				"aria-hidden": "true",
+				style: { height: i },
+				children: /* @__PURE__ */ x("td", {
+					colSpan: l,
+					style: {
+						padding: 0,
+						border: "none",
+						height: i
+					}
 				})
 			}),
-			/* @__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
-														},
-														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"
-																})
-															})
-														]
-													}), 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
-										}
-									})
-								}),
-								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
-										}
-									})
-								})
-							] })
-						}),
-						x.length > 0 && /* @__PURE__ */ f("tbody", {
-							className: "flexi-tbody flexi-tbody--pinned-bottom",
-							children: x.map((e, t) => Ht(e, t))
-						})
-					]
-				})
+			t.map((e, t) => {
+				let r = n + t;
+				return e.kind === "group" ? /* @__PURE__ */ x(ae, { node: e }, `group-header-${e.path}-${r}`) : /* @__PURE__ */ x(oe, {
+					record: e.record,
+					rowIndex: r,
+					className: W(e.record, r, c)
+				}, U(e.record, s) ?? `row-${r}`);
 			}),
-			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__ */ 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" })
-							}),
-							/* @__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" })
-							})
-						]
-					})
-				]
+			a > 0 && /* @__PURE__ */ x("tr", {
+				"aria-hidden": "true",
+				style: { height: a },
+				children: /* @__PURE__ */ x("td", {
+					colSpan: l,
+					style: {
+						padding: 0,
+						border: "none",
+						height: a
+					}
+				})
 			})
 		]
 	});
-	function Vt(e, t) {
-		if (e.isGroupRow) {
-			let n = Be[e.path] !== !1;
-			return /* @__PURE__ */ p("tr", {
-				className: "flexi-group-row",
-				style: { height: S },
-				children: [/* @__PURE__ */ f("td", {
-					className: "flexi-group-cell",
-					style: {
-						position: "sticky",
-						left: 0,
-						zIndex: 20,
-						backgroundColor: "rgba(248, 250, 252, 0.9)",
-						paddingLeft: `${e.depth * 12 + 16}px`
-					},
-					children: /* @__PURE__ */ p("button", {
+}
+//#endregion
+//#region src/DataTable/components/TableColGroup.tsx
+function de() {
+	let { hasGroups: e, hasActions: t, visibleLeafColumns: n, columnWidths: r } = E();
+	return /* @__PURE__ */ S("colgroup", { children: [
+		e && /* @__PURE__ */ x("col", { style: { width: "48px" } }),
+		n.map((e) => /* @__PURE__ */ x("col", { style: {
+			...e.style,
+			width: I(e, r)
+		} }, e.key)),
+		t && /* @__PURE__ */ x("col", { style: { width: "100px" } })
+	] });
+}
+//#endregion
+//#region src/DataTable/components/FilterDropdown.tsx
+function J({ columnKey: e }) {
+	let { gridRootRef: t, filters: n } = E(), r = t.current, { filterPosition: i } = n;
+	if (!r || !i) return null;
+	let a = n.selectedFilters[e], o = (a?.length || 0) > 0, s = n.filteredUniqueValues;
+	return C(/* @__PURE__ */ S("div", {
+		ref: n.dropdownRef,
+		className: "flexi-filter-dropdown",
+		style: {
+			top: i.top,
+			left: i.left,
+			zIndex: 9999
+		},
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "flexi-filter-search",
+				children: /* @__PURE__ */ x("input", {
+					type: "text",
+					placeholder: "Search values...",
+					value: n.filterSearchQuery,
+					onChange: (e) => n.setFilterSearchQuery(e.target.value),
+					className: "flexi-input",
+					onClick: (e) => e.stopPropagation()
+				})
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "flexi-filter-list",
+				children: s.length === 0 ? /* @__PURE__ */ x("div", {
+					className: "flexi-filter-empty",
+					children: "No results found"
+				}) : s.map((t, r) => /* @__PURE__ */ S("label", {
+					className: "flexi-filter-option",
+					children: [/* @__PURE__ */ x("input", {
+						type: "checkbox",
+						className: "flexi-checkbox",
+						checked: a?.includes(t) || !1,
+						onChange: () => n.handleFilterChange(e, t)
+					}), /* @__PURE__ */ x("span", {
+						className: "flexi-filter-option-text",
+						children: String(t)
+					})]
+				}, r))
+			}),
+			o && /* @__PURE__ */ x("div", {
+				className: "flexi-filter-footer",
+				children: /* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: () => n.clearFilter(e),
+					className: "flexi-filter-clear",
+					children: "Clear Filter"
+				})
+			})
+		]
+	}), r);
+}
+//#endregion
+//#region src/DataTable/components/HeaderCell.tsx
+function Y({ col: r, rowSpan: i, colSpan: a }) {
+	let { groupBy: o, pinnedColumns: s, pinOffsets: d, displayPinnedIcon: f, togglePin: p, sortState: m, handleSort: h, filters: g, handleDragStart: _, handleDragEnd: v, handleDrop: y, startResize: b } = E(), C = s[r.key], w = !!C, T = (g.selectedFilters[r.key]?.length || 0) > 0, O = !r.children || r.children.length === 0, k = m.key === r.key, ee = o && O, A = O && r.resizable !== !1, j = !!r.sortable && O;
+	return /* @__PURE__ */ S("th", {
+		rowSpan: i,
+		colSpan: a,
+		draggable: !0,
+		onDragStart: (e) => _(e, r.key, O),
+		onDragEnd: v,
+		onDragOver: (e) => e.preventDefault(),
+		onDrop: (e) => y(e, r.key),
+		className: D("flexi-th", "flexi-th--draggable", ee && "flexi-th--group-draggable", w && "flexi-th--pinned", r.className, r.headerClassName),
+		style: L(d, r.key, !0, r.headerStyle),
+		children: [/* @__PURE__ */ S("div", {
+			className: "flexi-th-inner",
+			children: [
+				/* @__PURE__ */ S("div", {
+					className: D("flexi-th-label", j && "flexi-th-label--sortable"),
+					onClick: () => j && h(r.key),
+					children: [/* @__PURE__ */ x("span", {
+						className: "flexi-th-text",
+						children: r.header
+					}), j && /* @__PURE__ */ x("span", {
+						className: D("flexi-sort-icon", k && "flexi-sort-icon--active"),
+						children: k && m.direction === "asc" ? /* @__PURE__ */ x(t, { className: "flexi-icon-sm" }) : k && m.direction === "desc" ? /* @__PURE__ */ x(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ x(n, { className: "flexi-icon-sm" })
+					})]
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "flexi-th-actions",
+					children: [O && r.filterable && /* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => Et(e.path),
-						className: "flexi-group-toggle",
-						children: [
-							f(n ? r : a, { className: "flexi-icon-md flexi-icon-muted" }),
-							/* @__PURE__ */ f("span", {
-								className: "flexi-group-value",
-								children: e.groupValue
-							}),
-							/* @__PURE__ */ f("span", {
-								className: "flexi-group-count",
-								children: e.totalItemsCount
-							})
-						]
-					})
-				}), /* @__PURE__ */ f("td", {
-					colSpan: $ - 1,
-					className: "flexi-group-filler"
-				})]
-			}, `group-header-${e.path}-${t}`);
-		}
-		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,
+						ref: (e) => g.registerFilterButton(r.key, e),
+						onClick: (e) => {
+							e.stopPropagation(), g.toggleFilterDropdown(r.key);
+						},
+						className: D("flexi-icon-btn", "flexi-filter-btn", T && "flexi-filter-btn--active"),
+						children: /* @__PURE__ */ x(c, { className: "flexi-icon-sm" })
+					}), O && f && /* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation(), p(r.key);
+						},
+						className: D("flexi-icon-btn", "flexi-pin-btn", w && "flexi-pin-btn--pinned"),
+						title: C === "left" ? "Pinned left (click to pin right)" : C === "right" ? "Pinned right (click to unpin)" : "Pin column left",
+						children: x(w ? u : l, { className: "flexi-icon-sm" })
+					})]
+				}),
+				O && g.activeFilterKey === r.key && /* @__PURE__ */ x(J, { columnKey: r.key })
+			]
+		}), A && /* @__PURE__ */ x("div", {
+			className: "flexi-th-resizer",
+			onMouseDown: (e) => b(e, r),
+			onClick: (e) => e.stopPropagation(),
+			onDragStart: (e) => e.preventDefault()
+		})]
+	});
+}
+//#endregion
+//#region src/DataTable/components/TableHeader.tsx
+function fe() {
+	let { headerRows: e, hasGroups: t, controlPanel: n } = E(), r = e.length === 0 && n ? [[]] : e;
+	return /* @__PURE__ */ x("thead", {
+		className: "flexi-thead",
+		children: r.map((e, i) => /* @__PURE__ */ S("tr", {
+			className: "flexi-header-row",
 			children: [
-				y && A?.length > 0 && /* @__PURE__ */ f("td", {
-					className: "flexi-row-indent-cell",
+				i === 0 && t && /* @__PURE__ */ x("th", {
+					rowSpan: r.length,
+					className: "flexi-group-spacer-th",
 					style: {
 						position: "sticky",
+						top: 0,
 						left: 0,
-						zIndex: 10
+						zIndex: 35,
+						backgroundColor: "rgb(248, 250, 252)"
 					}
 				}),
-				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: i
-						})
-					}, n.key);
-				}),
-				v && /* @__PURE__ */ f("td", {
-					className: "flexi-actions-cell",
+				e.map(({ col: e, rowSpan: t, colSpan: n }) => /* @__PURE__ */ x(Y, {
+					col: e,
+					rowSpan: t,
+					colSpan: n
+				}, e.key)),
+				n && i === 0 && /* @__PURE__ */ x("th", {
+					className: "flexi-actions-th flexi-th ",
 					style: {
-						position: "sticky",
-						right: 0
+						right: 0,
+						zIndex: 55,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center"
 					},
-					children: /* @__PURE__ */ f("div", {
-						className: "flexi-actions-inner",
-						children: v(e)
-					})
+					children: /* @__PURE__ */ x(B, {})
 				})
 			]
-		}, n ?? `row-${t}`);
+		}, `header-row-${i}`))
+	});
+}
+//#endregion
+//#region src/DataTable/utils/grouping.ts
+var pe = (e, t, n, r = 0, i = "") => {
+	if (r >= t.length) return e.map((e) => ({
+		kind: "record",
+		record: e
+	}));
+	let a = t[r], o = n.get(a), s = /* @__PURE__ */ new Map();
+	return e.forEach((e) => {
+		let t = String(H(e, a, o) ?? "N/A"), n = s.get(t);
+		n ? n.push(e) : s.set(t, [e]);
+	}), Array.from(s.entries()).sort(([e], [t]) => e.localeCompare(t, void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	})).map(([e, o]) => {
+		let s = i ? `${i}➔${e}` : e;
+		return {
+			kind: "group",
+			groupKey: a,
+			groupValue: e,
+			path: s,
+			depth: r,
+			children: pe(o, t, n, r + 1, s),
+			totalItemsCount: o.length
+		};
+	});
+}, me = (e, t) => {
+	let n = [], r = (e) => {
+		e.forEach((e) => {
+			n.push(e), e.kind === "group" && t[e.path] !== !1 && r(e.children);
+		});
+	};
+	return r(e), n;
+}, he = (e, t, n, r) => {
+	let i = /* @__PURE__ */ new Map();
+	if (!t || t.length === 0) return i;
+	let a = e.map(() => t.map(() => !0)), o = null;
+	for (let r = 0; r < e.length; r++) {
+		let i = e[r];
+		if (i.kind === "group") {
+			o = null;
+			continue;
+		}
+		let s = o === null ? null : e[o];
+		if (s && s.kind === "record") {
+			let e = !0;
+			for (let o = 0; o < t.length; o++) {
+				let c = t[o], l = n.get(c);
+				e && H(i.record, c, l) === H(s.record, c, l) ? a[r][o] = !1 : (e = !1, a[r][o] = !0);
+			}
+		}
+		o = r;
 	}
-	function Ht(e, t) {
-		let n = typeof be == "function" ? be(e, t) : be, r = {
-			position: "sticky",
-			bottom: `${Rt[t]}px`,
-			background: "#",
-			zIndex: 45
+	return t.forEach((t, n) => {
+		let o = 0;
+		for (; o < e.length;) {
+			if (e[o].kind === "group" || !a[o][n]) {
+				o++;
+				continue;
+			}
+			let s = o + 1;
+			for (; s < e.length && e[s].kind !== "group" && !a[s][n];) s++;
+			if (s - o > 1) {
+				let e = i.get(r + o) || {};
+				e[t] = s - o, i.set(r + o, e);
+				for (let e = o + 1; e < s; e++) {
+					let n = i.get(r + e) || {};
+					n[t] = "skip", i.set(r + e, n);
+				}
+			}
+			o = s;
+		}
+	}), i;
+};
+//#endregion
+//#region src/DataTable/hooks/useAnchoredPosition.ts
+function X({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
+	let [a, o] = b(null), s = y(r), c = y(i);
+	return s.current = r, c.current = i, _(() => {
+		if (!e) {
+			o(null);
+			return;
+		}
+		let t = () => {
+			let e = s.current(), t = n.current;
+			!e || !t || o(c.current(e.getBoundingClientRect(), t.getBoundingClientRect()));
+		};
+		return t(), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+			window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+		};
+	}, [
+		e,
+		t,
+		n
+	]), a;
+}
+//#endregion
+//#region src/DataTable/hooks/useClickOutside.ts
+function Z(e, t, n) {
+	let r = y(t), i = y(n);
+	r.current = t, i.current = n, _(() => {
+		if (!e) return;
+		let t = (e) => {
+			let t = e.target, [n, ...a] = r.current();
+			n && (n.contains(t) || a.some((e) => e?.contains(t)) || i.current());
 		};
-		return /* @__PURE__ */ p("tr", {
-			className: h("flexi-row", "flexi-row--pinned-bottom", n),
-			style: r,
+		return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+	}, [e]);
+}
+//#endregion
+//#region src/DataTable/hooks/useColumnFilters.ts
+function ge({ data: e, columnsByKey: t, gridRootRef: n }) {
+	let [r, i] = b(null), [a, o] = b({}), [s, c] = b(""), l = y(/* @__PURE__ */ new Map()), u = y(null), d = h((e, t) => {
+		t ? l.current.set(e, t) : l.current.delete(e);
+	}, []), f = h(() => {
+		i(null), c("");
+	}, []), p = h((e) => {
+		c(""), i((t) => t === e ? null : e);
+	}, []);
+	Z(r !== null, () => [u.current, r ? l.current.get(r) : null], f);
+	let m = X({
+		active: r !== null,
+		resetKey: r,
+		rootRef: n,
+		getAnchor: () => r ? l.current.get(r) : null,
+		compute: (e, t) => ({
+			top: e.bottom - t.top + 4,
+			left: e.left - t.left
+		})
+	}), g = h((e, t) => {
+		o((n) => {
+			let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
+				...n,
+				[e]: i
+			};
+			return i.length === 0 && delete a[e], a;
+		});
+	}, []), _ = h((e) => {
+		o((t) => {
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, []), x = v(() => r ? G(e, r, t.get(r)) : [], [
+		e,
+		r,
+		t
+	]);
+	return {
+		activeFilterKey: r,
+		selectedFilters: a,
+		filterSearchQuery: s,
+		setFilterSearchQuery: c,
+		filterPosition: m,
+		dropdownRef: u,
+		filteredUniqueValues: v(() => {
+			if (!s.trim()) return x;
+			let e = s.toLowerCase();
+			return x.filter((t) => String(t).toLowerCase().includes(e));
+		}, [x, s]),
+		registerFilterButton: d,
+		toggleFilterDropdown: p,
+		handleFilterChange: g,
+		clearFilter: _
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useColumnReorder.ts
+function _e({ columns: e, pinnedColumns: t, isResizingRef: n, onColumnReorder: r }) {
+	let [i, a] = b({}), o = y(null), s = v(() => F(e, t, i), [
+		e,
+		t,
+		i
+	]);
+	return {
+		reorderedColumns: s,
+		handleDragStart: h((e, t, r) => {
+			if (n.current) {
+				e.preventDefault();
+				return;
+			}
+			o.current = t, r && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
+		}, [n]),
+		handleDragEnd: h(() => {
+			o.current = null;
+		}, []),
+		handleDrop: h((n, c) => {
+			n.preventDefault(), n.stopPropagation();
+			let l = o.current;
+			if (o.current = null, !l || l === c) return;
+			let u = te(s, l, c);
+			if (!u) return;
+			let d = u.map((e) => e.key), f = d.indexOf(l), p = d.indexOf(c);
+			d.splice(p, 0, d.splice(f, 1)[0]);
+			let m = { ...i };
+			d.forEach((e, t) => {
+				m[e] = t;
+			}), a(m), r && r(M(F(e, t, m)).map((e) => e.key));
+		}, [
+			s,
+			i,
+			e,
+			t,
+			r
+		])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useColumnResize.ts
+function ve(e) {
+	let [t, n] = b({}), r = y(!1), i = y(null), a = y(e);
+	return a.current = e, _(() => () => i.current?.(), []), {
+		columnWidths: t,
+		isResizingRef: r,
+		startResize: h((e, o) => {
+			e.preventDefault(), e.stopPropagation(), i.current?.(), r.current = !0;
+			let s = e.clientX, c = I(o, t), l = o.minWidth ?? 60, u = o.maxWidth, d = t[o.key], f = (e) => {
+				let t = Math.max(l, c + (e.clientX - s));
+				u && (t = Math.min(u, t)), d = t, n((e) => e[o.key] === t ? e : {
+					...e,
+					[o.key]: t
+				});
+			}, p = () => {
+				window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", m), i.current = null;
+			}, m = () => {
+				p(), requestAnimationFrame(() => {
+					r.current = !1;
+				}), d !== void 0 && a.current?.(o.key, d);
+			};
+			window.addEventListener("mousemove", f), window.addEventListener("mouseup", m), i.current = () => {
+				p(), r.current = !1;
+			};
+		}, [t])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useColumnVisibility.ts
+function ye({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: t, onColumnVisibilityChange: n }) {
+	let [r, i] = b(e), [a, o] = b(t);
+	return {
+		hiddenColumns: r,
+		displayPinnedIcon: a,
+		toggleColumnVisibility: h((e) => {
+			let t = r.includes(e) ? r.filter((t) => t !== e) : [...r, e];
+			i(t), n?.(t);
+		}, [r, n]),
+		toggleDisplayPinnedIcon: h(() => o((e) => !e), []),
+		resetControlPanelDefaults: h(() => {
+			o(t), i(e), n?.(e);
+		}, [
+			t,
+			e,
+			n
+		])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/usePagination.ts
+function be({ items: e, enabled: t, defaultPageSize: n, onPageChange: r, resetOn: i }) {
+	let [a, o] = b(1), [s, c] = b(Math.max(1, Math.floor(n) || 1)), l = e.length, u = t ? Math.max(1, Math.ceil(l / s)) : 1;
+	return _(() => {
+		o(1);
+	}, [
+		...i,
+		s,
+		t
+	]), _(() => {
+		a > u && o(u);
+	}, [a, u]), {
+		currentPage: a,
+		pageSize: s,
+		totalPages: u,
+		totalCount: l,
+		pagedItems: v(() => {
+			if (!t) return e;
+			let n = (a - 1) * s;
+			return e.slice(n, n + s);
+		}, [
+			e,
+			t,
+			a,
+			s
+		]),
+		goToPage: h((e) => {
+			let t = Math.min(Math.max(1, e), u);
+			o(t), r?.(t, s);
+		}, [
+			u,
+			s,
+			r
+		]),
+		changePageSize: h((e) => {
+			c(e), o(1), r?.(1, e);
+		}, [r])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/usePinnedColumns.ts
+function xe(e, t) {
+	let [n, r] = b(() => P(e));
+	return {
+		pinnedColumns: n,
+		togglePin: h((e) => {
+			let i = n[e], a = i ? i === "left" ? "right" : void 0 : "left", o = { ...n };
+			a ? o[e] = a : delete o[e], r(o), t?.(e, !!a, a);
+		}, [n, t])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useRowGrouping.ts
+function Se(e, t) {
+	let [n, r] = b(e), [i, a] = b({});
+	return {
+		groupedColumns: n,
+		expandedGroups: i,
+		addGroup: h((e) => {
+			if (!e || n.includes(e)) return;
+			let i = [...n, e];
+			r(i), t?.(i);
+		}, [n, t]),
+		removeGroup: h((e) => {
+			let i = n.filter((t) => t !== e);
+			r(i), a({}), t?.(i);
+		}, [n, t]),
+		toggleGroupExpansion: h((e) => {
+			a((t) => ({
+				...t,
+				[e]: t[e] === !1
+			}));
+		}, [])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useSettingsMenu.ts
+function Ce(e) {
+	let [t, n] = b(!1), r = y(null), i = y(null), a = h(() => n((e) => !e), []);
+	return Z(t, () => [r.current, i.current], h(() => n(!1), [])), {
+		isOpen: t,
+		position: X({
+			active: t,
+			rootRef: e,
+			getAnchor: () => i.current,
+			compute: (e, t) => ({
+				top: e.bottom - t.top + 4,
+				right: t.right - e.right
+			})
+		}),
+		menuRef: r,
+		buttonRef: i,
+		toggle: a
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useSorting.ts
+function we() {
+	let [e, t] = b({
+		key: null,
+		direction: null
+	});
+	return {
+		sortState: e,
+		handleSort: h((e) => {
+			t((t) => {
+				let n = "asc";
+				return t.key === e && (t.direction === "asc" ? n = "desc" : t.direction === "desc" && (n = null)), {
+					key: n ? e : null,
+					direction: n
+				};
+			});
+		}, [])
+	};
+}
+//#endregion
+//#region src/DataTable/hooks/useVirtualRows.ts
+function Te({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: r }) {
+	let [i, a] = b(0), [o, s] = b(0);
+	return _(() => {
+		let t = e.current;
+		if (!t) return;
+		let n = () => a(t.scrollTop);
+		s(t.clientHeight), a(t.scrollTop), t.addEventListener("scroll", n, { passive: !0 });
+		let r;
+		return typeof ResizeObserver < "u" && (r = new ResizeObserver(() => s(t.clientHeight)), r.observe(t)), () => {
+			t.removeEventListener("scroll", n), r?.disconnect();
+		};
+	}, [e]), v(() => {
+		if (o === 0) return {
+			startIndex: 0,
+			endIndex: t,
+			topSpacerHeight: 0,
+			bottomSpacerHeight: 0
+		};
+		let e = n > 0 ? n : 1, a = Math.max(0, t - 1), s = Math.min(a, Math.floor(i / e)), c = Math.ceil(o / e) + 1, l = Math.max(0, s - r), u = Math.min(t, s + c + r);
+		return {
+			startIndex: l,
+			endIndex: u,
+			topSpacerHeight: l * e,
+			bottomSpacerHeight: (t - u) * e
+		};
+	}, [
+		i,
+		o,
+		t,
+		n,
+		r
+	]);
+}
+//#endregion
+//#region src/DataTable/hooks/useDataTableState.ts
+function Q({ columns: e, data: t, rowKey: n, actions: r, isLoading: i, groupBy: a = !1, defaultGroupBy: o = A, onPinChange: s, onGroupChange: c, pinnedBottomRowData: l = j, pinnedRowClassName: u, rowHeight: d = 48, overscan: f = 8, onColumnResize: p, onColumnReorder: m, rowClassRules: h, onRowClick: g, rowSpanColumns: _, controlPanel: b = !1, defaultDisplayPinnedIcon: x = !0, defaultHiddenColumns: S = A, onColumnVisibilityChange: C, pagination: w = !1, defaultPageSize: T = 10, pageSizeOptions: E = ee, onPageChange: D }) {
+	let O = y(null), k = y(null), N = v(() => M(e), [e]), P = v(() => {
+		let e = /* @__PURE__ */ new Map();
+		return N.forEach((t) => e.set(t.key, t)), e;
+	}, [N]), { pinnedColumns: F, togglePin: te } = xe(N, s), { columnWidths: I, isResizingRef: L, startResize: ie } = ve(p), { reorderedColumns: R, handleDragStart: ae, handleDragEnd: oe, handleDrop: se } = _e({
+		columns: e,
+		pinnedColumns: F,
+		isResizingRef: L,
+		onColumnReorder: m
+	}), z = ye({
+		defaultHiddenColumns: S,
+		defaultDisplayPinnedIcon: x,
+		onColumnVisibilityChange: C
+	}), { hiddenColumns: B } = z, V = Se(o, c), { groupedColumns: H, expandedGroups: U } = V, W = a ? H : A, G = W.length > 0, K = !!r, q = v(() => M(R).filter((e) => !W.includes(e.key) && !B.includes(e.key)), [
+		R,
+		W,
+		B
+	]), ue = v(() => ne(R, W, B), [
+		R,
+		W,
+		B
+	]), de = v(() => re({
+		visibleLeafColumns: q,
+		pinnedColumns: F,
+		columnWidths: I,
+		hasGroups: G,
+		hasActions: K
+	}), [
+		q,
+		F,
+		I,
+		G,
+		K
+	]), J = ge({
+		data: t,
+		columnsByKey: P,
+		gridRootRef: O
+	}), { sortState: Y, handleSort: fe } = we(), X = be({
+		items: v(() => {
+			let e = ce(t, J.selectedFilters, P);
+			return !Y.key || !Y.direction ? e : le(e, Y.key, Y.direction, P.get(Y.key));
+		}, [
+			t,
+			J.selectedFilters,
+			Y,
+			P
+		]),
+		enabled: w,
+		defaultPageSize: T,
+		onPageChange: D,
+		resetOn: [J.selectedFilters, Y]
+	}), Z = v(() => pe(X.pagedItems, W, P), [
+		X.pagedItems,
+		W,
+		P
+	]), Q = v(() => me(Z, U), [Z, U]), Ee = Q.length, { startIndex: $, endIndex: De, topSpacerHeight: Oe, bottomSpacerHeight: ke } = Te({
+		containerRef: k,
+		totalRowCount: Ee,
+		rowHeight: d,
+		overscan: f
+	}), Ae = v(() => Q.slice($, De), [
+		Q,
+		$,
+		De
+	]), je = v(() => he(Ae, _, P, $), [
+		Ae,
+		_,
+		P,
+		$
+	]), Me = Ce(O), Ne = q.length + +!!K + +!!G;
+	return {
+		gridRootRef: O,
+		tableWrapRef: k,
+		rowKey: n,
+		actions: r,
+		isLoading: !!i,
+		groupBy: a,
+		controlPanel: b,
+		rowHeight: d,
+		rowSpanColumns: _,
+		rowClassRules: h,
+		onRowClick: g,
+		pinnedBottomRowData: l,
+		pinnedRowClassName: u,
+		pageSizeOptions: E,
+		paginationEnabled: w,
+		initialLeafColumns: N,
+		columnsByKey: P,
+		visibleLeafColumns: q,
+		headerRows: ue,
+		pinnedColumns: F,
+		pinOffsets: de,
+		columnWidths: I,
+		togglePin: te,
+		startResize: ie,
+		handleDragStart: ae,
+		handleDragEnd: oe,
+		handleDrop: se,
+		hiddenColumns: B,
+		displayPinnedIcon: z.displayPinnedIcon,
+		toggleColumnVisibility: z.toggleColumnVisibility,
+		toggleDisplayPinnedIcon: z.toggleDisplayPinnedIcon,
+		resetControlPanelDefaults: z.resetControlPanelDefaults,
+		settingsMenu: Me,
+		groupedColumns: H,
+		expandedGroups: U,
+		addGroup: V.addGroup,
+		removeGroup: V.removeGroup,
+		toggleGroupExpansion: V.toggleGroupExpansion,
+		hasGroups: G,
+		hasActions: K,
+		sortState: Y,
+		handleSort: fe,
+		filters: J,
+		currentPage: X.currentPage,
+		pageSize: X.pageSize,
+		totalPages: X.totalPages,
+		totalCount: X.totalCount,
+		goToPage: X.goToPage,
+		changePageSize: X.changePageSize,
+		visibleRows: Ae,
+		startIndex: $,
+		totalRowCount: Ee,
+		topSpacerHeight: Oe,
+		bottomSpacerHeight: ke,
+		rowSpanInfo: je,
+		totalColumnsCount: Ne
+	};
+}
+//#endregion
+//#region src/DataTable/DataTable.tsx
+function Ee(e) {
+	let t = Q(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e;
+	return /* @__PURE__ */ x(T, {
+		value: t,
+		children: /* @__PURE__ */ S("div", {
+			ref: t.gridRootRef,
+			className: "flexi-root",
 			children: [
-				y && A?.length > 0 && /* @__PURE__ */ f("td", {
-					className: "flexi-row-indent-cell",
-					style: {
-						position: "sticky",
-						left: 0,
-						zIndex: 10
-					}
-				}),
-				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),
+				t.groupBy && /* @__PURE__ */ x(O, {}),
+				/* @__PURE__ */ x("div", {
+					ref: t.tableWrapRef,
+					className: "flexi-table-wrap",
+					style: n,
+					children: /* @__PURE__ */ S("table", {
+						className: D("flexi-table", i && "flexi-table--bordered"),
 						style: r,
-						children: a ? a(n, e) : /* @__PURE__ */ f("span", {
-							className: "flexi-cell-text",
-							children: n
-						})
-					}, t.key);
-				}),
-				v && /* @__PURE__ */ f("td", {
-					className: "flexi-actions-cell",
-					style: {
-						position: "sticky",
-						right: 0
-					},
-					children: /* @__PURE__ */ f("div", {
-						className: "flexi-actions-inner",
-						children: v(e)
+						children: [
+							/* @__PURE__ */ x(de, {}),
+							/* @__PURE__ */ x(fe, {}),
+							/* @__PURE__ */ x(ue, {}),
+							/* @__PURE__ */ x(z, {})
+						]
 					})
-				})
+				}),
+				/* @__PURE__ */ x(V, {}),
+				t.paginationEnabled && /* @__PURE__ */ x(k, {})
 			]
-		}, `pinned-bottom-row-${t}`);
-	}
+		})
+	});
 }
 //#endregion
-export { g as DataTable };
+export { Ee as DataTable };