haze-ui 1.26.0 → 1.28.0

package/dist/components/DataTable/DataTable.js

@@ -1,193 +1,444 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import t from "../Checkbox/CheckboxCore.js";
-import n from "../Skeleton/Skeleton.js";
-import r from "../VirtualList/VirtualList.js";
-import ee from "../Table/TableHead.js";
-import i from "../Table/TableBody.js";
-import a from "../Table/TableCell.js";
-import te from "../Empty/Empty.js";
-import o from "../Pagination/Pagination.js";
+import t from "../Input/Input.js";
+import { getDirection as n, useDirection as r } from "../../utils/direction.js";
+import { useStrings as i } from "../LocaleProvider/useStrings.js";
+import a from "../VirtualList/VirtualList.js";
+import o from "../Checkbox/CheckboxCore.js";
+import s from "../Skeleton/Skeleton.js";
+import c from "../Table/TableHead.js";
+import l from "../Table/TableBody.js";
+import u from "../Table/TableCell.js";
+import ee from "../Empty/Empty.js";
+import te from "../Pagination/Pagination.js";
+import ne from "../DropdownMenu/DropdownMenu.js";
+import re from "../DropdownMenu/DropdownMenuTrigger.js";
+import ie from "../DropdownMenu/DropdownMenuContent.js";
+import ae from "./CellEditor.js";
+import { dataTableFeatures as oe } from "./features.js";
 /* empty css                    */
-import { Fragment as ne, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useEffect as l, useMemo as u, useRef as d, useState as re } from "react";
-import { useControl as f } from "react-use-control";
-import { createPaginatedRowModel as p, createSortedRowModel as m, metaHelper as h, rowPaginationFeature as g, rowSelectionFeature as _, rowSortingFeature as v, sortFn_alphanumeric as y, sortFn_text as b, tableFeatures as x, useTable as S } from "@tanstack/react-table";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Fragment as se, useEffect as ce, useId as le, useMemo as ue, useRef as de, useState as fe } from "react";
+import { isControl as pe, useControl as m, useThru as me, watch as he } from "react-use-control";
+import { useTable as ge } from "@tanstack/react-table";
 //#region src/lib/components/DataTable/DataTable.tsx
-var C = x({
-	rowPaginationFeature: g,
-	paginatedRowModel: p(),
-	rowSelectionFeature: _,
-	rowSortingFeature: v,
-	sortedRowModel: m(),
-	sortFns: {
-		alphanumeric: y,
-		text: b
-	},
-	columnMeta: h()
-});
-function w(e, t) {
+function _e(e, t) {
 	let n = {
 		...e,
-		enableSorting: e.enableSorting ?? e.meta?.sortable ?? t
+		enableSorting: e.enableSorting ?? e.meta?.sortable ?? t.sortable,
+		enableResizing: e.enableResizing ?? e.meta?.resizable ?? !0,
+		enableHiding: e.enableHiding ?? e.meta?.hideable !== !1,
+		enableColumnFilter: e.enableColumnFilter ?? e.meta?.filterable ?? t.filterable,
+		filterFn: e.filterFn ?? "includesString",
+		size: t.resizable && typeof e.meta?.width == "number" ? e.meta.width : e.size
 	};
 	return "columns" in n && n.columns ? {
 		...n,
-		columns: n.columns.map((e) => w(e, t))
+		columns: n.columns.map((e) => _e(e, t))
 	} : n;
 }
-var ie = 34, ae = "haze-DataTable__root", oe = "haze-DataTable__scrollArea", se = "haze-DataTable__stickyScrollArea", ce = "haze-DataTable__virtualArea", T = "haze-DataTable__fixedLayout", le = "haze-DataTable__virtualRowTable", ue = "haze-DataTable__virtualCheckCell", E = "haze-DataTable__tableBase", de = "haze-DataTable__stickyHead", fe = "haze-DataTable__sortButton", pe = "haze-DataTable__sortIcon", me = "haze-DataTable__rowHover", he = "haze-DataTable__rowSelected", ge = "haze-DataTable__clickableRow", D = "haze-DataTable__checkCell", O = "haze-DataTable__emptyCell", k = "haze-DataTable__footer";
-function A({ columns: p, data: m, sortable: h = !1, selectable: g = !1, rowSelection: _, sorting: v, pageSize: y, page: b, loading: x = !1, stickyHeader: A = !1, virtualized: j, getRowId: M, onRowClick: N, empty: P, className: F, ...I }) {
-	let [L, _e] = f(v, []), [ve, ye] = f(_, {}), [R, be, xe] = f(b, 1), z = j === !0 || typeof j == "object", B = typeof j == "object" ? j.rowHeight : ie, Se = typeof j == "object" ? j.overscan : void 0, V = y ?? Math.max(m.length, 1), Ce = u(() => p.map((e) => w(e, h)), [p, h]), H = S({
-		features: C,
-		columns: Ce,
-		data: m,
-		getRowId: M,
+function h(e) {
+	let t = e.columnDef.header;
+	return typeof t == "string" ? t : e.id;
+}
+function ve(e) {
+	let t = e.meta?.width ?? e.size;
+	return typeof t == "number" ? `${t}px` : t;
+}
+function ye(e) {
+	if (e.length === 0) return "0px";
+	let [t] = e;
+	return e.length === 1 && t !== void 0 && !t.includes("(") ? t : `calc(${e.join(" + ")})`;
+}
+function g(e) {
+	return e ? {
+		left: e.side === "left" ? e.offset : void 0,
+		right: e.side === "right" ? e.offset : void 0
+	} : void 0;
+}
+var be = "calc(var(--haze-space-3) * 2 + var(--haze-space-5))", xe = "(var(--haze-space-3) * 2 + var(--haze-space-5))", Se = 34, Ce = "haze-DataTable__root", we = "haze-DataTable__scrollArea", Te = "haze-DataTable__stickyScrollArea", Ee = "haze-DataTable__virtualArea", _ = "haze-DataTable__fixedLayout", De = "haze-DataTable__virtualRowTable", v = "haze-DataTable__tableBase", Oe = "haze-DataTable__stickyHead", ke = "haze-DataTable__sortButton", Ae = "haze-DataTable__sortIcon", je = "haze-DataTable__rowHover", Me = "haze-DataTable__rowSelected", Ne = "haze-DataTable__clickableRow", Pe = "haze-DataTable__checkCell", Fe = "haze-DataTable__checkCellCol", y = "haze-DataTable__fixedCell", b = "haze-DataTable__fixedCellSelected", Ie = "haze-DataTable__fixedHeadCell", x = "haze-DataTable__fixedLeftEdge", Le = "haze-DataTable__fixedRightEdge", Re = "haze-DataTable__emptyCell", ze = "haze-DataTable__footer", Be = "haze-DataTable__toolbar", Ve = "haze-DataTable__footerMenu", He = "haze-DataTable__columnsTrigger", Ue = "haze-DataTable__toggleRow", We = "haze-DataTable__resizableHead", Ge = "haze-DataTable__resizeHandle", Ke = "haze-DataTable__expander", qe = "haze-DataTable__expanderIcon", Je = "haze-DataTable__panelCell", Ye = "haze-DataTable__treeIndent", Xe = "haze-DataTable__summaryFoot", Ze = "haze-DataTable__stickyFoot", Qe = "haze-DataTable__editableCell";
+function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSelection: et, sorting: T, pageSize: E, page: D, manual: O = !1, pageCount: tt, onPageChange: nt, onSortChange: rt, loading: k = !1, stickyHeader: it = !1, virtualized: A, getRowId: at, onRowClick: j, empty: ot, resizable: M = !1, expanded: st, getRowCanExpand: N, renderExpandedRow: P, subRowsKey: ct = "subRows", columnVisibility: lt, columnToggle: ut = !1, filterable: F = !1, summary: dt, stickyFooter: ft = !1, editable: pt = !1, onCellEdit: mt, className: ht, ...gt }) {
+	let _t = pe(T), [vt, yt] = m(me(_t ? T : void 0, he((e) => rt?.(e))), _t ? [] : T ?? []), [bt, xt] = m(et, {}), St = pe(D), [Ct, wt, Tt] = m(me(St ? D : void 0, he((e) => nt?.(e))), St ? 1 : D ?? 1), [Et, Dt] = m(st, {}), [Ot, kt] = m(lt, {}), [I, L] = fe(null), At = r(), jt = le(), Mt = i("dataTable"), R = A === !0 || typeof A == "object", z = typeof A == "object" ? A.rowHeight : Se, Nt = typeof A == "object" ? A.overscan : void 0, Pt = E ?? Infinity, Ft = N !== void 0 || P !== void 0, It = N === void 0 && P === void 0 && C.some((e) => {
+		let t = e[ct];
+		return Array.isArray(t) && t.length > 0;
+	}), Lt = ue(() => S.map((e) => _e(e, {
+		sortable: $e,
+		resizable: M,
+		filterable: F
+	})), [
+		S,
+		$e,
+		M,
+		F
+	]), B = ge({
+		features: oe,
+		columns: Lt,
+		data: C,
+		getRowId: at,
+		getSubRows: It ? (e) => e[ct] : void 0,
 		state: {
-			sorting: L,
-			rowSelection: ve,
+			sorting: vt,
+			rowSelection: bt,
 			pagination: {
-				pageIndex: R - 1,
-				pageSize: V
-			}
+				pageIndex: Ct - 1,
+				pageSize: Pt
+			},
+			expanded: Et,
+			columnVisibility: Ot
 		},
-		onSortingChange: _e,
-		onRowSelectionChange: ye,
+		onSortingChange: yt,
+		onRowSelectionChange: xt,
+		onExpandedChange: Dt,
+		onColumnVisibilityChange: kt,
+		manualSorting: O,
+		manualPagination: O,
+		getRowCanExpand: N ?? (P === void 0 ? void 0 : () => !0),
+		enableColumnFilters: F,
+		enableColumnResizing: M,
+		columnResizeMode: "onChange",
+		columnResizeDirection: At,
+		defaultColumn: { size: void 0 },
 		onPaginationChange: (e) => {
 			let t = typeof e == "function" ? e({
-				pageIndex: R - 1,
-				pageSize: V
+				pageIndex: Ct - 1,
+				pageSize: Pt
 			}) : e;
-			be(Math.max(1, t.pageIndex + 1));
+			wt(Math.max(1, t.pageIndex + 1));
 		}
-	}), U = d(null), we = H.getIsSomeRowsSelected() && !H.getIsAllRowsSelected();
-	l(() => {
-		let e = U.current?.querySelector("input");
-		e && (e.indeterminate = we);
+	}), Rt = de(null), zt = B.getIsSomeRowsSelected() && !B.getIsAllRowsSelected();
+	ce(() => {
+		let e = Rt.current?.querySelector("input");
+		e && (e.indeterminate = zt);
 	});
-	let W = d(null), [Te, Ee] = re(0);
-	l(() => {
-		if (!z) return;
-		let e = W.current, t = e?.querySelector("thead");
+	let Bt = de(null), [Vt, Ht] = fe(0);
+	ce(() => {
+		if (!R) return;
+		let e = Bt.current, t = e?.querySelector("thead");
 		if (!e || !t) return;
 		let n = () => {
 			let n = Math.floor(e.getBoundingClientRect().height), r = Math.floor(t.getBoundingClientRect().height);
-			Ee(Math.max(B, n - r));
+			Ht(Math.max(z, n - r));
 		};
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(e), r.observe(t), () => r.disconnect();
-	}, [z, B]);
-	let G = H.getHeaderGroups(), K = H.getLeafHeaders(), De = K.length + +!!g, q = H.getRowModel().rows, J = N ? (e, t) => {
-		t.target instanceof Element && t.target.closest("button, input, select, textarea, a") || N(e, t);
-	} : void 0, Y = z ? ue : D, X = /* @__PURE__ */ s(ee, {
-		className: A ? de : void 0,
-		children: G.map((n, r) => /* @__PURE__ */ c("tr", { children: [g && r === 0 && /* @__PURE__ */ s(a, {
+	}, [R, z]);
+	let V = B.getHeaderGroups(), H = B.getLeafHeaders(), Ut = H.length + +!!w, U = B.getRowModel().rows, Wt = B.state.columnSizing, W = H.map((e) => {
+		let t = Wt[e.column.id];
+		return t === void 0 ? ve(e.column.columnDef) : `${t}px`;
+	}), Gt = W.some((e) => e !== void 0), Kt = (e, t) => {
+		let n = e.column.columnDef, r = n.minSize ?? 20, i = n.maxSize ?? 2 ** 53 - 1, a = Wt[e.column.id] ?? e.column.getSize(), o = Math.min(Math.max(Math.round(a + t), r), i);
+		B.setColumnSizing((t) => ({
+			...t,
+			[e.column.id]: o
+		}));
+	}, G = H.map((e) => e.column.columnDef.meta?.fixed), K = !R && w && G.some((e) => e === "left") ? {
+		side: "left",
+		offset: "0px",
+		edge: G[0] !== "left"
+	} : void 0, q = /* @__PURE__ */ new Map();
+	if (!R) {
+		let e = K ? [xe] : [];
+		H.forEach((t, n) => {
+			if (G[n] !== "left") return;
+			q.set(t.column.id, {
+				side: "left",
+				offset: ye(e),
+				edge: G[n + 1] !== "left"
+			});
+			let r = W[n];
+			r && e.push(r);
+		});
+		let t = [];
+		for (let e = H.length - 1; e >= 0; --e) {
+			let n = H[e];
+			if (!n || G[e] !== "right") continue;
+			q.set(n.column.id, {
+				side: "right",
+				offset: ye(t),
+				edge: G[e - 1] !== "right"
+			});
+			let r = W[e];
+			r && t.push(r);
+		}
+	}
+	let J = R || Gt || M ? /* @__PURE__ */ p("colgroup", { children: [w && /* @__PURE__ */ f("col", { style: { width: be } }), H.map((e, t) => /* @__PURE__ */ f("col", { style: W[t] ? { width: W[t] } : void 0 }, e.id))] }) : void 0, Y = R || Gt || M ? Fe : Pe, qt = j ? (e, t) => {
+		t.target instanceof Element && t.target.closest("button, input, select, textarea, a") || j(e, t);
+	} : void 0, Jt = /* @__PURE__ */ f(c, {
+		className: it ? Oe : void 0,
+		children: V.map((t, r) => /* @__PURE__ */ p("tr", { children: [w && r === 0 && /* @__PURE__ */ f(u, {
 			as: "th",
-			rowSpan: G.length > 1 ? G.length : void 0,
-			className: e([Y]),
-			children: /* @__PURE__ */ s("span", {
-				ref: U,
-				children: /* @__PURE__ */ s(t, {
-					checked: H.getIsAllRowsSelected(),
-					onChange: (e) => H.toggleAllRowsSelected(e),
-					"aria-label": "Select all rows"
+			rowSpan: V.length > 1 ? V.length : void 0,
+			style: g(K),
+			className: e([
+				Y,
+				K && y,
+				K && Ie
+			]),
+			children: /* @__PURE__ */ f("span", {
+				ref: Rt,
+				children: /* @__PURE__ */ f(o, {
+					checked: B.getIsAllRowsSelected(),
+					onChange: (e) => B.toggleAllRowsSelected(e),
+					"aria-label": Mt.selectAll
 				})
 			})
-		}), n.headers.map((t) => {
+		}), t.headers.map((t) => {
 			if (t.rowSpan === 0) return null;
-			if (t.isPlaceholder) return /* @__PURE__ */ s(a, {
+			if (t.isPlaceholder) return /* @__PURE__ */ f(u, {
 				as: "th",
 				children: null
 			}, t.placeholderId ?? t.id);
-			let n = t.column.getIsSorted();
-			return /* @__PURE__ */ s(a, {
+			let r = t.column.getIsSorted(), i = t.subHeaders.length === 0 ? q.get(t.column.id) : void 0, a = M && t.subHeaders.length === 0 && t.column.getCanResize();
+			return /* @__PURE__ */ p(u, {
 				as: "th",
 				colSpan: t.colSpan > 1 ? t.colSpan : void 0,
 				rowSpan: t.rowSpan > 1 ? t.rowSpan : void 0,
-				"aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : void 0,
-				children: t.column.getCanSort() ? /* @__PURE__ */ c("button", {
+				style: g(i),
+				"aria-sort": r === "asc" ? "ascending" : r === "desc" ? "descending" : void 0,
+				className: e([
+					i && y,
+					i && Ie,
+					a && We
+				]),
+				children: [t.column.getCanSort() ? /* @__PURE__ */ p("button", {
 					type: "button",
 					onClick: t.column.getToggleSortingHandler(),
-					className: e([fe]),
-					children: [/* @__PURE__ */ s(H.FlexRender, { header: t }), /* @__PURE__ */ s("span", {
+					className: e([ke]),
+					children: [/* @__PURE__ */ f(B.FlexRender, { header: t }), /* @__PURE__ */ f("span", {
 						"aria-hidden": "true",
-						className: e([pe]),
-						children: n === "asc" ? "↑" : n === "desc" ? "↓" : "↕"
+						className: e([Ae]),
+						children: r === "asc" ? "↑" : r === "desc" ? "↓" : "↕"
 					})]
-				}) : /* @__PURE__ */ s(H.FlexRender, { header: t })
+				}) : /* @__PURE__ */ f(B.FlexRender, { header: t }), a && /* @__PURE__ */ f("div", {
+					role: "separator",
+					"aria-orientation": "vertical",
+					"aria-label": `Resize ${h(t.column)}`,
+					tabIndex: 0,
+					onMouseDown: (e) => {
+						e.preventDefault(), t.getResizeHandler()(e);
+					},
+					onDoubleClick: () => t.column.resetSize(),
+					onKeyDown: (e) => {
+						if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+						e.preventDefault();
+						let r = n(e.currentTarget) === "rtl", i = e.key === "ArrowRight" !== r;
+						Kt(t, i ? 5 : -5);
+					},
+					className: e([Ge])
+				})]
 			}, t.id);
-		})] }, n.id))
-	}), Z = (n) => /* @__PURE__ */ c("tr", {
-		onClick: J ? (e) => J(n.original, e) : void 0,
+		})] }, t.id))
+	}), Yt = (e) => `${jt}-${e.replace(/\s+/g, "-")}-panel`, X = (t) => /* @__PURE__ */ p(se, { children: [/* @__PURE__ */ p("tr", {
+		onClick: qt ? (e) => qt(t.original, e) : void 0,
 		className: e([
-			me,
-			n.getIsSelected() && he,
-			N && ge
+			je,
+			t.getIsSelected() && Me,
+			j && Ne
 		]),
-		children: [g && /* @__PURE__ */ s(a, {
-			className: e([Y]),
-			children: /* @__PURE__ */ s(t, {
-				checked: n.getIsSelected(),
-				onChange: (e) => n.toggleSelected(e),
-				"aria-label": `Select row ${n.id}`
+		children: [w && /* @__PURE__ */ f(u, {
+			style: g(K),
+			className: e([
+				Y,
+				K && y,
+				K?.edge && x,
+				t.getIsSelected() && b
+			]),
+			children: /* @__PURE__ */ f(o, {
+				checked: t.getIsSelected(),
+				onChange: (e) => t.toggleSelected(e),
+				"aria-label": `Select row ${t.id}`
 			})
-		}), n.getAllCells().map((e) => /* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(H.FlexRender, { cell: e }) }, e.id))]
-	}, n.id), Oe = (t) => /* @__PURE__ */ c("tr", { children: [g && /* @__PURE__ */ s(a, {
-		className: e([Y]),
-		children: /* @__PURE__ */ s(n, {})
-	}), K.map((e) => /* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(n, {}) }, e.id))] }, `skeleton-${t}`), Q = Array.from({ length: y ?? 5 }, (e, t) => Oe(t)), $ = /* @__PURE__ */ s("tr", { children: s(a, {
-		colSpan: De,
-		className: e([O]),
-		children: P ?? /* @__PURE__ */ s(te, {})
-	}) });
-	return /* @__PURE__ */ c("div", {
-		className: e([ae, F]),
-		children: [z ? /* @__PURE__ */ c("div", {
-			ref: W,
-			className: e([ce]),
-			children: [/* @__PURE__ */ s("table", {
-				...I,
-				className: e([E, T]),
-				children: X
-			}), x ? /* @__PURE__ */ s("table", {
-				className: e([E, T]),
-				children: /* @__PURE__ */ s(i, { children: Q })
-			}) : q.length > 0 ? /* @__PURE__ */ s(r, {
-				items: q,
-				height: Te,
-				itemHeight: B,
-				overscan: Se,
-				renderItem: (t) => /* @__PURE__ */ s("table", {
-					className: e([
-						E,
-						T,
-						le
-					]),
-					children: /* @__PURE__ */ s(i, { children: Z(t) })
-				})
-			}) : /* @__PURE__ */ s("table", {
-				className: e([E, T]),
-				children: /* @__PURE__ */ s(i, { children: $ })
+		}), t.getVisibleCells().map((n, r) => {
+			let i = q.get(n.column.id), a = pt ? n.column.columnDef.meta?.editor ?? "text" : !1, o = a !== !1, s = I !== null && I.rowId === t.id && I.columnId === n.column.id, c = (e) => {
+				L(null);
+				let r = n.getValue();
+				Object.is(e, r) || mt?.(t.id, n.column.id, e, r);
+			};
+			return /* @__PURE__ */ f(u, {
+				style: g(i),
+				tabIndex: o ? 0 : void 0,
+				onDoubleClick: o && !s ? () => L({
+					rowId: t.id,
+					columnId: n.column.id
+				}) : void 0,
+				onKeyDown: o && !s ? (e) => {
+					e.key === "Enter" && (e.preventDefault(), L({
+						rowId: t.id,
+						columnId: n.column.id
+					}));
+				} : void 0,
+				className: e([
+					i && y,
+					i?.edge && (i.side === "left" ? x : Le),
+					t.getIsSelected() && b,
+					o && Qe
+				]),
+				children: s && o ? typeof a == "function" ? a({
+					value: n.getValue(),
+					row: t,
+					column: n.column,
+					onSave: c,
+					onCancel: () => L(null)
+				}) : /* @__PURE__ */ f(ae, {
+					kind: a === "number" ? "number" : "text",
+					value: n.getValue(),
+					ariaLabel: `Edit ${h(n.column)} in row ${t.id}`,
+					onSave: c,
+					onCancel: () => L(null)
+				}) : /* @__PURE__ */ p(d, { children: [
+					r === 0 && t.depth > 0 && /* @__PURE__ */ f("span", {
+						"aria-hidden": "true",
+						style: { width: `calc(var(--haze-space-4) * ${t.depth})` },
+						className: e([Ye])
+					}),
+					r === 0 && t.getCanExpand() && /* @__PURE__ */ f("button", {
+						type: "button",
+						"aria-expanded": t.getIsExpanded(),
+						"aria-controls": P === void 0 ? void 0 : Yt(t.id),
+						"aria-label": t.getIsExpanded() ? `Collapse row ${t.id}` : `Expand row ${t.id}`,
+						onClick: t.getToggleExpandedHandler(),
+						className: e([Ke]),
+						children: /* @__PURE__ */ f("span", {
+							"aria-hidden": "true",
+							className: e([qe]),
+							children: "▸"
+						})
+					}),
+					/* @__PURE__ */ f(B.FlexRender, { cell: n })
+				] })
+			}, n.id);
+		})]
+	}, t.id), P !== void 0 && t.getCanExpand() && t.getIsExpanded() && /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f(u, {
+		colSpan: Ut,
+		id: Yt(t.id),
+		className: e([Je]),
+		children: P(t)
+	}) }, `${t.id}-panel`)] }, t.id), Xt = (t) => /* @__PURE__ */ p("tr", { children: [w && /* @__PURE__ */ f(u, {
+		style: g(K),
+		className: e([
+			Y,
+			K && y,
+			K?.edge && x
+		]),
+		children: /* @__PURE__ */ f(s, {})
+	}), H.map((t) => {
+		let n = q.get(t.column.id);
+		return /* @__PURE__ */ f(u, {
+			style: g(n),
+			className: e([n && y, n?.edge && (n.side === "left" ? x : Le)]),
+			children: /* @__PURE__ */ f(s, {})
+		}, t.id);
+	})] }, `skeleton-${t}`), Zt = Array.from({ length: E ?? 5 }, (e, t) => Xt(t)), Qt = /* @__PURE__ */ f("tr", { children: f(u, {
+		colSpan: Ut,
+		className: e([Re]),
+		children: ot ?? /* @__PURE__ */ f(ee, {})
+	}) }), $t = F ? /* @__PURE__ */ f(l, { children: p("tr", { children: [w && /* @__PURE__ */ f(u, { children: null }), H.map((e) => /* @__PURE__ */ f(u, { children: e.column.getCanFilter() ? /* @__PURE__ */ f(t, {
+		size: "sm",
+		"aria-label": `Filter ${h(e.column)}`,
+		placeholder: Mt.filterPlaceholder,
+		value: e.column.getFilterValue() ?? "",
+		onChange: (t) => e.column.setFilterValue(t.target.value)
+	}) : null }, `filter-${e.id}`))] }) }) : void 0, en = B.getFilteredRowModel().flatRows, Z = dt !== void 0 && !k && U.length > 0 ? dt(en) : void 0, Q = Z !== void 0 && Z.length > 0 ? /* @__PURE__ */ f("tfoot", {
+		className: e([Xe, ft && Ze]),
+		children: Z.map((e, t) => /* @__PURE__ */ p("tr", {
+			"aria-label": e.label,
+			children: [w && /* @__PURE__ */ f(u, { children: null }), H.map((t, n) => {
+				let r = e.cells[n];
+				return /* @__PURE__ */ f(u, { children: typeof r == "function" ? r(en) : r }, t.id);
 			})]
-		}) : /* @__PURE__ */ s("div", {
-			className: e([A ? se : oe]),
-			children: /* @__PURE__ */ c("table", {
-				...I,
-				className: e([E]),
-				children: [X, /* @__PURE__ */ s(i, { children: x ? Q : /* @__PURE__ */ c(ne, { children: [q.map(Z), q.length === 0 && $] }) })]
-			})
-		}), y !== void 0 && /* @__PURE__ */ s("div", {
-			className: e([k]),
-			children: /* @__PURE__ */ s(o, {
-				page: xe,
-				total: m.length,
-				pageSize: y,
-				size: "sm"
-			})
+		}, `summary-${t}`))
+	}) : void 0, $ = ut ? /* @__PURE__ */ p(ne, {
+		className: E === void 0 ? void 0 : Ve,
+		children: [/* @__PURE__ */ f(re, {
+			className: e([He]),
+			children: "Columns"
+		}), /* @__PURE__ */ f(ie, {
+			align: "end",
+			children: B.getAllLeafColumns().filter((e) => e.getCanHide()).map((t) => /* @__PURE__ */ p("label", {
+				className: e([Ue]),
+				children: [/* @__PURE__ */ f(o, {
+					role: "menuitemcheckbox",
+					"aria-checked": t.getIsVisible(),
+					checked: t.getIsVisible(),
+					onChange: () => t.toggleVisibility(),
+					"aria-label": `Show ${h(t)}`
+				}), /* @__PURE__ */ f("span", { children: h(t) })]
+			}, t.id))
 		})]
+	}) : void 0;
+	return /* @__PURE__ */ p("div", {
+		className: e([Ce, ht]),
+		children: [
+			$ && E === void 0 && /* @__PURE__ */ f("div", {
+				className: e([Be]),
+				children: $
+			}),
+			R ? /* @__PURE__ */ p("div", {
+				ref: Bt,
+				className: e([Ee]),
+				children: [
+					/* @__PURE__ */ p("table", {
+						...gt,
+						className: e([v, _]),
+						children: [
+							J,
+							Jt,
+							$t
+						]
+					}),
+					k ? /* @__PURE__ */ p("table", {
+						className: e([v, _]),
+						children: [J, /* @__PURE__ */ f(l, { children: Zt })]
+					}) : U.length > 0 ? /* @__PURE__ */ f(a, {
+						items: U,
+						height: Vt,
+						itemHeight: z,
+						estimatedItemHeight: Ft ? z : void 0,
+						overscan: Nt,
+						renderItem: (t) => /* @__PURE__ */ p("table", {
+							className: e([
+								v,
+								_,
+								De
+							]),
+							children: [J, /* @__PURE__ */ f(l, { children: X(t) })]
+						})
+					}) : /* @__PURE__ */ p("table", {
+						className: e([v, _]),
+						children: [J, /* @__PURE__ */ f(l, { children: Qt })]
+					}),
+					Q !== void 0 && /* @__PURE__ */ p("table", {
+						className: e([v, _]),
+						children: [J, Q]
+					})
+				]
+			}) : /* @__PURE__ */ f("div", {
+				className: e([it ? Te : we]),
+				children: /* @__PURE__ */ p("table", {
+					...gt,
+					className: e([v]),
+					children: [
+						J,
+						Jt,
+						$t,
+						/* @__PURE__ */ f(l, { children: k ? Zt : /* @__PURE__ */ p(d, { children: [U.map(X), U.length === 0 && Qt] }) }),
+						Q
+					]
+				})
+			}),
+			E !== void 0 && /* @__PURE__ */ p("div", {
+				className: e([ze]),
+				children: [$, /* @__PURE__ */ f(te, {
+					page: Tt,
+					total: O && tt !== void 0 ? Math.max(0, tt) * E : C.length,
+					pageSize: E,
+					size: "sm"
+				})]
+			})
+		]
 	});
 }
 //#endregion
-export { A as default };
+export { S as default };

package/dist/components/DataTable/csv.js

@@ -0,0 +1,29 @@
+"use client";
+//#region src/lib/components/DataTable/csv.ts
+function e(e) {
+	return e.id === void 0 ? "accessorKey" in e ? e.accessorKey : "" : e.id;
+}
+function t(e) {
+	return e.flatMap((e) => "columns" in e && e.columns ? t(e.columns) : [e]);
+}
+function n(t, n) {
+	return t.meta?.excludeFromExport || !("accessorKey" in t) && !("accessorFn" in t) ? !1 : n?.[e(t)] !== !1;
+}
+function r(e, t) {
+	if ("accessorFn" in e) return e.accessorFn(t, 0);
+	if ("accessorKey" in e) return t[e.accessorKey];
+}
+function i(e) {
+	return e == null ? "" : e instanceof Date ? e.toISOString() : typeof e == "string" || typeof e == "number" || typeof e == "boolean" || typeof e == "bigint" ? String(e) : typeof e == "function" || typeof e == "symbol" ? "" : JSON.stringify(e);
+}
+function a(e) {
+	return /["\r\n,]/.test(e) ? `"${e.replace(/"/g, "\"\"")}"` : e;
+}
+function o(o, s, c) {
+	let l = t(s).filter((e) => n(e, c?.columnVisibility));
+	if (l.length === 0) return "";
+	let u = l.map((t) => a(i(typeof t.header == "string" ? t.header : e(t)))).join(","), d = o.map((e) => l.map((t) => a(i(r(t, e)))).join(","));
+	return `${c?.bom === !1 ? "" : ""}${[u, ...d].join("\r\n")}`;
+}
+//#endregion
+export { o as dataTableToCsv };

package/dist/components/DataTable/features.js

@@ -0,0 +1,25 @@
+"use client";
+import { columnFilteringFeature as e, columnResizingFeature as t, columnSizingFeature as n, columnVisibilityFeature as r, createExpandedRowModel as i, createFilteredRowModel as a, createPaginatedRowModel as o, createSortedRowModel as s, filterFn_includesString as c, metaHelper as l, rowExpandingFeature as u, rowPaginationFeature as d, rowSelectionFeature as f, rowSortingFeature as p, sortFn_alphanumeric as m, sortFn_text as h, tableFeatures as g } from "@tanstack/react-table";
+//#region src/lib/components/DataTable/features.ts
+var _ = g({
+	rowPaginationFeature: d,
+	paginatedRowModel: o(),
+	rowSelectionFeature: f,
+	rowSortingFeature: p,
+	sortedRowModel: s(),
+	sortFns: {
+		alphanumeric: m,
+		text: h
+	},
+	rowExpandingFeature: u,
+	expandedRowModel: i(),
+	columnVisibilityFeature: r,
+	columnFilteringFeature: e,
+	filteredRowModel: a(),
+	filterFns: { includesString: c },
+	columnSizingFeature: n,
+	columnResizingFeature: t,
+	columnMeta: l()
+});
+//#endregion
+export { _ as dataTableFeatures };

package/dist/components/DataTable/index.js

@@ -1,3 +1,5 @@
 "use client";
 import e from "./DataTable.js";
-export { e as DataTable };
+import { dataTableToCsv as t } from "./csv.js";
+import { dataTableAvg as n, dataTableCount as r, dataTableSum as i } from "./summary.js";
+export { e as DataTable, n as dataTableAvg, r as dataTableCount, i as dataTableSum, t as dataTableToCsv };