npm - flexi-datagrid - Versions diffs - 1.0.0 - Mend

flexi-datagrid 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/flexi-datagrid.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ ,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: },:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-10{top:2.5rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.table{display:table}.h-10{height:2.5rem}.h-12{height:3rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.max-h-40{max-height:10rem}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-52{width:13rem}.w-\[100px\]{width:100px}.w-full{width:100%}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.scale-\[0\.99\]{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[var$--color-background-secondary\,rgba\(248\,250\,252\,1$\)\]{background-color:var(--color-background-secondary,#f8fafc)}.bg-blue-50\/50{background-color:#eff6ff80}.bg-slate-200\/70{background-color:#e2e8f0b3}.bg-slate-50\/30{background-color:#f8fafc4d}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-50\/60{background-color:#f8fafc99}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[-1px_0_0_rgba$226\,232\,240\,1$\]{--tw-shadow:-1px 0 0 #e2e8f0;--tw-shadow-colored:-1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-\[2px_0_5px_-2px_rgba$0\,0\,0\,0\.1$\]{--tw-shadow:2px 0 5px -2px #0000001a;--tw-shadow-colored:2px 0 5px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:#f1f5f9cc}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-50\/80:hover{background-color:#f8fafccc}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-slate-50\/80{background-color:#f8fafccc}.group\/header:hover .group-hover\/header\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}
2	+ /$vite$:1/

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {}

package/dist/index.es.js ADDED Viewed

@@ -0,0 +1,315 @@
+import { ChevronDown as e, ChevronRight as t, GripVertical as n, Pin as r, PinOff as i, X as a } from "lucide-react";
+import { useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/DataTable.tsx
+function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChange: _, onGroupChange: v }) {
+	let [y, b] = l(null), [x, S] = l({}), [C, w] = l(""), [T, E] = l(f.filter((e) => e.pinned).map((e) => e.key)), [D, O] = l([]), [k, A] = l({}), [j, M] = l(!1), N = c(null);
+	o(() => {
+		function e(e) {
+			N.current && !N.current.contains(e.target) && (b(null), w(""));
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let P = (e) => typeof m == "function" ? m(e) : String(e[m]), F = (e) => {
+		let t = T.includes(e);
+		E(t ? T.filter((t) => t !== e) : [...T, e]), _ && _(e, !t);
+	}, I = (e, t) => {
+		e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
+	}, L = (e) => {
+		e.preventDefault(), M(!0);
+	}, R = () => {
+		M(!1);
+	}, z = (e) => {
+		e.preventDefault(), M(!1);
+		let t = e.dataTransfer.getData("text/plain");
+		if (t && !D.includes(t)) {
+			let e = [...D, t];
+			O(e), v && v(e);
+		}
+	}, B = (e) => {
+		let t = D.filter((t) => t !== e);
+		O(t), A({}), v && v(t);
+	}, V = s(() => {
+		let e = f.filter((e) => !D.includes(e.key)), t = e.filter((e) => T.includes(e.key)), n = e.filter((e) => !T.includes(e.key));
+		return [...t, ...n];
+	}, [
+		f,
+		T,
+		D
+	]), H = s(() => {
+		let e = {}, t = 0;
+		return D.length > 0 && (t += 48), V.forEach((n) => {
+			T.includes(n.key) && (e[n.key] = t, t += 150);
+		}), e;
+	}, [
+		V,
+		T,
+		D
+	]), U = s(() => {
+		if (!y) return [];
+		let e = p.map((e) => e[y]), t = Array.from(new Set(e)).filter((e) => e != null);
+		return C.trim() ? t.filter((e) => String(e).toLowerCase().includes(C.toLowerCase())) : t;
+	}, [
+		p,
+		y,
+		C
+	]), W = (e, t) => {
+		S((n) => {
+			let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
+				...n,
+				[e]: i
+			};
+			return a[e].length === 0 && delete a[e], a;
+		});
+	}, G = (e) => {
+		S((t) => {
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, K = s(() => p.filter((e) => Object.entries(x).every(([t, n]) => !n || n.length === 0 ? !0 : n.includes(e[t]))), [p, x]), q = s(() => {
+		if (D.length === 0) return K;
+		let e = (t, n, r = "") => {
+			if (n >= D.length) return t;
+			let i = D[n], a = {};
+			return t.forEach((e) => {
+				let t = String(e[i] ?? "N/A");
+				a[t] || (a[t] = []), a[t].push(e);
+			}), Object.entries(a).map(([t, a]) => {
+				let o = r ? `${r}➔${t}` : t;
+				return {
+					isGroupRow: !0,
+					groupKey: i,
+					groupValue: t,
+					path: o,
+					depth: n,
+					children: e(a, n + 1, o),
+					totalItemsCount: a.length
+				};
+			});
+		};
+		return e(K, 0);
+	}, [K, D]), J = (e) => {
+		A((t) => ({
+			...t,
+			[e]: !t[e]
+		}));
+	}, Y = s(() => {
+		if (D.length === 0) return q;
+		let e = [], t = (n) => {
+			n.forEach((n) => {
+				n.isGroupRow ? (e.push(n), k[n.path] && t(n.children)) : e.push(n);
+			});
+		};
+		return t(q), e;
+	}, [
+		q,
+		k,
+		D
+	]), X = (e) => T.includes(e) ? {
+		className: "sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
+		style: {
+			left: `${H[e]}px`,
+			minWidth: "150px",
+			maxWidth: "150px"
+		}
+	} : {
+		className: "",
+		style: {}
+	};
+	return /* @__PURE__ */ d("div", {
+		className: "w-full space-y-3",
+		children: [/* @__PURE__ */ u("div", {
+			onDragOver: L,
+			onDragLeave: R,
+			onDrop: z,
+			className: `w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${j ? "border-blue-500 bg-blue-50/50 scale-[0.99]" : "border-dashed border-slate-200 bg-slate-50/50"}`,
+			children: D.length === 0 ? /* @__PURE__ */ u("span", {
+				className: "text-[12px] text-slate-400 font-medium select-none",
+				children: "Drag a column header here to group your records by that field"
+			}) : /* @__PURE__ */ d("div", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: [/* @__PURE__ */ u("span", {
+					className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1",
+					children: "Grouped By:"
+				}), D.map((e) => /* @__PURE__ */ d("div", {
+					className: "flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-slate-600 animate-in fade-in zoom-in-95 duration-150",
+					children: [/* @__PURE__ */ u("span", { children: f.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ u("button", {
+						onClick: () => B(e),
+						className: "p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors",
+						children: /* @__PURE__ */ u(a, { className: "w-3 h-3" })
+					})]
+				}, e))]
+			})
+		}), /* @__PURE__ */ u("div", {
+			className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
+			children: /* @__PURE__ */ d("table", {
+				className: "w-full caption-bottom text-sm border-collapse table-fixed",
+				children: [/* @__PURE__ */ u("thead", {
+					className: "bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none",
+					children: /* @__PURE__ */ d("tr", {
+						className: "border-b border-slate-100 h-10",
+						children: [
+							D.length > 0 && /* @__PURE__ */ u("th", { className: "w-12 h-12 sticky left-0 z-30 bg-slate-50/90 border-r border-slate-100" }),
+							V.map((e) => {
+								let t = (x[e.key]?.length || 0) > 0, a = T.includes(e.key), o = X(e.key);
+								return /* @__PURE__ */ u("th", {
+									draggable: !0,
+									onDragStart: (t) => I(t, e.key),
+									className: `h-12 text-left align-middle text-slate-500 font-bold text-[12px] px-4 relative cursor-grab active:cursor-grabbing ${o.className} ${a ? "bg-slate-50/90 z-30" : ""} ${e.className || ""}`,
+									style: o.style,
+									children: /* @__PURE__ */ d("div", {
+										className: "flex items-center justify-between gap-1 group/header",
+										children: [
+											/* @__PURE__ */ d("div", {
+												className: "flex items-center gap-1.5 truncate",
+												children: [
+													/* @__PURE__ */ u(n, { className: "w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity" }),
+													/* @__PURE__ */ u("span", {
+														className: "truncate",
+														children: e.header
+													}),
+													e.filterable && /* @__PURE__ */ u("button", {
+														onClick: (t) => {
+															t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
+														},
+														className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${t ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
+														children: "Filter"
+													})
+												]
+											}),
+											/* @__PURE__ */ u("button", {
+												onClick: (t) => {
+													t.stopPropagation(), F(e.key);
+												},
+												className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a ? "text-blue-500 opacity-100" : "text-slate-300"}`,
+												title: a ? "Unpin column" : "Pin column",
+												children: u(a ? i : r, { className: "w-3.5 h-3.5" })
+											}),
+											y === e.key && /* @__PURE__ */ d("div", {
+												ref: N,
+												className: "absolute left-4 top-10 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700",
+												children: [
+													/* @__PURE__ */ u("div", {
+														className: "px-2 pb-2 mb-1 border-b border-slate-100",
+														children: /* @__PURE__ */ u("input", {
+															type: "text",
+															placeholder: "Search values...",
+															value: C,
+															onChange: (e) => w(e.target.value),
+															className: "w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500 font-medium text-slate-600",
+															onClick: (e) => e.stopPropagation()
+														})
+													}),
+													/* @__PURE__ */ u("div", {
+														className: "max-h-40 overflow-y-auto px-2 space-y-1",
+														children: U.length === 0 ? /* @__PURE__ */ u("div", {
+															className: "text-[11px] text-slate-400 p-2 text-center",
+															children: "No results found"
+														}) : U.map((t, n) => /* @__PURE__ */ d("label", {
+															className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
+															children: [/* @__PURE__ */ u("input", {
+																type: "checkbox",
+																className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
+																checked: x[e.key]?.includes(t) || !1,
+																onChange: () => W(e.key, t)
+															}), /* @__PURE__ */ u("span", {
+																className: "truncate",
+																children: String(t)
+															})]
+														}, n))
+													}),
+													t && /* @__PURE__ */ u("div", {
+														className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
+														children: /* @__PURE__ */ u("button", {
+															onClick: () => G(e.key),
+															className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
+															children: "Clear Filter"
+														})
+													})
+												]
+											})
+										]
+									})
+								}, e.key);
+							}),
+							h && /* @__PURE__ */ u("th", {
+								className: "h-12 align-middle font-bold text-slate-500 text-[12px] w-[100px] px-4 text-rightsticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]",
+								children: "Action"
+							})
+						]
+					})
+				}), /* @__PURE__ */ u("tbody", {
+					className: "divide-y divide-slate-100",
+					children: g ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
+						colSpan: V.length + +!!h + +(D.length > 0),
+						className: "p-8 text-center text-slate-400 text-[12px] font-medium",
+						children: "Loading records..."
+					}) }) : Y.length === 0 ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
+						colSpan: V.length + +!!h + +(D.length > 0),
+						className: "p-8 text-center text-slate-400 text-[12px] font-medium",
+						children: "No records found matching criteria."
+					}) }) : Y.map((n, r) => {
+						if (n.isGroupRow) {
+							let i = !!k[n.path], a = f.find((e) => e.key === n.groupKey);
+							return /* @__PURE__ */ d("tr", {
+								className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
+								children: [/* @__PURE__ */ u("td", {
+									className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50/90 border-r border-slate-100",
+									style: { paddingLeft: `${n.depth * 12 + 16}px` },
+									children: /* @__PURE__ */ d("button", {
+										onClick: () => J(n.path),
+										className: "flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5",
+										children: [
+											u(i ? e : t, { className: "w-4 h-4 text-slate-500" }),
+											/* @__PURE__ */ d("span", {
+												className: "text-slate-400 font-normal text-[11px] uppercase tracking-wider",
+												children: [a?.header || n.groupKey, ":"]
+											}),
+											/* @__PURE__ */ u("span", {
+												className: "text-slate-800 font-bold",
+												children: n.groupValue
+											}),
+											/* @__PURE__ */ u("span", {
+												className: "bg-slate-200/70 text-slate-600 font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1",
+												children: n.totalItemsCount
+											})
+										]
+									})
+								}), /* @__PURE__ */ u("td", {
+									colSpan: V.length + +!!h,
+									className: "bg-slate-50/30"
+								})]
+							}, `group-header-${n.path}-${r}`);
+						}
+						return /* @__PURE__ */ d("tr", {
+							className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
+							children: [
+								D.length > 0 && /* @__PURE__ */ u("td", { className: "w-12 bg-white sticky left-0 z-10 border-r border-slate-100" }),
+								V.map((e) => {
+									let t = n[e.key], r = X(e.key), i = T.includes(e.key);
+									return /* @__PURE__ */ u("td", {
+										className: `p-4 align-middle py-1 px-4 transition-colors ${r.className} ${i ? "group-hover:bg-slate-100" : ""} ${e.className || ""}`,
+										style: r.style,
+										children: e.render ? e.render(t, n) : /* @__PURE__ */ u("span", {
+											className: "text-[12px] text-slate-600 font-medium truncate block",
+											children: t
+										})
+									}, e.key);
+								}),
+								h && /* @__PURE__ */ u("td", {
+									className: "p-4 align-middle py-1 px-4 text-right bg-white sticky right-0 z-20 shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80",
+									children: /* @__PURE__ */ u("div", {
+										className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
+										children: h(n)
+									})
+								})
+							]
+						}, P(n));
+					})
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { f as DataTable };

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/src/DataTable.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface ColumnConfig<T> {
+    key: string;
+    header: string;
+    className?: string;
+    render?: (value: any, record: T) => ReactNode;
+    filterable?: boolean;
+    pinned?: boolean;
+}
+interface DataTableProps<T> {
+    columns: ColumnConfig<T>[];
+    data: T[];
+    rowKey: keyof T | ((record: T) => string);
+    actions?: (record: T) => ReactNode;
+    isLoading?: boolean;
+    onPinChange?: (columnKey: string, isPinned: boolean) => void;
+    onGroupChange?: (groupedKeys: string[]) => void;
+}
+export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, onPinChange, onGroupChange }: DataTableProps<T>): import("react").JSX.Element;
+export {};

package/dist/src/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { DataTable } from './DataTable';
2	+ export type { ColumnConfig } from './DataTable';

package/package.json ADDED Viewed

@@ -0,0 +1,55 @@
+{
+  "name": "flexi-datagrid",
+  "version": "1.0.0",
+  "description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/flexi-datagrid.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./index.css": "./dist/flexi-datagrid.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "datagrid",
+    "datatable",
+    "table",
+    "universal",
+    "grid"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^0.440.0 || ^0.450.0 || ^0.460.0 || ^0.470.0"
+  },
+  "devDependencies": {
+    "@plugin-web-update-notification/vite": "latest",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^4.5.0",
+    "lucide-react": "^0.470.0"
+  }
+}