flexi-datagrid 1.2.9 → 1.2.12

package/dist/index.es.js

@@ -1,9 +1,9 @@
-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 { createContext as e, useCallback as t, useContext as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { ArrowDown as c, ArrowUp as l, ArrowUpDown as u, ChevronDown as d, ChevronLeft as f, ChevronRight as p, ChevronsLeft as m, ChevronsRight as h, Filter as g, Pin as ee, PinOff as _, RotateCcw as v, Settings as y, X as b } from "lucide-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);
+var w = e(null);
 function T({ value: e, children: t }) {
 	return /* @__PURE__ */ x(w.Provider, {
 		value: e,
@@ -11,7 +11,7 @@ function T({ value: e, children: t }) {
 	});
 }
 function E() {
-	let e = g(w);
+	let e = n(w);
 	if (!e) throw Error("DataTable components must be rendered inside <DataTable>.");
 	return e;
 }
@@ -21,7 +21,7 @@ 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);
+	let { groupedColumns: e, columnsByKey: t, addGroup: n, removeGroup: r } = E(), [i, a] = s(!1);
 	return /* @__PURE__ */ x("div", {
 		onDragOver: (e) => {
 			e.preventDefault(), a(!0);
@@ -47,7 +47,7 @@ function O() {
 					type: "button",
 					onClick: () => r(e),
 					className: "flexi-icon-btn flexi-chip-remove",
-					children: /* @__PURE__ */ x(p, { className: "flexi-icon-xs" })
+					children: /* @__PURE__ */ x(b, { className: "flexi-icon-xs" })
 				})]
 			}, e))]
 		})
@@ -55,8 +55,8 @@ function O() {
 }
 //#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();
+function te() {
+	let { currentPage: e, pageSize: t, totalPages: n, totalCount: r, pageSizeOptions: i, goToPage: a, changePageSize: o } = E();
 	return /* @__PURE__ */ S("div", {
 		className: "flexi-pagination",
 		children: [
@@ -64,9 +64,9 @@ function k() {
 				className: "flexi-pagination-size",
 				children: [/* @__PURE__ */ x("span", { children: "Rows per page" }), /* @__PURE__ */ x("select", {
 					value: t,
-					onChange: (e) => u(Number(e.target.value)),
+					onChange: (e) => o(Number(e.target.value)),
 					className: "flexi-pagination-select",
-					children: c.map((e) => /* @__PURE__ */ x("option", {
+					children: i.map((e) => /* @__PURE__ */ x("option", {
 						value: e,
 						children: e
 					}, e))
@@ -81,19 +81,19 @@ function k() {
 				children: [
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(1),
+						onClick: () => a(1),
 						disabled: e === 1,
 						className: "flexi-icon-btn",
 						title: "First page",
-						children: /* @__PURE__ */ x(o, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(m, { className: "flexi-icon-sm" })
 					}),
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(e - 1),
+						onClick: () => a(e - 1),
 						disabled: e === 1,
 						className: "flexi-icon-btn",
 						title: "Previous page",
-						children: /* @__PURE__ */ x(i, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(f, { className: "flexi-icon-sm" })
 					}),
 					/* @__PURE__ */ S("span", {
 						className: "flexi-pagination-page",
@@ -106,19 +106,19 @@ function k() {
 					}),
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(e + 1),
+						onClick: () => a(e + 1),
 						disabled: e === n,
 						className: "flexi-icon-btn",
 						title: "Next page",
-						children: /* @__PURE__ */ x(a, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(p, { className: "flexi-icon-sm" })
 					}),
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(n),
+						onClick: () => a(n),
 						disabled: e === n,
 						className: "flexi-icon-btn",
 						title: "Last page",
-						children: /* @__PURE__ */ x(s, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(h, { className: "flexi-icon-sm" })
 					})
 				]
 			})
@@ -127,26 +127,26 @@ function k() {
 }
 //#endregion
 //#region src/DataTable/constants.ts
-var ee = [
+var ne = [
 	10,
 	25,
 	50,
 	100
-], A = [], j = [], M = (e) => {
+], k = [], re = [], A = (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(...A(e.children)) : t.push(e);
 	}), t;
-}, N = (e) => {
+}, j = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-}, P = (e) => {
+}, ie = (e) => {
 	let t = {};
 	return e.forEach((e) => {
-		let n = N(e.pinned);
+		let n = j(e.pinned);
 		n && (t[e.key] = n);
 	}), t;
-}, F = (e, t, n) => {
+}, M = (e, t, n) => {
 	let r = (e) => {
 		let n = t[e];
 		return n === "left" ? 0 : n === "right" ? 2 : 1;
@@ -161,22 +161,22 @@ var ee = [
 		children: i(e.children)
 	} : e);
 	return i(e);
-}, te = (e, t, n) => {
+}, N = (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);
+		let e = N(r.children, t, n);
 		if (e) return e;
 	}
 	return null;
-}, I = (e, t) => {
+}, P = (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) => {
+}, ae = (e, t, n) => {
 	let r = (e) => {
 		let t = 0;
 		return e.forEach((e) => {
@@ -203,13 +203,13 @@ var ee = [
 		...e,
 		rowSpan: Math.min(e.rowSpan, c.length - t)
 	})));
-}, re = ({ visibleLeafColumns: e, pinnedColumns: t, columnWidths: n, hasGroups: r, hasActions: i }) => {
+}, oe = ({ 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));
+		}, o += P(e, n));
 	});
 	let s = i ? 100 : 0;
 	for (let r = e.length - 1; r >= 0; r--) {
@@ -217,10 +217,10 @@ var ee = [
 		t[i.key] === "right" && (a[i.key] = {
 			side: "right",
 			offset: s
-		}, s += I(i, n));
+		}, s += P(i, n));
 	}
 	return a;
-}, L = (e, t, n = !1, r) => {
+}, F = (e, t, n = !1, r) => {
 	let i = e[t];
 	if (!i) return r || {};
 	let a = i.side === "right";
@@ -233,7 +233,7 @@ var ee = [
 		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", {
+}, I = () => /* @__PURE__ */ x("td", {
 	className: "flexi-row-indent-cell",
 	style: {
 		position: "sticky",
@@ -241,7 +241,7 @@ var ee = [
 		zIndex: 10
 	}
 });
-function R({ children: e }) {
+function L({ children: e }) {
 	return /* @__PURE__ */ x("td", {
 		className: "flexi-actions-cell",
 		style: {
@@ -254,8 +254,8 @@ function R({ children: e }) {
 		})
 	});
 }
-function ae({ node: e }) {
-	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: i, totalColumnsCount: o } = E(), s = n[e.path] !== !1;
+function se({ node: e }) {
+	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: r, totalColumnsCount: i } = E(), a = n[e.path] !== !1;
 	return /* @__PURE__ */ S("tr", {
 		className: "flexi-group-row",
 		style: { height: t },
@@ -270,10 +270,10 @@ function ae({ node: e }) {
 			},
 			children: /* @__PURE__ */ S("button", {
 				type: "button",
-				onClick: () => i(e.path),
+				onClick: () => r(e.path),
 				className: "flexi-group-toggle",
 				children: [
-					x(s ? r : a, { className: "flexi-icon-md flexi-icon-muted" }),
+					x(a ? d : p, { className: "flexi-icon-md flexi-icon-muted" }),
 					/* @__PURE__ */ x("span", {
 						className: "flexi-group-value",
 						children: e.groupValue
@@ -285,19 +285,19 @@ function ae({ node: e }) {
 				]
 			})
 		}), /* @__PURE__ */ x("td", {
-			colSpan: Math.max(1, o - 1),
+			colSpan: Math.max(1, i - 1),
 			className: "flexi-group-filler"
 		})]
 	});
 }
-function oe({ record: e, rowIndex: t, className: n }) {
+function R({ 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, {}),
+			i && /* @__PURE__ */ x(I, {}),
 			c.map((t) => {
 				let n = d?.includes(t.key) ? p?.[t.key] : void 0;
 				if (n === "skip") return null;
@@ -305,18 +305,18 @@ function oe({ record: e, rowIndex: t, className: n }) {
 				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),
+					style: F(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) })
+			a && o && /* @__PURE__ */ x(L, { children: o(e) })
 		]
 	});
 }
-function se({ record: e, index: t, className: n }) {
+function ce({ 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`,
@@ -326,29 +326,29 @@ function se({ record: e, index: t, className: n }) {
 		className: D("flexi-row", "flexi-row--pinned-bottom", n),
 		style: u,
 		children: [
-			r && /* @__PURE__ */ x(ie, {}),
+			r && /* @__PURE__ */ x(I, {}),
 			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),
+					style: F(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) })
+			i && a && /* @__PURE__ */ x(L, { children: a(e) })
 		]
 	});
 }
 //#endregion
 //#region src/DataTable/components/PinnedBottomBody.tsx
-function z() {
+function le() {
 	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, {
+		children: e.map((e, n) => /* @__PURE__ */ x(ce, {
 			record: e,
 			index: n,
 			className: typeof t == "function" ? t(e, n) : t
@@ -357,7 +357,7 @@ function z() {
 }
 //#endregion
 //#region src/DataTable/components/SettingsMenu.tsx
-function B() {
+function ue() {
 	let { settingsMenu: e } = E();
 	return /* @__PURE__ */ x("button", {
 		type: "button",
@@ -367,12 +367,12 @@ function B() {
 		},
 		className: D("flexi-icon-btn", e.isOpen && "flexi-settings-btn--active"),
 		title: "Grid display settings",
-		children: /* @__PURE__ */ x(f, { className: "flexi-icon-sm" })
+		children: /* @__PURE__ */ x(y, { 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", {
+function z() {
+	let { gridRootRef: e, settingsMenu: t, displayPinnedIcon: n, toggleDisplayPinnedIcon: r, showGroupBy: i, toggleShowGroupBy: a, initialLeafColumns: o, hiddenColumns: s, toggleColumnVisibility: c, resetControlPanelDefaults: l } = E(), u = e.current;
+	return !t.isOpen || !t.position || !u ? null : C(/* @__PURE__ */ S("div", {
 		ref: t.menuRef,
 		className: "flexi-settings-menu",
 		style: {
@@ -383,21 +383,36 @@ function V() {
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "flexi-settings-section",
-				children: [/* @__PURE__ */ x("span", {
-					className: "flexi-settings-heading",
-					children: "Action Icons"
-				}), /* @__PURE__ */ S("label", {
-					className: "flexi-filter-option",
-					children: [/* @__PURE__ */ x("input", {
-						type: "checkbox",
-						className: "flexi-checkbox",
-						checked: n,
-						onChange: r
-					}), /* @__PURE__ */ x("span", {
-						className: "flexi-filter-option-text",
-						children: "Show pin icon on hover"
-					})]
-				})]
+				children: [
+					/* @__PURE__ */ x("span", {
+						className: "flexi-settings-heading",
+						children: "Action Icons"
+					}),
+					/* @__PURE__ */ S("label", {
+						className: "flexi-filter-option",
+						children: [/* @__PURE__ */ x("input", {
+							type: "checkbox",
+							className: "flexi-checkbox",
+							checked: n,
+							onChange: r
+						}), /* @__PURE__ */ x("span", {
+							className: "flexi-filter-option-text",
+							children: "Show pin icon on hover"
+						})]
+					}),
+					/* @__PURE__ */ S("label", {
+						className: "flexi-filter-option",
+						children: [/* @__PURE__ */ x("input", {
+							type: "checkbox",
+							className: "flexi-checkbox",
+							checked: i,
+							onChange: a
+						}), /* @__PURE__ */ x("span", {
+							className: "flexi-filter-option-text",
+							children: "Group By"
+						})]
+					})
+				]
 			}),
 			/* @__PURE__ */ x("div", { className: "flexi-settings-divider" }),
 			/* @__PURE__ */ S("div", {
@@ -405,13 +420,13 @@ function V() {
 				children: [/* @__PURE__ */ x("span", {
 					className: "flexi-settings-heading",
 					children: "Columns"
-				}), i.map((e) => /* @__PURE__ */ S("label", {
+				}), o.map((e) => /* @__PURE__ */ S("label", {
 					className: "flexi-filter-option",
 					children: [/* @__PURE__ */ x("input", {
 						type: "checkbox",
 						className: "flexi-checkbox",
-						checked: !a.includes(e.key),
-						onChange: () => o(e.key)
+						checked: !s.includes(e.key),
+						onChange: () => c(e.key)
 					}), /* @__PURE__ */ x("span", {
 						className: "flexi-filter-option-text",
 						children: e.header
@@ -421,46 +436,46 @@ function V() {
 			/* @__PURE__ */ x("div", { className: "flexi-settings-divider" }),
 			/* @__PURE__ */ S("button", {
 				type: "button",
-				onClick: s,
+				onClick: l,
 				className: "flexi-settings-reset",
 				title: "Reset pin icon visibility and hidden columns to their defaults",
-				children: [/* @__PURE__ */ x(d, { className: "flexi-icon-sm" }), /* @__PURE__ */ x("span", { children: "Reset to defaults" })]
+				children: [/* @__PURE__ */ x(v, { className: "flexi-icon-sm" }), /* @__PURE__ */ x("span", { children: "Reset to defaults" })]
 			})
 		]
-	}), c);
+	}), u);
 }
 //#endregion
 //#region src/DataTable/utils/records.ts
-var H = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], U = (e, t) => {
+var B = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], V = (e, t) => {
 	let n = typeof t == "function" ? t(e) : e[t];
 	return n == null ? void 0 : String(n);
-}, W = (e, t, n) => {
+}, H = (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));
+}, U = (e, t, n) => {
+	let r = e.map((e) => B(e, t, n));
 	return Array.from(new Set(r)).filter((e) => e != null);
-}, ce = (e, t, n) => {
+}, de = (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, {
+	return r.length === 0 ? e : e.filter((e) => r.every(([t, r]) => r.includes(B(e, t, n.get(t)))));
+}, W = (e) => e == null || typeof e == "number" && Number.isNaN(e), G = (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);
+}), fe = (e, t, n, r) => [...e].sort((e, i) => {
+	let a = B(e, t, r), o = B(i, t, r);
 	if (a === o) return 0;
-	let s = K(a), c = K(o);
+	let s = W(a), c = W(o);
 	if (s && c) return 0;
 	if (s) return 1;
 	if (c) return -1;
-	let l = q(a, o);
+	let l = G(a, o);
 	return n === "asc" ? l : -l;
 });
 //#endregion
 //#region src/DataTable/components/TableBody.tsx
-function ue() {
+function pe() {
 	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",
@@ -486,11 +501,11 @@ function ue() {
 			}),
 			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, {
+				return e.kind === "group" ? /* @__PURE__ */ x(se, { node: e }, `group-header-${e.path}-${r}`) : /* @__PURE__ */ x(R, {
 					record: e.record,
 					rowIndex: r,
-					className: W(e.record, r, c)
-				}, U(e.record, s) ?? `row-${r}`);
+					className: H(e.record, r, c)
+				}, V(e.record, s) ?? `row-${r}`);
 			}),
 			a > 0 && /* @__PURE__ */ x("tr", {
 				"aria-hidden": "true",
@@ -509,20 +524,20 @@ function ue() {
 }
 //#endregion
 //#region src/DataTable/components/TableColGroup.tsx
-function de() {
+function me() {
 	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)
+			width: P(e, r)
 		} }, e.key)),
 		t && /* @__PURE__ */ x("col", { style: { width: "100px" } })
 	] });
 }
 //#endregion
 //#region src/DataTable/components/FilterDropdown.tsx
-function J({ columnKey: e }) {
+function he({ 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;
@@ -578,57 +593,57 @@ function J({ columnKey: e }) {
 }
 //#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;
+function ge({ col: e, rowSpan: t, colSpan: n }) {
+	let { groupBy: r, pinnedColumns: i, pinOffsets: a, displayPinnedIcon: o, togglePin: s, sortState: d, handleSort: f, filters: p, handleDragStart: m, handleDragEnd: h, handleDrop: v, startResize: y } = E(), b = i[e.key], C = !!b, w = (p.selectedFilters[e.key]?.length || 0) > 0, T = !e.children || e.children.length === 0, O = d.key === e.key, te = r && T, ne = T && e.resizable !== !1, k = !!e.sortable && T;
 	return /* @__PURE__ */ S("th", {
-		rowSpan: i,
-		colSpan: a,
+		rowSpan: t,
+		colSpan: n,
 		draggable: !0,
-		onDragStart: (e) => _(e, r.key, O),
-		onDragEnd: v,
+		onDragStart: (t) => m(t, e.key, T),
+		onDragEnd: h,
 		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),
+		onDrop: (t) => v(t, e.key),
+		className: D("flexi-th", "flexi-th--draggable", te && "flexi-th--group-draggable", C && "flexi-th--pinned", e.className, e.headerClassName),
+		style: F(a, e.key, !0, e.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),
+					className: D("flexi-th-label", k && "flexi-th-label--sortable"),
+					onClick: () => k && f(e.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" })
+						children: e.header
+					}), k && /* @__PURE__ */ x("span", {
+						className: D("flexi-sort-icon", O && "flexi-sort-icon--active"),
+						children: O && d.direction === "asc" ? /* @__PURE__ */ x(l, { className: "flexi-icon-sm" }) : O && d.direction === "desc" ? /* @__PURE__ */ x(c, { className: "flexi-icon-sm" }) : /* @__PURE__ */ x(u, { className: "flexi-icon-sm" })
 					})]
 				}),
 				/* @__PURE__ */ S("div", {
 					className: "flexi-th-actions",
-					children: [O && r.filterable && /* @__PURE__ */ x("button", {
+					children: [T && e.filterable && /* @__PURE__ */ x("button", {
 						type: "button",
-						ref: (e) => g.registerFilterButton(r.key, e),
-						onClick: (e) => {
-							e.stopPropagation(), g.toggleFilterDropdown(r.key);
+						ref: (t) => p.registerFilterButton(e.key, t),
+						onClick: (t) => {
+							t.stopPropagation(), p.toggleFilterDropdown(e.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", {
+						className: D("flexi-icon-btn", "flexi-filter-btn", w && "flexi-filter-btn--active"),
+						children: /* @__PURE__ */ x(g, { className: "flexi-icon-sm" })
+					}), T && o && /* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: (e) => {
-							e.stopPropagation(), p(r.key);
+						onClick: (t) => {
+							t.stopPropagation(), s(e.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" })
+						className: D("flexi-icon-btn", "flexi-pin-btn", C && "flexi-pin-btn--pinned"),
+						title: b === "left" ? "Pinned left (click to pin right)" : b === "right" ? "Pinned right (click to unpin)" : "Pin column left",
+						children: x(C ? _ : ee, { className: "flexi-icon-sm" })
 					})]
 				}),
-				O && g.activeFilterKey === r.key && /* @__PURE__ */ x(J, { columnKey: r.key })
+				T && p.activeFilterKey === e.key && /* @__PURE__ */ x(he, { columnKey: e.key })
 			]
-		}), A && /* @__PURE__ */ x("div", {
+		}), ne && /* @__PURE__ */ x("div", {
 			className: "flexi-th-resizer",
-			onMouseDown: (e) => b(e, r),
+			onMouseDown: (t) => y(t, e),
 			onClick: (e) => e.stopPropagation(),
 			onDragStart: (e) => e.preventDefault()
 		})]
@@ -636,54 +651,40 @@ function Y({ col: r, rowSpan: i, colSpan: a }) {
 }
 //#endregion
 //#region src/DataTable/components/TableHeader.tsx
-function fe() {
-	let { headerRows: e, hasGroups: t, controlPanel: n } = E(), r = e.length === 0 && n ? [[]] : e;
+function K() {
+	let { headerRows: e, hasGroups: t } = E();
 	return /* @__PURE__ */ x("thead", {
 		className: "flexi-thead",
-		children: r.map((e, i) => /* @__PURE__ */ S("tr", {
+		children: e.map((n, r) => /* @__PURE__ */ S("tr", {
 			className: "flexi-header-row",
-			children: [
-				i === 0 && t && /* @__PURE__ */ x("th", {
-					rowSpan: r.length,
-					className: "flexi-group-spacer-th",
-					style: {
-						position: "sticky",
-						top: 0,
-						left: 0,
-						zIndex: 35,
-						backgroundColor: "rgb(248, 250, 252)"
-					}
-				}),
-				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: {
-						right: 0,
-						zIndex: 55,
-						display: "flex",
-						justifyContent: "center",
-						alignItems: "center"
-					},
-					children: /* @__PURE__ */ x(B, {})
-				})
-			]
-		}, `header-row-${i}`))
+			children: [r === 0 && t && /* @__PURE__ */ x("th", {
+				rowSpan: e.length,
+				className: "flexi-group-spacer-th",
+				style: {
+					position: "sticky",
+					top: 0,
+					left: 0,
+					zIndex: 35,
+					backgroundColor: "rgb(248, 250, 252)"
+				}
+			}), n.map(({ col: e, rowSpan: t, colSpan: n }) => /* @__PURE__ */ x(ge, {
+				col: e,
+				rowSpan: t,
+				colSpan: n
+			}, e.key))]
+		}, `header-row-${r}`))
 	});
 }
 //#endregion
 //#region src/DataTable/utils/grouping.ts
-var pe = (e, t, n, r = 0, i = "") => {
+var _e = (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);
+		let t = String(B(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,
@@ -696,18 +697,18 @@ var pe = (e, t, n, r = 0, i = "") => {
 			groupValue: e,
 			path: s,
 			depth: r,
-			children: pe(o, t, n, r + 1, s),
+			children: _e(o, t, n, r + 1, s),
 			totalItemsCount: o.length
 		};
 	});
-}, me = (e, t) => {
+}, ve = (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) => {
+}, ye = (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;
@@ -722,7 +723,7 @@ var pe = (e, t, n, r = 0, i = "") => {
 			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);
+				e && B(i.record, c, l) === B(s.record, c, l) ? a[r][o] = !1 : (e = !1, a[r][o] = !0);
 			}
 		}
 		o = r;
@@ -750,16 +751,16 @@ var pe = (e, t, n, r = 0, 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, _(() => {
+function q({ active: e, resetKey: t, rootRef: n, getAnchor: i, compute: a }) {
+	let [c, l] = s(null), u = o(i), d = o(a);
+	return u.current = i, d.current = a, r(() => {
 		if (!e) {
-			o(null);
+			l(null);
 			return;
 		}
 		let t = () => {
-			let e = s.current(), t = n.current;
-			!e || !t || o(c.current(e.getBoundingClientRect(), t.getBoundingClientRect()));
+			let e = u.current(), t = n.current;
+			!e || !t || l(d.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);
@@ -768,237 +769,237 @@ function X({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
 		e,
 		t,
 		n
-	]), a;
+	]), c;
 }
 //#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, _(() => {
+function J(e, t, n) {
+	let i = o(t), a = o(n);
+	i.current = t, a.current = n, r(() => {
 		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());
+			let t = e.target, [n, ...r] = i.current();
+			n && (n.contains(t) || r.some((e) => e?.contains(t)) || a.current());
 		};
 		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);
+function be({ data: e, columnsByKey: n, gridRootRef: r }) {
+	let [i, c] = s(null), [l, u] = s({}), [d, f] = s(""), p = o(/* @__PURE__ */ new Map()), m = o(null), h = t((e, t) => {
+		t ? p.current.set(e, t) : p.current.delete(e);
+	}, []), g = t(() => {
+		c(null), f("");
+	}, []), ee = t((e) => {
+		f(""), c((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,
+	J(i !== null, () => [m.current, i ? p.current.get(i) : null], g);
+	let _ = q({
+		active: i !== null,
+		resetKey: i,
+		rootRef: r,
+		getAnchor: () => i ? p.current.get(i) : null,
 		compute: (e, t) => ({
 			top: e.bottom - t.top + 4,
 			left: e.left - t.left
 		})
-	}), g = h((e, t) => {
-		o((n) => {
+	}), v = t((e, t) => {
+		u((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) => {
+	}, []), y = t((e) => {
+		u((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), x = v(() => r ? G(e, r, t.get(r)) : [], [
+	}, []), b = a(() => i ? U(e, i, n.get(i)) : [], [
 		e,
-		r,
-		t
+		i,
+		n
 	]);
 	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: _
+		activeFilterKey: i,
+		selectedFilters: l,
+		filterSearchQuery: d,
+		setFilterSearchQuery: f,
+		filterPosition: _,
+		dropdownRef: m,
+		filteredUniqueValues: a(() => {
+			if (!d.trim()) return b;
+			let e = d.toLowerCase();
+			return b.filter((t) => String(t).toLowerCase().includes(e));
+		}, [b, d]),
+		registerFilterButton: h,
+		toggleFilterDropdown: ee,
+		handleFilterChange: v,
+		clearFilter: y
 	};
 }
 //#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), [
+function xe({ columns: e, pinnedColumns: n, isResizingRef: r, onColumnReorder: i }) {
+	let [c, l] = s({}), u = o(null), d = a(() => M(e, n, c), [
 		e,
-		t,
-		i
+		n,
+		c
 	]);
 	return {
-		reorderedColumns: s,
-		handleDragStart: h((e, t, r) => {
-			if (n.current) {
+		reorderedColumns: d,
+		handleDragStart: t((e, t, n) => {
+			if (r.current) {
 				e.preventDefault();
 				return;
 			}
-			o.current = t, r && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
-		}, [n]),
-		handleDragEnd: h(() => {
-			o.current = null;
+			u.current = t, n && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
+		}, [r]),
+		handleDragEnd: t(() => {
+			u.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) => {
+		handleDrop: t((t, r) => {
+			t.preventDefault(), t.stopPropagation();
+			let a = u.current;
+			if (u.current = null, !a || a === r) return;
+			let o = N(d, a, r);
+			if (!o) return;
+			let s = o.map((e) => e.key), f = s.indexOf(a), p = s.indexOf(r);
+			s.splice(p, 0, s.splice(f, 1)[0]);
+			let m = { ...c };
+			s.forEach((e, t) => {
 				m[e] = t;
-			}), a(m), r && r(M(F(e, t, m)).map((e) => e.key));
+			}), l(m), i && i(A(M(e, n, m)).map((e) => e.key));
 		}, [
-			s,
-			i,
+			d,
+			c,
 			e,
-			t,
-			r
+			n,
+			i
 		])
 	};
 }
 //#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 : {
+function Se(e) {
+	let [n, i] = s({}), a = o(!1), c = o(null), l = o(e);
+	return l.current = e, r(() => () => c.current?.(), []), {
+		columnWidths: n,
+		isResizingRef: a,
+		startResize: t((e, t) => {
+			e.preventDefault(), e.stopPropagation(), c.current?.(), a.current = !0;
+			let r = e.clientX, o = P(t, n), s = t.minWidth ?? 60, u = t.maxWidth, d = n[t.key], f = (e) => {
+				let n = Math.max(s, o + (e.clientX - r));
+				u && (n = Math.min(u, n)), d = n, i((e) => e[t.key] === n ? e : {
 					...e,
-					[o.key]: t
+					[t.key]: n
 				});
 			}, p = () => {
-				window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", m), i.current = null;
+				window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", m), c.current = null;
 			}, m = () => {
 				p(), requestAnimationFrame(() => {
-					r.current = !1;
-				}), d !== void 0 && a.current?.(o.key, d);
+					a.current = !1;
+				}), d !== void 0 && l.current?.(t.key, d);
 			};
-			window.addEventListener("mousemove", f), window.addEventListener("mouseup", m), i.current = () => {
-				p(), r.current = !1;
+			window.addEventListener("mousemove", f), window.addEventListener("mouseup", m), c.current = () => {
+				p(), a.current = !1;
 			};
-		}, [t])
+		}, [n])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnVisibility.ts
-function ye({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: t, onColumnVisibilityChange: n }) {
-	let [r, i] = b(e), [a, o] = b(t);
+function Ce({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: n, onColumnVisibilityChange: r }) {
+	let [i, a] = s(e), [o, c] = s(n);
 	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);
+		hiddenColumns: i,
+		displayPinnedIcon: o,
+		toggleColumnVisibility: t((e) => {
+			let t = i.includes(e) ? i.filter((t) => t !== e) : [...i, e];
+			a(t), r?.(t);
+		}, [i, r]),
+		toggleDisplayPinnedIcon: t(() => c((e) => !e), []),
+		resetControlPanelDefaults: t(() => {
+			c(n), a(e), r?.(e);
 		}, [
-			t,
+			n,
 			e,
-			n
+			r
 		])
 	};
 }
 //#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);
+function we({ items: e, enabled: n, defaultPageSize: i, onPageChange: o, resetOn: c }) {
+	let [l, u] = s(1), [d, f] = s(Math.max(1, Math.floor(i) || 1)), p = e.length, m = n ? Math.max(1, Math.ceil(p / d)) : 1;
+	return r(() => {
+		u(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);
+		...c,
+		d,
+		n
+	]), r(() => {
+		l > m && u(m);
+	}, [l, m]), {
+		currentPage: l,
+		pageSize: d,
+		totalPages: m,
+		totalCount: p,
+		pagedItems: a(() => {
+			if (!n) return e;
+			let t = (l - 1) * d;
+			return e.slice(t, t + d);
 		}, [
 			e,
-			t,
-			a,
-			s
+			n,
+			l,
+			d
 		]),
-		goToPage: h((e) => {
-			let t = Math.min(Math.max(1, e), u);
-			o(t), r?.(t, s);
+		goToPage: t((e) => {
+			let t = Math.min(Math.max(1, e), m);
+			u(t), o?.(t, d);
 		}, [
-			u,
-			s,
-			r
+			m,
+			d,
+			o
 		]),
-		changePageSize: h((e) => {
-			c(e), o(1), r?.(1, e);
-		}, [r])
+		changePageSize: t((e) => {
+			f(e), u(1), o?.(1, e);
+		}, [o])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/usePinnedColumns.ts
-function xe(e, t) {
-	let [n, r] = b(() => P(e));
+function Te(e, n) {
+	let [r, i] = s(() => ie(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])
+		pinnedColumns: r,
+		togglePin: t((e) => {
+			let t = r[e], a = t ? t === "left" ? "right" : void 0 : "left", o = { ...r };
+			a ? o[e] = a : delete o[e], i(o), n?.(e, !!a, a);
+		}, [r, n])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useRowGrouping.ts
-function Se(e, t) {
-	let [n, r] = b(e), [i, a] = b({});
+function Ee(e, n) {
+	let [r, i] = s(e), [a, o] = s({});
 	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) => ({
+		groupedColumns: r,
+		expandedGroups: a,
+		addGroup: t((e) => {
+			if (!e || r.includes(e)) return;
+			let t = [...r, e];
+			i(t), n?.(t);
+		}, [r, n]),
+		removeGroup: t((e) => {
+			let t = r.filter((t) => t !== e);
+			i(t), o({}), n?.(t);
+		}, [r, n]),
+		toggleGroupExpansion: t((e) => {
+			o((t) => ({
 				...t,
 				[e]: t[e] === !1
 			}));
@@ -1007,35 +1008,35 @@ function Se(e, t) {
 }
 //#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,
+function De(e) {
+	let [n, r] = s(!1), i = o(null), a = o(null), c = t(() => r((e) => !e), []);
+	return J(n, () => [i.current, a.current], t(() => r(!1), [])), {
+		isOpen: n,
+		position: q({
+			active: n,
 			rootRef: e,
-			getAnchor: () => i.current,
+			getAnchor: () => a.current,
 			compute: (e, t) => ({
 				top: e.bottom - t.top + 4,
 				right: t.right - e.right
 			})
 		}),
-		menuRef: r,
-		buttonRef: i,
-		toggle: a
+		menuRef: i,
+		buttonRef: a,
+		toggle: c
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useSorting.ts
-function we() {
-	let [e, t] = b({
+function Oe() {
+	let [e, n] = s({
 		key: null,
 		direction: null
 	});
 	return {
 		sortState: e,
-		handleSort: h((e) => {
-			t((t) => {
+		handleSort: t((e) => {
+			n((t) => {
 				let n = "asc";
 				return t.key === e && (t.direction === "asc" ? n = "desc" : t.direction === "desc" && (n = null)), {
 					key: n ? e : null,
@@ -1047,174 +1048,211 @@ function we() {
 }
 //#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 _(() => {
+function ke({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: i }) {
+	let [o, c] = s(0), [l, u] = s(0);
+	return r(() => {
 		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 n = () => c(t.scrollTop);
+		u(t.clientHeight), c(t.scrollTop), t.addEventListener("scroll", n, { passive: !0 });
 		let r;
-		return typeof ResizeObserver < "u" && (r = new ResizeObserver(() => s(t.clientHeight)), r.observe(t)), () => {
+		return typeof ResizeObserver < "u" && (r = new ResizeObserver(() => u(t.clientHeight)), r.observe(t)), () => {
 			t.removeEventListener("scroll", n), r?.disconnect();
 		};
-	}, [e]), v(() => {
-		if (o === 0) return {
+	}, [e]), a(() => {
+		if (l === 0 || n === "auto") 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);
+		let e = n > 0 ? n : 1, r = Math.max(0, t - 1), a = Math.min(r, Math.floor(o / e)), s = Math.ceil(l / e) + 1, c = Math.max(0, a - i), u = Math.min(t, a + s + i);
 		return {
-			startIndex: l,
+			startIndex: c,
 			endIndex: u,
-			topSpacerHeight: l * e,
+			topSpacerHeight: c * e,
 			bottomSpacerHeight: (t - u) * e
 		};
 	}, [
-		i,
 		o,
+		l,
 		t,
 		n,
-		r
+		i
 	]);
 }
 //#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(() => {
+function Y({ columns: e, data: n, rowKey: i, actions: c, isLoading: l, groupBy: u = !1, defaultGroupBy: d = k, onPinChange: f, onGroupChange: p, pinnedBottomRowData: m = re, pinnedRowClassName: h, rowHeight: g = 40, overscan: ee = 8, onColumnResize: _, onColumnReorder: v, rowClassRules: y, onRowClick: b, rowSpanColumns: x, controlPanel: S = !1, defaultDisplayPinnedIcon: C = !0, defaultHiddenColumns: w = k, onColumnVisibilityChange: T, pagination: E = !1, defaultPageSize: D = 10, pageSizeOptions: O = ne, onPageChange: te }) {
+	let j = o(null), ie = o(null), M = a(() => A(e), [e]), N = a(() => {
 		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({
+		return M.forEach((t) => e.set(t.key, t)), e;
+	}, [M]), { pinnedColumns: P, togglePin: F } = Te(M, f), { columnWidths: I, isResizingRef: L, startResize: se } = Se(_), { reorderedColumns: R, handleDragStart: ce, handleDragEnd: le, handleDrop: ue } = xe({
 		columns: e,
-		pinnedColumns: F,
+		pinnedColumns: P,
 		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)), [
+		onColumnReorder: v
+	}), z = Ce({
+		defaultHiddenColumns: w,
+		defaultDisplayPinnedIcon: C,
+		onColumnVisibilityChange: T
+	}), { hiddenColumns: B } = z, V = Ee(d, p), { groupedColumns: H, expandedGroups: U } = V, [W, G] = s(u);
+	r(() => G(u), [u]);
+	let pe = t(() => G((e) => !e), []), { resetControlPanelDefaults: me } = z, he = t(() => {
+		me(), G(u);
+	}, [me, u]), ge = W, K = ge ? H : k, q = K.length > 0, J = !!c, Y = a(() => A(R).filter((e) => !K.includes(e.key) && !B.includes(e.key)), [
 		R,
-		W,
+		K,
 		B
-	]), ue = v(() => ne(R, W, B), [
+	]), Ae = a(() => ae(R, K, B), [
 		R,
-		W,
+		K,
 		B
-	]), de = v(() => re({
-		visibleLeafColumns: q,
-		pinnedColumns: F,
+	]), je = a(() => oe({
+		visibleLeafColumns: Y,
+		pinnedColumns: P,
 		columnWidths: I,
-		hasGroups: G,
-		hasActions: K
+		hasGroups: q,
+		hasActions: J
 	}), [
-		q,
-		F,
+		Y,
+		P,
 		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));
+		q,
+		J
+	]), X = be({
+		data: n,
+		columnsByKey: N,
+		gridRootRef: j
+	}), { sortState: Z, handleSort: Me } = Oe(), Q = we({
+		items: a(() => {
+			let e = de(n, X.selectedFilters, N);
+			return !Z.key || !Z.direction ? e : fe(e, Z.key, Z.direction, N.get(Z.key));
 		}, [
-			t,
-			J.selectedFilters,
-			Y,
-			P
+			n,
+			X.selectedFilters,
+			Z,
+			N
 		]),
-		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,
+		enabled: E,
+		defaultPageSize: D,
+		onPageChange: te,
+		resetOn: [X.selectedFilters, Z]
+	}), Ne = a(() => _e(Q.pagedItems, K, N), [
+		Q.pagedItems,
+		K,
+		N
+	]), Pe = a(() => ve(Ne, U), [Ne, U]), Fe = Pe.length, { startIndex: $, endIndex: Ie, topSpacerHeight: Le, bottomSpacerHeight: Re } = ke({
+		containerRef: ie,
+		totalRowCount: Fe,
+		rowHeight: g,
+		overscan: ee
+	}), ze = a(() => Pe.slice($, Ie), [
+		Pe,
 		$,
-		De
-	]), je = v(() => he(Ae, _, P, $), [
-		Ae,
-		_,
-		P,
+		Ie
+	]), Be = a(() => ye(ze, x, N, $), [
+		ze,
+		x,
+		N,
 		$
-	]), Me = Ce(O), Ne = q.length + +!!K + +!!G;
+	]), Ve = De(j), He = Y.length + +!!J + +!!q;
 	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,
+		gridRootRef: j,
+		tableWrapRef: ie,
+		rowKey: i,
+		actions: c,
+		isLoading: !!l,
+		groupBy: ge,
+		showGroupBy: W,
+		toggleShowGroupBy: pe,
+		controlPanel: S,
+		rowHeight: g,
+		rowSpanColumns: x,
+		rowClassRules: y,
+		onRowClick: b,
+		pinnedBottomRowData: m,
+		pinnedRowClassName: h,
+		pageSizeOptions: O,
+		paginationEnabled: E,
+		initialLeafColumns: M,
+		columnsByKey: N,
+		visibleLeafColumns: Y,
+		headerRows: Ae,
+		pinnedColumns: P,
+		pinOffsets: je,
 		columnWidths: I,
-		togglePin: te,
-		startResize: ie,
-		handleDragStart: ae,
-		handleDragEnd: oe,
-		handleDrop: se,
+		togglePin: F,
+		startResize: se,
+		handleDragStart: ce,
+		handleDragEnd: le,
+		handleDrop: ue,
 		hiddenColumns: B,
 		displayPinnedIcon: z.displayPinnedIcon,
 		toggleColumnVisibility: z.toggleColumnVisibility,
 		toggleDisplayPinnedIcon: z.toggleDisplayPinnedIcon,
-		resetControlPanelDefaults: z.resetControlPanelDefaults,
-		settingsMenu: Me,
+		resetControlPanelDefaults: he,
+		settingsMenu: Ve,
 		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,
+		hasGroups: q,
+		hasActions: J,
+		sortState: Z,
+		handleSort: Me,
+		filters: X,
+		currentPage: Q.currentPage,
+		pageSize: Q.pageSize,
+		totalPages: Q.totalPages,
+		totalCount: Q.totalCount,
+		goToPage: Q.goToPage,
+		changePageSize: Q.changePageSize,
+		visibleRows: ze,
 		startIndex: $,
-		totalRowCount: Ee,
-		topSpacerHeight: Oe,
-		bottomSpacerHeight: ke,
-		rowSpanInfo: je,
-		totalColumnsCount: Ne
+		totalRowCount: Fe,
+		topSpacerHeight: Le,
+		bottomSpacerHeight: Re,
+		rowSpanInfo: Be,
+		totalColumnsCount: He
 	};
 }
 //#endregion
 //#region src/DataTable/DataTable.tsx
-function Ee(e) {
-	let t = Q(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e;
+var Ae = [
+	"height",
+	"maxHeight",
+	"minHeight"
+];
+function je(e, t) {
+	let [n, r] = s(0);
+	return i(() => {
+		let n = t ? e.current?.firstElementChild : null;
+		if (!(n instanceof HTMLElement)) {
+			r(0);
+			return;
+		}
+		let i = () => {
+			let e = parseFloat(getComputedStyle(n.nextElementSibling ?? n).marginTop) || 0;
+			r(n.offsetHeight + e);
+		};
+		i();
+		let a = new ResizeObserver(i);
+		return a.observe(n), () => a.disconnect();
+	}, [e, t]), n;
+}
+function X(e, t) {
+	if (!e || t <= 0) return e;
+	let n = { ...e };
+	for (let r of Ae) {
+		let i = e[r];
+		i == null || i === "" || i === "auto" || i === "none" || (n[r] = `calc(${typeof i == "number" ? `${i}px` : String(i)} - ${t}px)`);
+	}
+	return n;
+}
+function Z(e) {
+	let t = Y(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e, a = X(n, je(t.gridRootRef, !!t.groupBy));
 	return /* @__PURE__ */ x(T, {
 		value: t,
 		children: /* @__PURE__ */ S("div", {
@@ -1222,26 +1260,32 @@ function Ee(e) {
 			className: "flexi-root",
 			children: [
 				t.groupBy && /* @__PURE__ */ x(O, {}),
-				/* @__PURE__ */ x("div", {
+				/* @__PURE__ */ S("div", {
 					ref: t.tableWrapRef,
 					className: "flexi-table-wrap",
-					style: n,
-					children: /* @__PURE__ */ S("table", {
+					style: a,
+					children: [t.controlPanel && /* @__PURE__ */ x("div", {
+						className: "flexi-settings-corner",
+						children: /* @__PURE__ */ x("div", {
+							className: "flexi-settings-corner-inner",
+							children: /* @__PURE__ */ x(ue, {})
+						})
+					}), /* @__PURE__ */ S("table", {
 						className: D("flexi-table", i && "flexi-table--bordered"),
 						style: r,
 						children: [
-							/* @__PURE__ */ x(de, {}),
-							/* @__PURE__ */ x(fe, {}),
-							/* @__PURE__ */ x(ue, {}),
-							/* @__PURE__ */ x(z, {})
+							/* @__PURE__ */ x(me, {}),
+							/* @__PURE__ */ x(K, {}),
+							/* @__PURE__ */ x(pe, {}),
+							/* @__PURE__ */ x(le, {})
 						]
-					})
+					})]
 				}),
-				/* @__PURE__ */ x(V, {}),
-				t.paginationEnabled && /* @__PURE__ */ x(k, {})
+				/* @__PURE__ */ x(z, {}),
+				t.paginationEnabled && /* @__PURE__ */ x(te, {})
 			]
 		})
 	});
 }
 //#endregion
-export { Ee as DataTable };
+export { Z as DataTable };