@alneas/appkit-react 0.2.0 → 0.3.1

package/dist/tools/components/data-table/data-table.js

@@ -4,73 +4,84 @@ import { buttonVariants as t } from "../../../ui/components/ui/button-variants.j
 import { Button as n } from "../../../ui/components/ui/button-components.js";
 import { Input as r } from "../../../ui/components/ui/input.js";
 import { DropdownMenu as i, DropdownMenuCheckboxItem as a, DropdownMenuContent as o, DropdownMenuGroup as s, DropdownMenuLabel as c, DropdownMenuSeparator as l, DropdownMenuTrigger as u } from "../../../ui/components/ui/dropdown-menu.js";
-import { Table as d, TableBody as f, TableCell as p, TableHead as ee, TableHeader as te, TableRow as m } from "../../../ui/components/ui/table.js";
-import { dataTable_filterPlaceholder as ne } from "../../paraglide/messages/datatable_filterplaceholder2.js";
-import { dataTable_goToFirstPage as h } from "../../paraglide/messages/datatable_gotofirstpage4.js";
-import { dataTable_goToLastPage as g } from "../../paraglide/messages/datatable_gotolastpage4.js";
-import { dataTable_goToNextPage as _ } from "../../paraglide/messages/datatable_gotonextpage4.js";
-import { dataTable_goToPreviousPage as v } from "../../paraglide/messages/datatable_gotopreviouspage4.js";
-import { dataTable_items as re } from "../../paraglide/messages/datatable_items1.js";
-import { dataTable_noResults as ie } from "../../paraglide/messages/datatable_noresults2.js";
-import { dataTable_page as ae } from "../../paraglide/messages/datatable_page1.js";
-import { dataTable_rowsPerPage as y } from "../../paraglide/messages/datatable_rowsperpage3.js";
-import { dataTable_rowsSelected as b } from "../../paraglide/messages/datatable_rowsselected2.js";
-import { dataTable_toggleColumns as x } from "../../paraglide/messages/datatable_togglecolumns2.js";
-import { dataTable_view as S } from "../../paraglide/messages/datatable_view1.js";
-import { dataTableFeatures as oe, flexRender as se, useTable as ce } from "./table-engine.js";
-import { useDataTableStore as C } from "./table-store.js";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import * as D from "react";
-import { ChevronDown as le, ChevronLeft as O, ChevronRight as k, ChevronUp as A, ChevronsLeft as j, ChevronsRight as M, Filter as ue, GripVertical as N, Plus as de, Settings2 as P } from "lucide-react";
-import { DndContext as fe, KeyboardSensor as pe, PointerSensor as me, closestCenter as he, useSensor as ge, useSensors as _e } from "@dnd-kit/core";
-import { SortableContext as ve, arrayMove as ye, horizontalListSortingStrategy as be, sortableKeyboardCoordinates as xe, useSortable as F } from "@dnd-kit/sortable";
-import { CSS as I } from "@dnd-kit/utilities";
+import { Table as d, TableBody as f, TableCell as p, TableHead as ee, TableHeader as m, TableRow as h } from "../../../ui/components/ui/table.js";
+import { useAccessibleDragRef as g } from "../ui/dnd/use-accessible-drag-ref.js";
+import { dataTable_filterPlaceholder as te } from "../../paraglide/messages/datatable_filterplaceholder2.js";
+import { dataTable_goToFirstPage as _ } from "../../paraglide/messages/datatable_gotofirstpage4.js";
+import { dataTable_goToLastPage as v } from "../../paraglide/messages/datatable_gotolastpage4.js";
+import { dataTable_goToNextPage as y } from "../../paraglide/messages/datatable_gotonextpage4.js";
+import { dataTable_goToPreviousPage as b } from "../../paraglide/messages/datatable_gotopreviouspage4.js";
+import { dataTable_items as ne } from "../../paraglide/messages/datatable_items1.js";
+import { dataTable_noResults as re } from "../../paraglide/messages/datatable_noresults2.js";
+import { dataTable_page as x } from "../../paraglide/messages/datatable_page1.js";
+import { dataTable_rowsPerPage as S } from "../../paraglide/messages/datatable_rowsperpage3.js";
+import { dataTable_rowsSelected as C } from "../../paraglide/messages/datatable_rowsselected2.js";
+import { dataTable_toggleColumns as w } from "../../paraglide/messages/datatable_togglecolumns2.js";
+import { dataTable_view as T } from "../../paraglide/messages/datatable_view1.js";
+import { dataTableFeatures as ie, flexRender as ae, useTable as oe } from "./table-engine.js";
+import { getLeafColumnIds as se, reorderVisibleColumns as ce } from "./column-order.js";
+import { useDataTableStore as E } from "./table-store.js";
+import { Fragment as le, jsx as D, jsxs as O } from "react/jsx-runtime";
+import * as k from "react";
+import { ChevronDown as A, ChevronLeft as j, ChevronRight as M, ChevronUp as N, ChevronsLeft as P, ChevronsRight as F, Filter as ue, GripVertical as I, Plus as de, Settings2 as L } from "lucide-react";
+import { DragDropProvider as fe } from "@dnd-kit/react";
+import { Feedback as pe, PointerActivationConstraints as me, PointerSensor as he } from "@dnd-kit/dom";
+import { closestCenter as R } from "@dnd-kit/collision";
+import { isSortable as ge, useSortable as _e } from "@dnd-kit/react/sortable";
 //#region src/tools/components/data-table/data-table.tsx
-function Se({ header: t, enableColumnOrdering: n = !0, enableMultiSort: r = !1, sortIndex: i }) {
-	let { attributes: a, listeners: o, setNodeRef: s, setActivatorNodeRef: c, transform: l, transition: u, isDragging: d } = F({
-		id: t.column.id,
-		disabled: !n
-	}), f = t.column.getCanSort(), p = t.column.getIsSorted(), te = p !== !1, m = f && typeof t.column.columnDef.header != "function" ? "button" : "span", ne = n ? {
-		transform: I.Translate.toString(l),
-		transition: u,
+function ve({ header: t, enableColumnOrdering: n = !0, enableMultiSort: r = !1, sortIndex: i, sortableIndex: a, sortableGroup: o, registeredIds: s }) {
+	let c = n && !t.isPlaceholder && t.column.columns.length === 0, { ref: l, handleRef: u, isDragging: d } = _e({
+		id: t.id,
+		index: a,
+		group: o,
+		type: o,
+		accept: o,
+		data: {
+			columnId: t.column.id,
+			groupId: o,
+			columnIds: s
+		},
+		disabled: !c,
+		collisionDetector: R
+	}), f = g(u), p = t.column.getCanSort(), m = t.column.getIsSorted(), h = m !== !1, te = p && typeof t.column.columnDef.header != "function" ? "button" : "span", _ = n ? {
 		opacity: d ? .8 : 1,
 		zIndex: +!!d,
 		position: "relative",
 		cursor: "move"
 	} : {};
-	return /* @__PURE__ */ E(ee, {
-		ref: n ? s : void 0,
-		style: ne,
-		"aria-sort": f ? p === "asc" ? "ascending" : p === "desc" ? "descending" : "none" : void 0,
-		className: e("bg-primary/10 text-primary font-bold border-b border-primary/20", f && "cursor-pointer select-none hover:bg-primary/20 transition-colors"),
-		onClick: f ? (e) => {
-			f && !e.target.closest("button, input, select, [role=checkbox]") && (r && e.shiftKey ? t.column.toggleSorting(void 0, !0) : t.column.toggleSorting());
+	return /* @__PURE__ */ O(ee, {
+		ref: c ? l : void 0,
+		colSpan: t.colSpan,
+		"aria-hidden": t.isPlaceholder || void 0,
+		style: _,
+		"aria-sort": p ? m === "asc" ? "ascending" : m === "desc" ? "descending" : "none" : void 0,
+		className: e("bg-primary/10 text-primary font-bold border-b border-primary/20", p && "cursor-pointer select-none hover:bg-primary/20 transition-colors"),
+		onClick: p ? (e) => {
+			p && !e.target.closest("button, input, select, [role=checkbox]") && (r && e.shiftKey ? t.column.toggleSorting(void 0, !0) : t.column.toggleSorting());
 		} : void 0,
-		children: [n && !t.isPlaceholder && /* @__PURE__ */ T("button", {
+		children: [c && /* @__PURE__ */ D("button", {
 			type: "button",
-			ref: c,
-			...a,
-			...o,
+			ref: f,
 			"aria-label": `Reorder column ${t.column.id}`,
 			className: "inline-flex h-6 w-6 items-center justify-center cursor-grab",
-			children: /* @__PURE__ */ T(N, {
+			children: /* @__PURE__ */ D(I, {
 				className: "h-3 w-3",
 				"aria-hidden": "true"
 			})
-		}), t.isPlaceholder ? null : /* @__PURE__ */ E("span", {
+		}), t.isPlaceholder ? null : /* @__PURE__ */ O("span", {
 			className: "inline-flex items-center gap-1",
-			children: [/* @__PURE__ */ T(m, {
-				className: e(te && "font-semibold"),
-				...m === "button" ? {
+			children: [/* @__PURE__ */ D(te, {
+				className: e(h && "font-semibold"),
+				...te === "button" ? {
 					type: "button",
 					onClick: (e) => {
 						e.stopPropagation(), t.column.toggleSorting(void 0, r && e.shiftKey);
 					}
 				} : {},
-				children: se(t.column.columnDef.header, t.getContext())
-			}), te && /* @__PURE__ */ E("span", {
+				children: ae(t.column.columnDef.header, t.getContext())
+			}), h && /* @__PURE__ */ O("span", {
 				className: "inline-flex items-center text-xs",
-				children: [T(p === "asc" ? A : le, { className: "h-3.5 w-3.5" }), r && i !== void 0 && i >= 0 && /* @__PURE__ */ T("span", {
+				children: [D(m === "asc" ? N : A, { className: "h-3.5 w-3.5" }), r && i !== void 0 && i >= 0 && /* @__PURE__ */ D("span", {
 					className: "text-[10px] ml-0.5",
 					children: i + 1
 				})]
@@ -78,52 +89,52 @@ function Se({ header: t, enableColumnOrdering: n = !0, enableMultiSort: r = !1,
 		})]
 	});
 }
-function Ce({ columns: t, data: i, variant: a = "default", filterContent: o, storageKey: s, enableSortingByDefault: c = !0, enableMultiSort: l = !1, showRowNumber: u = !1, itemCount: ee, onAdd: h, pageCount: g, rowCount: _, onPaginationChange: v, onSortingChange: ae, onColumnFiltersChange: y, onRowClick: b, onSelectionChange: x, rowIdField: S = "id", manualPagination: w = !1, manualSorting: le = !1, manualFiltering: O = !1, filterColumn: k, sorting: A, pagination: j, enableColumnOrdering: M = !0, containerClassName: N, tableClassName: P, pageSizeOptions: F = [
+function z({ columns: t, data: i, variant: a = "default", filterContent: o, storageKey: s, enableSortingByDefault: c = !0, enableMultiSort: l = !1, showRowNumber: u = !1, itemCount: ee, onAdd: g, pageCount: _, rowCount: v, onPaginationChange: y, onSortingChange: b, onColumnFiltersChange: x, onRowClick: S, onSelectionChange: C, rowIdField: w = "id", manualPagination: T = !1, manualSorting: le = !1, manualFiltering: A = !1, filterColumn: j, sorting: M, pagination: N, enableColumnOrdering: P = !0, containerClassName: F, tableClassName: I, pageSizeOptions: L = [
 	10,
 	20,
 	30,
 	50,
 	100
-], filterLayout: I = "inline", defaultFilterOpen: Ce = !1, activeFiltersContent: z }) {
+], filterLayout: R = "inline", defaultFilterOpen: _e = !1, activeFiltersContent: z }) {
 	"use no memo";
-	let Te = C((e) => e.getTableSettings), Ee = C((e) => e.setTableSettings), B = C((e) => e._hasHydrated), V = D.useSyncExternalStore(D.useCallback(() => () => {}, []), () => !0, () => !1), [H, De] = D.useState(Ce), [Oe, ke] = D.useState(A || []), [U, Ae] = D.useState([]), [W, je] = D.useState({}), [Me, Ne] = D.useState({}), [Pe, Fe] = D.useState(j || {
+	let be = E((e) => e.getTableSettings), xe = E((e) => e.setTableSettings), H = E((e) => e._hasHydrated), U = k.useSyncExternalStore(k.useCallback(() => () => {}, []), () => !0, () => !1), [W, Se] = k.useState(_e), [Ce, we] = k.useState(M || []), [G, Te] = k.useState([]), [Ee, De] = k.useState({}), [Oe, ke] = k.useState({}), [Ae, je] = k.useState(N || {
 		pageIndex: 0,
 		pageSize: 10
-	}), [G, K] = D.useState(t.map((e) => e.id || e.accessorKey)), Ie = j !== void 0, q = A ?? Oe, J = j ?? Pe, Le = (e) => {
+	}), [K, Me] = k.useState(se(t)), Ne = N !== void 0, q = M ?? Ce, J = N ?? Ae, Pe = (e) => {
 		let t = typeof e == "function" ? e(q) : e;
-		A === void 0 && ke(t), ae?.(t);
-	}, Re = (e) => {
+		M === void 0 && we(t), b?.(t);
+	}, Fe = (e) => {
 		let t = typeof e == "function" ? e(J) : e;
-		j === void 0 && Fe(t), v?.(t);
-	}, [ze, Be] = D.useState(null), Y = D.useMemo(() => t.map((e) => e.id || e.accessorKey || "").join("|"), [t]), X = D.useMemo(() => new Set(Y.split("|").filter(Boolean)), [Y]), Z = s ? JSON.stringify([
+		N === void 0 && je(t), y?.(t);
+	}, [Ie, Le] = k.useState(null), Re = k.useMemo(() => JSON.stringify([...u ? ["rowNumber"] : [], ...se(t)]), [t, u]), Y = k.useMemo(() => new Set(JSON.parse(Re)), [Re]), X = s ? JSON.stringify([
 		s,
-		Y,
-		!!A,
-		!!j
+		Re,
+		!!M,
+		!!N
 	]) : null;
-	if (B && s && ze !== Z) {
-		Be(Z);
-		let e = Te(s);
+	if (H && s && Ie !== X) {
+		Le(X);
+		let e = be(s);
 		if (e) {
-			if (!A && e.sorting && e.sorting.length > 0) {
-				let t = e.sorting.filter((e) => X.has(e.id));
-				t.length > 0 && ke(t);
+			if (!M && e.sorting && e.sorting.length > 0) {
+				let t = e.sorting.filter((e) => Y.has(e.id));
+				t.length > 0 && we(t);
 			}
 			if (e.columnVisibility && Object.keys(e.columnVisibility).length > 0) {
 				let t = {};
-				for (let [n, r] of Object.entries(e.columnVisibility)) X.has(n) && (t[n] = r);
-				Object.keys(t).length > 0 && je(t);
+				for (let [n, r] of Object.entries(e.columnVisibility)) Y.has(n) && (t[n] = r);
+				Object.keys(t).length > 0 && De(t);
 			}
-			if (!j && e.pageSize && e.pageSize !== 10 && Fe((t) => ({
+			if (!N && e.pageSize && e.pageSize !== 10 && je((t) => ({
 				...t,
 				pageSize: e.pageSize
 			})), e.columnOrder && e.columnOrder.length > 0) {
-				let t = e.columnOrder.filter((e) => X.has(e)), n = new Set(t), r = Array.from(X).filter((e) => !n.has(e)), i = [...t, ...r];
-				i.length > 0 && K(i);
+				let t = e.columnOrder.filter((e) => Y.has(e)), n = new Set(t), r = Array.from(Y).filter((e) => !n.has(e)), i = [...t, ...r];
+				i.length > 0 && Me(i);
 			}
 		}
 	}
-	let Ve = D.useMemo(() => ({
+	let ze = k.useMemo(() => ({
 		id: "rowNumber",
 		header: "No",
 		enableSorting: !1,
@@ -131,8 +142,8 @@ function Ce({ columns: t, data: i, variant: a = "default", filterContent: o, sto
 			let n = t.store.state.pagination;
 			return n ? n.pageIndex * n.pageSize + e.index + 1 : e.index + 1;
 		}
-	}), []), He = D.useMemo(() => {
-		let e = u ? [Ve, ...t] : t;
+	}), []), Z = k.useMemo(() => {
+		let e = u ? [ze, ...t] : t;
 		return c ? e.map((e) => ({
 			...e,
 			enableSorting: e.enableSorting !== !1
@@ -140,248 +151,268 @@ function Ce({ columns: t, data: i, variant: a = "default", filterContent: o, sto
 	}, [
 		u,
 		t,
-		Ve,
+		ze,
 		c
-	]), Ue = D.useCallback((e) => {
-		if (S) return S.split("_").reduce((e, t) => {
+	]), Be = k.useCallback((e) => {
+		if (w) return w.split("_").reduce((e, t) => {
 			if (e && typeof e == "object" && t !== "__proto__" && t !== "constructor" && t !== "prototype" && Object.prototype.hasOwnProperty.call(e, t)) return e[t];
 		}, e);
-	}, [S]);
-	D.useEffect(() => {
-		s && B && ze === Z && Ee(s, {
-			columnOrder: G,
-			columnVisibility: W,
+	}, [w]);
+	k.useEffect(() => {
+		s && H && Ie === X && xe(s, {
+			columnOrder: K,
+			columnVisibility: Ee,
 			sorting: q,
 			pageSize: J.pageSize
 		});
 	}, [
 		s,
-		G,
-		W,
+		K,
+		Ee,
 		q,
 		J.pageSize,
-		Ee,
-		B,
-		ze,
-		Z
-	]), D.useEffect(() => {
-		O && y && y(U);
+		xe,
+		H,
+		Ie,
+		X
+	]), k.useEffect(() => {
+		A && x && x(G);
 	}, [
-		U,
-		O,
-		y
+		G,
+		A,
+		x
 	]);
-	let Q = ce({
-		features: oe,
+	let Q = oe({
+		features: ie,
 		data: i,
-		columns: He,
-		pageCount: w ? g : void 0,
-		rowCount: w ? _ : void 0,
-		getRowId: S ? (e, t) => {
-			let n = S.split("_").reduce((e, t) => {
+		columns: Z,
+		pageCount: T ? _ : void 0,
+		rowCount: T ? v : void 0,
+		getRowId: w ? (e, t) => {
+			let n = w.split("_").reduce((e, t) => {
 				if (e && typeof e == "object" && t in e) return e[t];
 			}, e);
 			return String(n === void 0 ? t : n);
 		} : void 0,
 		state: {
 			sorting: q,
-			columnFilters: U,
-			columnVisibility: W,
-			rowSelection: Me,
+			columnFilters: G,
+			columnVisibility: Ee,
+			rowSelection: Oe,
 			pagination: J,
-			columnOrder: G
+			columnOrder: K
 		},
 		enableRowSelection: !0,
 		enableMultiSort: l,
-		onRowSelectionChange: Ne,
-		onSortingChange: Le,
-		onColumnFiltersChange: Ae,
-		onColumnVisibilityChange: je,
-		onPaginationChange: Re,
-		onColumnOrderChange: K,
-		autoResetPageIndex: w || Ie ? !1 : void 0,
-		manualPagination: w,
+		onRowSelectionChange: ke,
+		onSortingChange: Pe,
+		onColumnFiltersChange: Te,
+		onColumnVisibilityChange: De,
+		onPaginationChange: Fe,
+		onColumnOrderChange: Me,
+		autoResetPageIndex: T || Ne ? !1 : void 0,
+		manualPagination: T,
 		manualSorting: le,
-		manualFiltering: O
+		manualFiltering: A
 	});
-	D.useEffect(() => {
-		x && x(Q.getFilteredSelectedRowModel().rows.map((e) => e.original));
+	k.useEffect(() => {
+		C && C(Q.getFilteredSelectedRowModel().rows.map((e) => e.original));
 	}, [
-		Me,
+		Oe,
 		Q,
-		x
+		C
 	]);
-	let We = _e(ge(me, { activationConstraint: { distance: 8 } }), ge(pe, { coordinateGetter: xe })), Ge = D.useCallback((e) => {
-		let { active: t, over: n } = e;
-		t && n && t.id !== n.id && K((e) => {
-			let r = e.indexOf(t.id), i = e.indexOf(n.id);
-			return ye(e, r, i);
+	let Ve = k.useRef(null), He = k.useCallback((e) => {
+		let t = e.operation.source;
+		t && Array.isArray(t.data.columnIds) && (Ve.current = {
+			sourceId: String(t.id),
+			groupId: t.data.groupId,
+			ids: [...t.data.columnIds],
+			leafIds: Q.getAllLeafColumns().map((e) => e.id),
+			order: [...K]
 		});
-	}, []), Ke = D.useCallback((e) => q.findIndex((t) => t.id === e), [q]), qe = D.useCallback(() => /* @__PURE__ */ T(fe, {
-		sensors: We,
-		collisionDetection: he,
-		onDragEnd: Ge,
-		children: /* @__PURE__ */ T("div", {
-			className: e("rounded-md border", P),
-			children: /* @__PURE__ */ E(d, { children: [/* @__PURE__ */ T(te, { children: Q.getHeaderGroups().map((e) => /* @__PURE__ */ T(ve, {
-				items: G,
-				strategy: be,
-				children: /* @__PURE__ */ T(m, { children: e.headers.map((e) => /* @__PURE__ */ T(Se, {
-					header: e,
-					enableColumnOrdering: M,
+	}, [Q, K]), Ue = k.useCallback((e) => {
+		let t = Ve.current;
+		Ve.current = null;
+		let { source: n, target: r } = e.operation;
+		if (e.canceled || !P || !t || !r || !ge(n) || String(n.id) !== t.sourceId) return;
+		let i = Q.getAllLeafColumns().map((e) => e.id), a = Q.getHeaderGroups().find((e) => e.id === t.groupId)?.headers.filter((e) => !e.isPlaceholder && e.column.columns.length === 0).map((e) => e.column.id);
+		a && JSON.stringify(a) === JSON.stringify(t.ids) && JSON.stringify(i) === JSON.stringify(t.leafIds) && JSON.stringify(K) === JSON.stringify(t.order) && Me((e) => ce(e, i, t.ids, n.data.columnId, n.initialIndex, n.index));
+	}, [
+		Q,
+		K,
+		P
+	]), We = k.useCallback((e) => q.findIndex((t) => t.id === e), [q]), Ge = k.useCallback(() => /* @__PURE__ */ D(fe, {
+		sensors: (e) => [...e.filter((e) => e !== he), he.configure({ activationConstraints: [new me.Distance({ value: 8 })] })],
+		plugins: (e) => [...e, pe.configure({
+			feedback: "clone",
+			dropAnimation: { duration: 0 }
+		})],
+		onDragStart: He,
+		onDragEnd: Ue,
+		children: /* @__PURE__ */ D("div", {
+			className: e("rounded-md border", I),
+			children: /* @__PURE__ */ O(d, { children: [/* @__PURE__ */ D(m, { children: Q.getHeaderGroups().map((e) => {
+				let t = e.headers.filter((e) => !e.isPlaceholder && e.column.columns.length === 0).map((e) => e.column.id);
+				return /* @__PURE__ */ D(h, { children: e.headers.map((n) => /* @__PURE__ */ D(ve, {
+					header: n,
+					enableColumnOrdering: P,
 					enableMultiSort: l,
-					sortIndex: Ke(e.column.id)
-				}, e.id)) })
-			}, e.id)) }), /* @__PURE__ */ T(f, { children: Q.getRowModel().rows?.length ? Q.getRowModel().rows.map((e) => /* @__PURE__ */ T(m, {
+					sortIndex: We(n.column.id),
+					sortableIndex: t.indexOf(n.column.id),
+					sortableGroup: e.id,
+					registeredIds: t
+				}, n.id)) }, e.id);
+			}) }), /* @__PURE__ */ D(f, { children: Q.getRowModel().rows?.length ? Q.getRowModel().rows.map((e) => /* @__PURE__ */ D(h, {
 				"data-state": e.getIsSelected() && "selected",
-				onClick: () => b && b(Ue(e.original)),
-				className: b ? "cursor-pointer hover:bg-muted/50" : void 0,
-				children: e.getVisibleCells().map((e) => /* @__PURE__ */ T(p, { children: se(e.column.columnDef.cell, e.getContext()) }, e.id))
-			}, e.id)) : /* @__PURE__ */ T(m, { children: /* @__PURE__ */ T(p, {
-				colSpan: He.length,
+				onClick: () => S && S(Be(e.original)),
+				className: S ? "cursor-pointer hover:bg-muted/50" : void 0,
+				children: e.getVisibleCells().map((e) => /* @__PURE__ */ D(p, { children: ae(e.column.columnDef.cell, e.getContext()) }, e.id))
+			}, e.id)) : /* @__PURE__ */ D(h, { children: /* @__PURE__ */ D(p, {
+				colSpan: Z.length,
 				className: "h-24 text-center",
-				children: ie()
+				children: re()
 			}) }) })] })
 		})
 	}), [
-		We,
-		Ge,
-		Q,
 		He,
-		G,
-		M,
-		l,
-		Ke,
-		b,
 		Ue,
-		P
-	]), $ = () => /* @__PURE__ */ T("div", {
-		className: e("rounded-md border", P),
-		children: /* @__PURE__ */ T(d, { children: /* @__PURE__ */ T(f, { children: /* @__PURE__ */ T(m, { children: /* @__PURE__ */ T(p, {
+		Q,
+		Z,
+		K,
+		P,
+		l,
+		We,
+		S,
+		Be,
+		I
+	]), $ = () => /* @__PURE__ */ D("div", {
+		className: e("rounded-md border", I),
+		children: /* @__PURE__ */ D(d, { children: /* @__PURE__ */ D(f, { children: /* @__PURE__ */ D(h, { children: /* @__PURE__ */ D(p, {
 			className: "h-24 text-center",
-			children: /* @__PURE__ */ T("div", {
+			children: /* @__PURE__ */ D("div", {
 				className: "text-muted-foreground",
 				children: "Loading..."
 			})
 		}) }) }) })
 	});
-	return a === "minimal" ? /* @__PURE__ */ E("div", {
-		className: e("space-y-4", N),
-		children: [V ? qe() : $(), /* @__PURE__ */ T(R, {
+	return a === "minimal" ? /* @__PURE__ */ O("div", {
+		className: e("space-y-4", F),
+		children: [U ? Ge() : $(), /* @__PURE__ */ D(V, {
 			table: Q,
-			pageSizeOptions: F
+			pageSizeOptions: L
 		})]
-	}) : a === "toolbar" ? /* @__PURE__ */ E("div", {
-		className: e("relative h-full", N),
-		children: [h && /* @__PURE__ */ T("div", {
+	}) : a === "toolbar" ? /* @__PURE__ */ O("div", {
+		className: e("relative h-full", F),
+		children: [g && /* @__PURE__ */ D("div", {
 			className: "absolute left-0 top-0 w-full h-full z-10 pointer-events-none",
-			children: /* @__PURE__ */ T("div", {
+			children: /* @__PURE__ */ D("div", {
 				className: "fixed right-4 bottom-10 pointer-events-auto",
-				children: /* @__PURE__ */ T(n, {
+				children: /* @__PURE__ */ D(n, {
 					type: "button",
 					size: "icon",
 					"aria-label": "Add row",
-					onClick: h,
+					onClick: g,
 					className: "w-12 h-12 rounded-full shadow-lg",
-					children: /* @__PURE__ */ T(de, { className: "w-6 h-6" })
+					children: /* @__PURE__ */ D(de, { className: "w-6 h-6" })
 				})
 			})
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ O("div", {
 			className: "relative h-full flex flex-col",
 			children: [
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ O("div", {
 					className: "bg-muted p-2 rounded-t-md grid grid-cols-1 sm:grid-cols-[1fr_minmax(0,auto)_1fr] items-center gap-2",
-					children: [/* @__PURE__ */ E("div", {
+					children: [/* @__PURE__ */ O("div", {
 						className: "flex flex-wrap justify-center items-center gap-2 sm:col-start-2 sm:col-end-3",
 						children: [
-							/* @__PURE__ */ T(L, { table: Q }),
-							o && I === "inline" && o,
-							o && I === "panel" && /* @__PURE__ */ E(n, {
+							/* @__PURE__ */ D(B, { table: Q }),
+							o && R === "inline" && o,
+							o && R === "panel" && /* @__PURE__ */ O(n, {
 								type: "button",
-								variant: H ? "default" : "outline",
+								variant: W ? "default" : "outline",
 								size: "sm",
-								onClick: () => De(!H),
+								onClick: () => Se(!W),
 								className: "h-8 gap-1.5",
-								children: [/* @__PURE__ */ T(ue, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", { children: "フィルター" })]
+								children: [/* @__PURE__ */ D(ue, { className: "h-4 w-4" }), /* @__PURE__ */ D("span", { children: "フィルター" })]
 							})
 						]
-					}), /* @__PURE__ */ E("div", {
+					}), /* @__PURE__ */ O("div", {
 						className: "flex items-center gap-3 justify-center sm:justify-end sm:col-start-3 sm:col-end-4",
-						children: [/* @__PURE__ */ T(we, {
+						children: [/* @__PURE__ */ D(ye, {
 							table: Q,
-							pageSizeOptions: F
-						}), typeof ee == "number" && /* @__PURE__ */ T("span", {
+							pageSizeOptions: L
+						}), typeof ee == "number" && /* @__PURE__ */ D("span", {
 							className: "text-sm text-muted-foreground whitespace-nowrap",
-							children: `${ee.toLocaleString()} ${re()}`
+							children: `${ee.toLocaleString()} ${ne()}`
 						})]
 					})]
 				}),
-				o && I === "panel" && /* @__PURE__ */ T("div", {
-					className: e("border-b transition-all duration-200 ease-in-out overflow-hidden bg-background", H ? "max-h-[500px] p-4" : "max-h-0 p-0 border-none"),
+				o && R === "panel" && /* @__PURE__ */ D("div", {
+					className: e("border-b transition-all duration-200 ease-in-out overflow-hidden bg-background", W ? "max-h-[500px] p-4" : "max-h-0 p-0 border-none"),
 					children: o
 				}),
-				z && /* @__PURE__ */ T("div", {
+				z && /* @__PURE__ */ D("div", {
 					className: "bg-background px-4 py-1.5 border-b",
 					children: z
 				}),
-				/* @__PURE__ */ T("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex-1 overflow-auto",
-					children: V ? qe() : $()
+					children: U ? Ge() : $()
 				})
 			]
 		})]
-	}) : /* @__PURE__ */ E("div", {
-		className: e("space-y-4", N),
+	}) : /* @__PURE__ */ O("div", {
+		className: e("space-y-4", F),
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ O("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ T("div", {
+				children: [/* @__PURE__ */ D("div", {
 					className: "flex items-center py-4",
-					children: k && /* @__PURE__ */ T(r, {
-						placeholder: ne({ column: k }),
-						value: Q.getColumn(k)?.getFilterValue() ?? "",
-						onChange: (e) => Q.getColumn(k)?.setFilterValue(e.target.value),
+					children: j && /* @__PURE__ */ D(r, {
+						placeholder: te({ column: j }),
+						value: Q.getColumn(j)?.getFilterValue() ?? "",
+						onChange: (e) => Q.getColumn(j)?.setFilterValue(e.target.value),
 						className: "max-w-sm"
 					})
-				}), /* @__PURE__ */ T(L, { table: Q })]
+				}), /* @__PURE__ */ D(B, { table: Q })]
 			}),
-			z && /* @__PURE__ */ T("div", {
+			z && /* @__PURE__ */ D("div", {
 				className: "border rounded-md bg-background px-3 py-1",
 				children: z
 			}),
-			V ? qe() : $(),
-			/* @__PURE__ */ T(R, {
+			U ? Ge() : $(),
+			/* @__PURE__ */ D(V, {
 				table: Q,
-				pageSizeOptions: F
+				pageSizeOptions: L
 			}),
-			h && /* @__PURE__ */ T("div", {
+			g && /* @__PURE__ */ D("div", {
 				className: "fixed right-4 bottom-10 z-10",
-				children: /* @__PURE__ */ T(n, {
+				children: /* @__PURE__ */ D(n, {
 					type: "button",
 					size: "icon",
-					onClick: h,
+					onClick: g,
 					className: "w-12 h-12 rounded-full shadow-lg",
-					children: /* @__PURE__ */ T(de, { className: "w-6 h-6" })
+					children: /* @__PURE__ */ D(de, { className: "w-6 h-6" })
 				})
 			})
 		]
 	});
 }
-function L({ table: e }) {
-	return /* @__PURE__ */ E(i, { children: [/* @__PURE__ */ E(u, {
+function B({ table: e }) {
+	return /* @__PURE__ */ O(i, { children: [/* @__PURE__ */ O(u, {
 		className: t({
 			variant: "default",
 			size: "sm",
 			className: "h-8"
 		}),
-		children: [/* @__PURE__ */ T(P, { className: "mr-2 h-4 w-4" }), S()]
-	}), /* @__PURE__ */ T(o, {
+		children: [/* @__PURE__ */ D(L, { className: "mr-2 h-4 w-4" }), T()]
+	}), /* @__PURE__ */ D(o, {
 		align: "end",
 		className: "w-40",
-		children: /* @__PURE__ */ E(s, { children: [
-			/* @__PURE__ */ T(c, { children: x() }),
-			/* @__PURE__ */ T(l, {}),
-			e.getAllColumns().filter((e) => e.accessorFn !== void 0 && e.getCanHide()).map((e) => /* @__PURE__ */ T(a, {
+		children: /* @__PURE__ */ O(s, { children: [
+			/* @__PURE__ */ D(c, { children: w() }),
+			/* @__PURE__ */ D(l, {}),
+			e.getAllColumns().filter((e) => e.accessorFn !== void 0 && e.getCanHide()).map((e) => /* @__PURE__ */ D(a, {
 				className: "capitalize",
 				checked: e.getIsVisible(),
 				onCheckedChange: (t) => e.toggleVisibility(!!t),
@@ -390,99 +421,99 @@ function L({ table: e }) {
 		] })
 	})] });
 }
-function R({ table: e, pageSizeOptions: t = [
+function V({ table: e, pageSizeOptions: t = [
 	10,
 	20,
 	30,
 	50,
 	100
 ] }) {
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ O("div", {
 		className: "flex items-center justify-between px-2",
-		children: [/* @__PURE__ */ T("div", {
+		children: [/* @__PURE__ */ D("div", {
 			className: "flex-1 text-sm text-muted-foreground",
-			children: b({
+			children: C({
 				selected: e.getFilteredSelectedRowModel().rows.length,
 				total: e.getFilteredRowModel().rows.length
 			})
-		}), /* @__PURE__ */ E("div", {
+		}), /* @__PURE__ */ O("div", {
 			className: "flex items-center space-x-6 lg:space-x-8",
 			children: [
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ O("div", {
 					className: "flex items-center space-x-2",
-					children: [/* @__PURE__ */ T("p", {
+					children: [/* @__PURE__ */ D("p", {
 						className: "text-sm font-medium",
-						children: y()
-					}), /* @__PURE__ */ T("select", {
-						"aria-label": y(),
+						children: S()
+					}), /* @__PURE__ */ D("select", {
+						"aria-label": S(),
 						value: `${e.store.state.pagination.pageSize}`,
 						onChange: (t) => {
 							e.setPageSize(Number(t.target.value));
 						},
 						className: "h-8 w-fit min-w-16 rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-						children: t.map((e) => /* @__PURE__ */ T("option", {
+						children: t.map((e) => /* @__PURE__ */ D("option", {
 							value: `${e}`,
 							children: e
 						}, e))
 					})]
 				}),
-				/* @__PURE__ */ T("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex w-24 items-center justify-center text-sm font-medium",
-					children: ae({
+					children: x({
 						current: e.store.state.pagination.pageIndex + 1,
 						total: e.getPageCount()
 					})
 				}),
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ O("div", {
 					className: "flex items-center space-x-2",
 					children: [
-						/* @__PURE__ */ E(n, {
+						/* @__PURE__ */ O(n, {
 							variant: "default",
 							size: "icon",
 							className: "hidden h-8 w-8 lg:flex hover:bg-primary/90",
-							"aria-label": h(),
+							"aria-label": _(),
 							onClick: () => e.setPageIndex(0),
 							disabled: !e.getCanPreviousPage(),
-							children: [/* @__PURE__ */ T("span", {
+							children: [/* @__PURE__ */ D("span", {
 								className: "sr-only",
-								children: h()
-							}), /* @__PURE__ */ T(j, { className: "h-4 w-4" })]
+								children: _()
+							}), /* @__PURE__ */ D(P, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ E(n, {
+						/* @__PURE__ */ O(n, {
 							variant: "default",
 							size: "icon",
 							className: "h-8 w-8 hover:bg-primary/90",
-							"aria-label": v(),
+							"aria-label": b(),
 							onClick: () => e.previousPage(),
 							disabled: !e.getCanPreviousPage(),
-							children: [/* @__PURE__ */ T("span", {
+							children: [/* @__PURE__ */ D("span", {
 								className: "sr-only",
-								children: v()
-							}), /* @__PURE__ */ T(O, { className: "h-4 w-4" })]
+								children: b()
+							}), /* @__PURE__ */ D(j, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ E(n, {
+						/* @__PURE__ */ O(n, {
 							variant: "default",
 							size: "icon",
 							className: "h-8 w-8 hover:bg-primary/90",
-							"aria-label": _(),
+							"aria-label": y(),
 							onClick: () => e.nextPage(),
 							disabled: !e.getCanNextPage(),
-							children: [/* @__PURE__ */ T("span", {
+							children: [/* @__PURE__ */ D("span", {
 								className: "sr-only",
-								children: _()
-							}), /* @__PURE__ */ T(k, { className: "h-4 w-4" })]
+								children: y()
+							}), /* @__PURE__ */ D(M, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ E(n, {
+						/* @__PURE__ */ O(n, {
 							variant: "default",
 							size: "icon",
 							className: "hidden h-8 w-8 lg:flex hover:bg-primary/90",
-							"aria-label": g(),
+							"aria-label": v(),
 							onClick: () => e.setPageIndex(e.getPageCount() - 1),
 							disabled: !e.getCanNextPage(),
-							children: [/* @__PURE__ */ T("span", {
+							children: [/* @__PURE__ */ D("span", {
 								className: "sr-only",
-								children: g()
-							}), /* @__PURE__ */ T(M, { className: "h-4 w-4" })]
+								children: v()
+							}), /* @__PURE__ */ D(F, { className: "h-4 w-4" })]
 						})
 					]
 				})
@@ -490,7 +521,7 @@ function R({ table: e, pageSizeOptions: t = [
 		})]
 	});
 }
-function we({ table: e, pageSizeOptions: t = [
+function ye({ table: e, pageSizeOptions: t = [
 	10,
 	20,
 	30,
@@ -498,39 +529,39 @@ function we({ table: e, pageSizeOptions: t = [
 	100
 ] }) {
 	let r = e.getPageCount();
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ O("div", {
 		className: "flex items-center gap-1",
-		children: [/* @__PURE__ */ T("select", {
-			"aria-label": y(),
+		children: [/* @__PURE__ */ D("select", {
+			"aria-label": S(),
 			value: `${e.store.state.pagination.pageSize}`,
 			onChange: (t) => {
 				e.setPageSize(Number(t.target.value));
 			},
 			className: "h-8 w-fit min-w-16 rounded-md border border-input bg-background px-2 py-1 text-sm",
-			children: t.map((e) => /* @__PURE__ */ T("option", {
+			children: t.map((e) => /* @__PURE__ */ D("option", {
 				value: `${e}`,
 				children: e
 			}, e))
-		}), r > 1 && /* @__PURE__ */ E(w, { children: [
-			/* @__PURE__ */ T(n, {
+		}), r > 1 && /* @__PURE__ */ O(le, { children: [
+			/* @__PURE__ */ D(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
-				"aria-label": h(),
+				"aria-label": _(),
 				onClick: () => e.setPageIndex(0),
 				disabled: e.store.state.pagination.pageIndex === 0,
-				children: /* @__PURE__ */ T(j, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ D(P, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ T(n, {
+			/* @__PURE__ */ D(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
-				"aria-label": v(),
+				"aria-label": b(),
 				onClick: () => e.previousPage(),
 				disabled: !e.getCanPreviousPage(),
-				children: /* @__PURE__ */ T(O, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ D(j, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ E("span", {
+			/* @__PURE__ */ O("span", {
 				className: "text-sm text-muted-foreground whitespace-nowrap px-1",
 				children: [
 					e.store.state.pagination.pageIndex + 1,
@@ -538,28 +569,28 @@ function we({ table: e, pageSizeOptions: t = [
 					r
 				]
 			}),
-			/* @__PURE__ */ T(n, {
+			/* @__PURE__ */ D(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
-				"aria-label": _(),
+				"aria-label": y(),
 				onClick: () => e.nextPage(),
 				disabled: !e.getCanNextPage(),
-				children: /* @__PURE__ */ T(k, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ D(M, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ T(n, {
+			/* @__PURE__ */ D(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
-				"aria-label": g(),
+				"aria-label": v(),
 				onClick: () => e.setPageIndex(r - 1),
 				disabled: e.store.state.pagination.pageIndex === r - 1,
-				children: /* @__PURE__ */ T(M, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ D(F, { className: "h-4 w-4" })
 			})
 		] })]
 	});
 }
 //#endregion
-export { Ce as DataTable, R as DataTablePagination, we as DataTablePaginationCompact, L as DataTableViewOptions };
+export { z as DataTable, V as DataTablePagination, ye as DataTablePaginationCompact, B as DataTableViewOptions };
 
 //# sourceMappingURL=data-table.js.map