flexi-datagrid 1.2.0 → 1.2.1
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.
- package/dist/flexi-datagrid.css +1 -1
- package/dist/index.es.js +214 -209
- package/dist/index.umd.js +1 -1
- package/package.json +1 -2
package/dist/flexi-datagrid.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
.flexi-root{width:100%;position:relative}.flexi-root>*+*{margin-top:.75rem}.flexi-groupzone{box-sizing:border-box;background-color:#f8fafc80;border:1px dashed #e2e8f0;border-radius:.75rem;align-items:center;gap:.5rem;width:100%;min-height:52px;padding:.5rem 1rem;transition:all .2s;display:flex}.flexi-groupzone--dragover{background-color:#eff6ff80;border:1px solid #3b82f6;transform:scale(.99)}.flexi-groupzone-hint{color:#64748b;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:500}.flexi-groupzone-chips{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.flexi-groupzone-label{text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-right:.25rem;font-size:11px;font-weight:700}.flexi-chip{color:#64748b;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.375rem;padding:.25rem .25rem .25rem .5rem;font-size:12px;font-weight:600;display:flex;box-shadow:0 1px 2px #0000000d}.flexi-chip-remove{border-radius:5px;width:18px;height:18px}.flexi-table-wrap{box-sizing:border-box;background-color:#fff;border:1px solid #f1f5f9;border-radius:.75rem;width:100%;overflow-x:auto;box-shadow:0 1px 2px #0000000d}.flexi-table{caption-side:bottom;border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;font-size:.875rem}.flexi-thead{-webkit-user-select:none;user-select:none;background-color:#f8fafc}.flexi-header-row{border-bottom:1px solid #f1f5f9}.flexi-group-spacer-th{border-right:1px solid #f1f5f9;width:48px}.flexi-th{text-align:center;vertical-align:middle;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;height:48px;padding:0 1rem;font-size:12px;font-weight:700;position:relative}.flexi-th--draggable{cursor:grab}.flexi-th--draggable:active{cursor:grabbing}.flexi-th--pinned{background-color:#f8fafce6}.flexi-th-inner{justify-content:space-between;align-items:center;gap:.25rem;width:100%;display:flex}.flexi-th-label{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:.375rem;width:100%;display:flex;overflow:hidden}.flexi-th-label--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.flexi-th-label--sortable:hover{color:#2563eb}.flexi-th-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.flexi-sort-icon{color:#94a3b8;opacity:0;transition:color .15s,opacity .15s}.flexi-sort-icon--active{color:#2563eb;opacity:1}.flexi-th-inner:hover .flexi-sort-icon{opacity:1}.flexi-th-actions{align-items:center;gap:2px;display:flex}.flexi-icon-btn{color:#64748b;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;margin:0;padding:0;transition:background-color .15s,color .15s,transform .1s;display:inline-flex}.flexi-icon-btn:hover{color:#334155;background-color:#e2e8f0}.flexi-icon-btn:active{background-color:#cbd5e1;transform:scale(.92)}.flexi-icon-btn:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-filter-btn{color:#64748b;opacity:0}.flexi-filter-btn--active{color:#2563eb;opacity:1}.flexi-filter-btn--active:hover{color:#2563eb;background-color:#dbeafe}.flexi-pin-btn{color:#cbd5e1;opacity:0}.flexi-pin-btn--pinned{color:#3b82f6;opacity:1}.flexi-pin-btn--pinned:hover{color:#2563eb;background-color:#dbeafe}.flexi-th-inner:hover .flexi-filter-btn,.flexi-th-inner:hover .flexi-pin-btn{opacity:1}.flexi-actions-th{vertical-align:middle;text-align:right;height:48px;padding:0 1rem;font-size:12px;font-weight:700;box-shadow:-1px 0 #e2e8f0}.flexi-filter-dropdown{color:#334155;text-align:left;pointer-events:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;flex-direction:column;width:13rem;padding:.5rem 0;font-weight:400;display:flex;position:absolute;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.flexi-filter-search{border-bottom:1px solid #f1f5f9;margin-bottom:.25rem;padding:0 .5rem .5rem}.flexi-input{color:#475569;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem .5rem;font-size:12px;font-weight:500}.flexi-input:focus{border-color:#3b82f6;outline:none}.flexi-filter-list{flex-direction:column;gap:.25rem;max-height:10rem;padding:0 .5rem;display:flex;overflow-y:auto}.flexi-filter-empty{color:#64748b;text-align:center;padding:.5rem;font-size:11px}.flexi-filter-option{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25rem;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:12px;display:flex}.flexi-filter-option:hover{background-color:#f8fafc}.flexi-filter-option-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.flexi-checkbox{accent-color:#2563eb;border:1px solid #cbd5e1;border-radius:.25rem;width:.875rem;height:.875rem}.flexi-checkbox:focus{outline-offset:1px;outline:2px solid #3b82f6}.flexi-filter-footer{border-top:1px solid #f1f5f9;justify-content:flex-end;margin-top:.5rem;padding:.25rem .5rem 0;display:flex}.flexi-filter-clear{color:#ef4444;padding:.125rem .5rem;font-size:11px;font-weight:500}.flexi-filter-clear:hover{text-decoration:underline}.flexi-tbody{display:table-row-group}.flexi-tbody tr+tr{border-top:1px solid #f1f5f9}.flexi-empty-cell{text-align:center;color:#64748b;padding:2rem;font-size:12px;font-weight:500}.flexi-group-row{-webkit-user-select:none;user-select:none;background-color:#f8fafc99;transition:background-color .15s}.flexi-group-row:hover{background-color:#f1f5f9cc}.flexi-group-cell{color:#334155;border-right:1px solid #f1f5f9;padding:.75rem 1rem;font-size:12px;font-weight:600}.flexi-group-toggle{text-align:left;border-radius:6px;align-items:center;gap:.375rem;margin:-4px -8px -4px -4px;padding:4px 8px 4px 4px;transition:background-color .15s;display:flex}.flexi-group-toggle:hover{background-color:#e2e8f099}.flexi-group-toggle:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-icon-muted{color:#64748b}.flexi-group-value{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;width:10rem;font-weight:700;overflow:hidden}.flexi-group-count{color:#64748b;background-color:#e2e8f0b3;border-radius:9999px;margin-left:.25rem;padding:.05rem .375rem;font-size:10px;font-weight:500}.flexi-group-filler{background-color:#f8fafc4d}.flexi-row{border-bottom:1px solid #f1f5f9;height:48px;transition:background-color .15s}.flexi-row:hover{background-color:#f8fafccc}.flexi-row-indent-cell{background-color:#fff;border-right:1px solid #f1f5f9;width:48px}.flexi-cell{vertical-align:middle;padding:.25rem 1rem;transition:background-color .15s}.flexi-row:hover .flexi-cell--pinned{background-color:#f1f5f9}.flexi-cell-text{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;display:block;overflow:hidden}.flexi-actions-cell{vertical-align:middle;text-align:right;background-color:#fff;padding:.25rem 1rem;box-shadow:-1px 0 #e2e8f0}.flexi-row:hover .flexi-actions-cell{background-color:#f8fafccc}.flexi-actions-inner{opacity:0;justify-content:flex-end;gap:.25rem;transition:opacity .15s;display:flex}.flexi-row:hover .flexi-actions-inner{opacity:1}.flexi-icon-xs{width:.75rem;height:.75rem}.flexi-icon-sm{width:.875rem;height:.875rem}.flexi-icon-md{width:1rem;height:1rem}.flexi-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0;line-height:normal}.flexi-root input{font:inherit}.flexi-root table{border-collapse:collapse;border-spacing:0}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.es.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronRight as i, Filter as a, Pin as o, PinOff as s, X as c } from "lucide-react";
|
|
2
2
|
import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { jsx as
|
|
3
|
+
import { createPortal as p } from "react-dom";
|
|
4
|
+
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
5
5
|
//#region src/DataTable.tsx
|
|
6
|
-
var
|
|
6
|
+
var g = (e) => {
|
|
7
7
|
let t = [];
|
|
8
8
|
return e.forEach((e) => {
|
|
9
|
-
e.children && e.children.length > 0 ? t.push(...
|
|
9
|
+
e.children && e.children.length > 0 ? t.push(...g(e.children)) : t.push(e);
|
|
10
10
|
}), t;
|
|
11
|
-
};
|
|
12
|
-
function
|
|
13
|
-
let [
|
|
11
|
+
}, _ = (...e) => e.filter(Boolean).join(" ");
|
|
12
|
+
function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy: S = !1, defaultGroupBy: C = [], onPinChange: w, onGroupChange: T, containerStyle: te, tableStyle: ne }) {
|
|
13
|
+
let [E, D] = f(null), [O, k] = f({}), [A, j] = f(""), [M, re] = f(null), N = d(/* @__PURE__ */ new Map()), [P, F] = f(C), [I, L] = f({}), [ie, R] = f(!1), [z, B] = f({
|
|
14
14
|
key: null,
|
|
15
15
|
direction: null
|
|
16
|
-
}),
|
|
16
|
+
}), V = u(() => g(v), [v]), [H, ae] = f(V.filter((e) => e.pinned).map((e) => e.key)), U = u(() => {
|
|
17
17
|
let e = (t) => [...t].sort((e, t) => {
|
|
18
|
-
let n =
|
|
18
|
+
let n = H.includes(e.key), r = H.includes(t.key);
|
|
19
19
|
return n && !r ? -1 : !n && r ? 1 : 0;
|
|
20
20
|
}).map((t) => t.children && t.children.length > 0 ? {
|
|
21
21
|
...t,
|
|
22
22
|
children: e(t.children)
|
|
23
23
|
} : t);
|
|
24
|
-
return e(
|
|
25
|
-
}, [
|
|
26
|
-
let e =
|
|
24
|
+
return e(v);
|
|
25
|
+
}, [v, H]), W = u(() => {
|
|
26
|
+
let e = g(U), t = S ? P : [];
|
|
27
27
|
return e.filter((e) => !t.includes(e.key));
|
|
28
28
|
}, [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
]),
|
|
29
|
+
U,
|
|
30
|
+
P,
|
|
31
|
+
S
|
|
32
|
+
]), G = d(null), K = d(null);
|
|
33
33
|
l(() => {
|
|
34
34
|
function e(e) {
|
|
35
|
-
let t = e.target, n =
|
|
36
|
-
|
|
35
|
+
let t = e.target, n = E ? N.current.get(E) : null;
|
|
36
|
+
K.current && !K.current.contains(t) && !(n && n.contains(t)) && (D(null), j(""));
|
|
37
37
|
}
|
|
38
38
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
39
|
-
}, [
|
|
40
|
-
if (!
|
|
39
|
+
}, [E]), l(() => {
|
|
40
|
+
if (!E) return;
|
|
41
41
|
let e = () => {
|
|
42
|
-
let e =
|
|
42
|
+
let e = N.current.get(E), t = G.current;
|
|
43
43
|
if (!e || !t) return;
|
|
44
44
|
let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
|
|
45
|
-
|
|
45
|
+
re({
|
|
46
46
|
top: n.bottom - r.top + 4,
|
|
47
47
|
left: n.left - r.left
|
|
48
48
|
});
|
|
@@ -50,35 +50,35 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
50
50
|
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
51
51
|
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
52
52
|
};
|
|
53
|
-
}, [
|
|
54
|
-
let
|
|
55
|
-
let t =
|
|
56
|
-
|
|
53
|
+
}, [E]);
|
|
54
|
+
let oe = (e) => typeof b == "function" ? b(e) : String(e[b]), se = (e) => {
|
|
55
|
+
let t = H.includes(e);
|
|
56
|
+
ae(t ? H.filter((t) => t !== e) : [...H, e]), w && w(e, !t);
|
|
57
57
|
}, ce = (e) => {
|
|
58
58
|
let t = "asc";
|
|
59
|
-
|
|
59
|
+
z.key === e && (t = z.direction === "asc" ? "desc" : z.direction === "desc" ? null : "asc"), B({
|
|
60
60
|
key: t ? e : null,
|
|
61
61
|
direction: t
|
|
62
62
|
});
|
|
63
63
|
}, le = (e, t) => {
|
|
64
|
-
|
|
64
|
+
S && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
|
|
65
65
|
}, ue = (e) => {
|
|
66
|
-
e.preventDefault(),
|
|
66
|
+
e.preventDefault(), R(!1);
|
|
67
67
|
let t = e.dataTransfer.getData("text/plain");
|
|
68
|
-
if (t && !
|
|
69
|
-
let e = [...
|
|
70
|
-
|
|
68
|
+
if (t && !P.includes(t)) {
|
|
69
|
+
let e = [...P, t];
|
|
70
|
+
F(e), T && T(e);
|
|
71
71
|
}
|
|
72
72
|
}, de = (e) => {
|
|
73
|
-
let t =
|
|
74
|
-
|
|
75
|
-
},
|
|
73
|
+
let t = P.filter((t) => t !== e);
|
|
74
|
+
F(t), L({}), T && T(t);
|
|
75
|
+
}, q = u(() => {
|
|
76
76
|
let e = (t) => {
|
|
77
77
|
let n = 0;
|
|
78
78
|
return t.forEach((t) => {
|
|
79
79
|
n = t.children && t.children.length > 0 ? Math.max(n, 1 + e(t.children)) : Math.max(n, 1);
|
|
80
80
|
}), n;
|
|
81
|
-
}, t = e(
|
|
81
|
+
}, t = e(U), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? P.includes(e.key) && S ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = S ? P : [], a = (e, o) => {
|
|
82
82
|
e.forEach((e) => {
|
|
83
83
|
if (i.includes(e.key)) return;
|
|
84
84
|
let s = r(e);
|
|
@@ -93,55 +93,55 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
93
93
|
}));
|
|
94
94
|
});
|
|
95
95
|
};
|
|
96
|
-
return a(
|
|
96
|
+
return a(U, 0), n.filter((e) => e.length > 0);
|
|
97
97
|
}, [
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
]),
|
|
98
|
+
U,
|
|
99
|
+
P,
|
|
100
|
+
S
|
|
101
|
+
]), fe = u(() => {
|
|
102
102
|
let e = {}, t = 0;
|
|
103
|
-
return
|
|
104
|
-
if (
|
|
103
|
+
return S && P.length > 0 && (t += 48), W.forEach((n) => {
|
|
104
|
+
if (H.includes(n.key)) {
|
|
105
105
|
e[n.key] = t;
|
|
106
106
|
let r = n.style?.width || n.headerStyle?.width || "150px";
|
|
107
107
|
t += typeof r == "number" ? r : parseInt(String(r), 10) || 150;
|
|
108
108
|
}
|
|
109
109
|
}), e;
|
|
110
110
|
}, [
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
]),
|
|
116
|
-
|
|
111
|
+
W,
|
|
112
|
+
H,
|
|
113
|
+
P,
|
|
114
|
+
S
|
|
115
|
+
]), pe = (e, t) => {
|
|
116
|
+
k((n) => {
|
|
117
117
|
let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
|
|
118
118
|
...n,
|
|
119
119
|
[e]: i
|
|
120
120
|
};
|
|
121
121
|
return a[e].length === 0 && delete a[e], a;
|
|
122
122
|
});
|
|
123
|
-
},
|
|
124
|
-
|
|
123
|
+
}, me = (e) => {
|
|
124
|
+
k((t) => {
|
|
125
125
|
let n = { ...t };
|
|
126
126
|
return delete n[e], n;
|
|
127
127
|
});
|
|
128
128
|
}, J = u(() => {
|
|
129
|
-
if (!
|
|
130
|
-
let e =
|
|
131
|
-
return
|
|
129
|
+
if (!E) return [];
|
|
130
|
+
let e = V.find((e) => e.key === E), t = y.map((t) => e?.getValue ? e.getValue(t) : t[E]), n = Array.from(new Set(t)).filter((e) => e != null);
|
|
131
|
+
return A.trim() ? n.filter((e) => String(e).toLowerCase().includes(A.toLowerCase())) : n;
|
|
132
132
|
}, [
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
y,
|
|
134
|
+
E,
|
|
135
|
+
A,
|
|
136
|
+
V
|
|
137
137
|
]), Y = u(() => {
|
|
138
|
-
let e =
|
|
138
|
+
let e = y.filter((e) => Object.entries(O).every(([t, n]) => {
|
|
139
139
|
if (!n || n.length === 0) return !0;
|
|
140
|
-
let r =
|
|
140
|
+
let r = V.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
|
|
141
141
|
return n.includes(i);
|
|
142
142
|
}));
|
|
143
|
-
if (
|
|
144
|
-
let { key: t, direction: n } =
|
|
143
|
+
if (z.key && z.direction) {
|
|
144
|
+
let { key: t, direction: n } = z, r = V.find((e) => e.key === t);
|
|
145
145
|
e = [...e].sort((e, i) => {
|
|
146
146
|
let a = r?.getValue ? r.getValue(e) : e[t], o = r?.getValue ? r.getValue(i) : i[t];
|
|
147
147
|
if (a === o) return 0;
|
|
@@ -156,15 +156,15 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
156
156
|
}
|
|
157
157
|
return e;
|
|
158
158
|
}, [
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
159
|
+
y,
|
|
160
|
+
O,
|
|
161
|
+
z,
|
|
162
|
+
V
|
|
163
163
|
]), X = u(() => {
|
|
164
|
-
if (!
|
|
164
|
+
if (!S || P.length === 0) return Y;
|
|
165
165
|
let e = (t, n, r = "") => {
|
|
166
|
-
if (n >=
|
|
167
|
-
let i =
|
|
166
|
+
if (n >= P.length) return t;
|
|
167
|
+
let i = P[n], a = V.find((e) => e.key === i), o = {};
|
|
168
168
|
return t.forEach((e) => {
|
|
169
169
|
let t = a?.getValue ? a.getValue(e) : e[i], n = String(t ?? "N/A");
|
|
170
170
|
o[n] || (o[n] = []), o[n].push(e);
|
|
@@ -184,11 +184,11 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
184
184
|
return e(Y, 0);
|
|
185
185
|
}, [
|
|
186
186
|
Y,
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
]),
|
|
191
|
-
|
|
187
|
+
P,
|
|
188
|
+
S,
|
|
189
|
+
V
|
|
190
|
+
]), he = (e) => {
|
|
191
|
+
L((t) => {
|
|
192
192
|
let n = t[e] !== !1;
|
|
193
193
|
return {
|
|
194
194
|
...t,
|
|
@@ -196,73 +196,74 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
196
196
|
};
|
|
197
197
|
});
|
|
198
198
|
}, Z = u(() => {
|
|
199
|
-
if (!
|
|
199
|
+
if (!S || P.length === 0) return X;
|
|
200
200
|
let e = [], t = (n) => {
|
|
201
201
|
n.forEach((n) => {
|
|
202
|
-
n.isGroupRow ? (e.push(n),
|
|
202
|
+
n.isGroupRow ? (e.push(n), I[n.path] !== !1 && t(n.children)) : e.push(n);
|
|
203
203
|
});
|
|
204
204
|
};
|
|
205
205
|
return t(X), e;
|
|
206
206
|
}, [
|
|
207
207
|
X,
|
|
208
|
+
I,
|
|
208
209
|
P,
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
]), Q = (e, t = !1, n) => z.includes(e) ? {
|
|
210
|
+
S
|
|
211
|
+
]), Q = (e, t = !1, n) => H.includes(e) ? {
|
|
212
212
|
position: "sticky",
|
|
213
|
-
left: `${
|
|
213
|
+
left: `${fe[e]}px`,
|
|
214
214
|
zIndex: t ? 30 : 20,
|
|
215
215
|
backgroundColor: "#fff",
|
|
216
216
|
boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)",
|
|
217
217
|
...n
|
|
218
|
-
} : n || {}, $ =
|
|
219
|
-
return /* @__PURE__ */
|
|
220
|
-
ref:
|
|
221
|
-
className: "
|
|
222
|
-
children: [
|
|
218
|
+
} : n || {}, $ = W.length + +!!x + (S && P.length > 0 ? 1 : 0);
|
|
219
|
+
return /* @__PURE__ */ h("div", {
|
|
220
|
+
ref: G,
|
|
221
|
+
className: "flexi-root",
|
|
222
|
+
children: [S && /* @__PURE__ */ m("div", {
|
|
223
223
|
onDragOver: (e) => {
|
|
224
|
-
e.preventDefault(),
|
|
224
|
+
e.preventDefault(), R(!0);
|
|
225
225
|
},
|
|
226
|
-
onDragLeave: () =>
|
|
226
|
+
onDragLeave: () => R(!1),
|
|
227
227
|
onDrop: ue,
|
|
228
|
-
className:
|
|
229
|
-
children:
|
|
230
|
-
className: "
|
|
228
|
+
className: _("flexi-groupzone", ie && "flexi-groupzone--dragover"),
|
|
229
|
+
children: P.length === 0 ? /* @__PURE__ */ m("span", {
|
|
230
|
+
className: "flexi-groupzone-hint",
|
|
231
231
|
children: "Drag a column header here to group your records by that field"
|
|
232
|
-
}) : /* @__PURE__ */
|
|
233
|
-
className: "
|
|
234
|
-
children: [/* @__PURE__ */
|
|
235
|
-
className: "
|
|
232
|
+
}) : /* @__PURE__ */ h("div", {
|
|
233
|
+
className: "flexi-groupzone-chips",
|
|
234
|
+
children: [/* @__PURE__ */ m("span", {
|
|
235
|
+
className: "flexi-groupzone-label",
|
|
236
236
|
children: "Grouped By:"
|
|
237
|
-
}),
|
|
238
|
-
className: "
|
|
239
|
-
children: [/* @__PURE__ */
|
|
237
|
+
}), P.map((e) => /* @__PURE__ */ h("div", {
|
|
238
|
+
className: "flexi-chip",
|
|
239
|
+
children: [/* @__PURE__ */ m("span", { children: V.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ m("button", {
|
|
240
|
+
type: "button",
|
|
240
241
|
onClick: () => de(e),
|
|
241
|
-
className: "
|
|
242
|
-
children: /* @__PURE__ */
|
|
242
|
+
className: "flexi-icon-btn flexi-chip-remove",
|
|
243
|
+
children: /* @__PURE__ */ m(c, { className: "flexi-icon-xs" })
|
|
243
244
|
})]
|
|
244
245
|
}, e))]
|
|
245
246
|
})
|
|
246
|
-
}), /* @__PURE__ */
|
|
247
|
-
className: "
|
|
248
|
-
style:
|
|
249
|
-
children: /* @__PURE__ */
|
|
250
|
-
className: "
|
|
251
|
-
style:
|
|
247
|
+
}), /* @__PURE__ */ m("div", {
|
|
248
|
+
className: "flexi-table-wrap",
|
|
249
|
+
style: te,
|
|
250
|
+
children: /* @__PURE__ */ h("table", {
|
|
251
|
+
className: "flexi-table",
|
|
252
|
+
style: ne,
|
|
252
253
|
children: [
|
|
253
|
-
/* @__PURE__ */
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
254
|
+
/* @__PURE__ */ h("colgroup", { children: [
|
|
255
|
+
S && P.length > 0 && /* @__PURE__ */ m("col", { style: { width: "48px" } }),
|
|
256
|
+
W.map((e) => /* @__PURE__ */ m("col", { style: e.style }, e.key)),
|
|
257
|
+
x && /* @__PURE__ */ m("col", { style: { width: "100px" } })
|
|
257
258
|
] }),
|
|
258
|
-
/* @__PURE__ */
|
|
259
|
-
className: "
|
|
260
|
-
children:
|
|
261
|
-
className: "
|
|
259
|
+
/* @__PURE__ */ m("thead", {
|
|
260
|
+
className: "flexi-thead",
|
|
261
|
+
children: q.map((r, i) => /* @__PURE__ */ h("tr", {
|
|
262
|
+
className: "flexi-header-row",
|
|
262
263
|
children: [
|
|
263
|
-
i === 0 &&
|
|
264
|
-
rowSpan:
|
|
265
|
-
className: "
|
|
264
|
+
i === 0 && S && P.length > 0 && /* @__PURE__ */ m("th", {
|
|
265
|
+
rowSpan: q.length,
|
|
266
|
+
className: "flexi-group-spacer-th",
|
|
266
267
|
style: {
|
|
267
268
|
position: "sticky",
|
|
268
269
|
left: 0,
|
|
@@ -271,105 +272,108 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
271
272
|
}
|
|
272
273
|
}),
|
|
273
274
|
r.map(({ col: r, rowSpan: i, colSpan: c }) => {
|
|
274
|
-
let l = (
|
|
275
|
-
return /* @__PURE__ */
|
|
275
|
+
let l = (O[r.key]?.length || 0) > 0, u = H.includes(r.key), d = Q(r.key, !0, r.headerStyle), f = !r.children || r.children.length === 0, g = z.key === r.key, v = !!(S && f);
|
|
276
|
+
return /* @__PURE__ */ m("th", {
|
|
276
277
|
rowSpan: i,
|
|
277
278
|
colSpan: c,
|
|
278
|
-
...
|
|
279
|
+
...v ? {
|
|
279
280
|
draggable: !0,
|
|
280
281
|
onDragStart: (e) => le(e, r.key)
|
|
281
282
|
} : {},
|
|
282
|
-
className:
|
|
283
|
+
className: _("flexi-th", v && "flexi-th--draggable", u && "flexi-th--pinned", r.className),
|
|
283
284
|
style: d,
|
|
284
|
-
children: /* @__PURE__ */
|
|
285
|
-
className: "
|
|
285
|
+
children: /* @__PURE__ */ h("div", {
|
|
286
|
+
className: "flexi-th-inner",
|
|
286
287
|
children: [
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
className:
|
|
288
|
+
/* @__PURE__ */ h("div", {
|
|
289
|
+
className: _("flexi-th-label", r.sortable && f && "flexi-th-label--sortable"),
|
|
289
290
|
onClick: () => r.sortable && f && ce(r.key),
|
|
290
|
-
children: [/* @__PURE__ */
|
|
291
|
-
className: "
|
|
291
|
+
children: [/* @__PURE__ */ m("span", {
|
|
292
|
+
className: "flexi-th-text",
|
|
292
293
|
children: r.header
|
|
293
|
-
}), f && r.sortable && /* @__PURE__ */
|
|
294
|
-
className:
|
|
295
|
-
children:
|
|
294
|
+
}), f && r.sortable && /* @__PURE__ */ m("span", {
|
|
295
|
+
className: _("flexi-sort-icon", g && "flexi-sort-icon--active"),
|
|
296
|
+
children: g && z.direction === "asc" ? /* @__PURE__ */ m(t, { className: "flexi-icon-sm" }) : g && z.direction === "desc" ? /* @__PURE__ */ m(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ m(n, { className: "flexi-icon-sm" })
|
|
296
297
|
})]
|
|
297
298
|
}),
|
|
298
|
-
/* @__PURE__ */
|
|
299
|
-
className: "
|
|
300
|
-
children: [f && r.filterable && /* @__PURE__ */
|
|
299
|
+
/* @__PURE__ */ h("div", {
|
|
300
|
+
className: "flexi-th-actions",
|
|
301
|
+
children: [f && r.filterable && /* @__PURE__ */ m("button", {
|
|
302
|
+
type: "button",
|
|
301
303
|
ref: (e) => {
|
|
302
|
-
e ?
|
|
304
|
+
e ? N.current.set(r.key, e) : N.current.delete(r.key);
|
|
303
305
|
},
|
|
304
306
|
onClick: (e) => {
|
|
305
|
-
e.stopPropagation(),
|
|
307
|
+
e.stopPropagation(), j(""), D(E === r.key ? null : r.key);
|
|
306
308
|
},
|
|
307
|
-
className:
|
|
308
|
-
children: /* @__PURE__ */
|
|
309
|
-
}), f && /* @__PURE__ */
|
|
309
|
+
className: _("flexi-icon-btn", "flexi-filter-btn", l && "flexi-filter-btn--active"),
|
|
310
|
+
children: /* @__PURE__ */ m(a, { className: "flexi-icon-sm" })
|
|
311
|
+
}), f && /* @__PURE__ */ m("button", {
|
|
312
|
+
type: "button",
|
|
310
313
|
onClick: (e) => {
|
|
311
|
-
e.stopPropagation(),
|
|
314
|
+
e.stopPropagation(), se(r.key);
|
|
312
315
|
},
|
|
313
|
-
className:
|
|
316
|
+
className: _("flexi-icon-btn", "flexi-pin-btn", u && "flexi-pin-btn--pinned"),
|
|
314
317
|
title: u ? "Unpin column" : "Pin column",
|
|
315
|
-
children:
|
|
318
|
+
children: m(u ? s : o, { className: "flexi-icon-sm" })
|
|
316
319
|
})]
|
|
317
320
|
}),
|
|
318
|
-
|
|
319
|
-
ref:
|
|
320
|
-
className: "
|
|
321
|
+
E === r.key && f && M && G.current && p(/* @__PURE__ */ h("div", {
|
|
322
|
+
ref: K,
|
|
323
|
+
className: "flexi-filter-dropdown",
|
|
321
324
|
style: {
|
|
322
|
-
top:
|
|
323
|
-
left:
|
|
325
|
+
top: M.top,
|
|
326
|
+
left: M.left,
|
|
324
327
|
zIndex: 9999
|
|
325
328
|
},
|
|
326
329
|
children: [
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
className: "
|
|
329
|
-
children: /* @__PURE__ */
|
|
330
|
+
/* @__PURE__ */ m("div", {
|
|
331
|
+
className: "flexi-filter-search",
|
|
332
|
+
children: /* @__PURE__ */ m("input", {
|
|
330
333
|
type: "text",
|
|
331
334
|
placeholder: "Search values...",
|
|
332
|
-
value:
|
|
333
|
-
onChange: (e) =>
|
|
334
|
-
className: "
|
|
335
|
+
value: A,
|
|
336
|
+
onChange: (e) => j(e.target.value),
|
|
337
|
+
className: "flexi-input",
|
|
335
338
|
onClick: (e) => e.stopPropagation()
|
|
336
339
|
})
|
|
337
340
|
}),
|
|
338
|
-
/* @__PURE__ */
|
|
339
|
-
className: "
|
|
340
|
-
children: J.length === 0 ? /* @__PURE__ */
|
|
341
|
-
className: "
|
|
341
|
+
/* @__PURE__ */ m("div", {
|
|
342
|
+
className: "flexi-filter-list",
|
|
343
|
+
children: J.length === 0 ? /* @__PURE__ */ m("div", {
|
|
344
|
+
className: "flexi-filter-empty",
|
|
342
345
|
children: "No results found"
|
|
343
|
-
}) : J.map((e, t) => /* @__PURE__ */
|
|
344
|
-
className: "
|
|
345
|
-
children: [/* @__PURE__ */
|
|
346
|
+
}) : J.map((e, t) => /* @__PURE__ */ h("label", {
|
|
347
|
+
className: "flexi-filter-option",
|
|
348
|
+
children: [/* @__PURE__ */ m("input", {
|
|
346
349
|
type: "checkbox",
|
|
347
|
-
className: "
|
|
348
|
-
checked:
|
|
349
|
-
onChange: () =>
|
|
350
|
-
}), /* @__PURE__ */
|
|
351
|
-
className: "
|
|
350
|
+
className: "flexi-checkbox",
|
|
351
|
+
checked: O[r.key]?.includes(e) || !1,
|
|
352
|
+
onChange: () => pe(r.key, e)
|
|
353
|
+
}), /* @__PURE__ */ m("span", {
|
|
354
|
+
className: "flexi-filter-option-text",
|
|
352
355
|
children: String(e)
|
|
353
356
|
})]
|
|
354
357
|
}, t))
|
|
355
358
|
}),
|
|
356
|
-
l && /* @__PURE__ */
|
|
357
|
-
className: "
|
|
358
|
-
children: /* @__PURE__ */
|
|
359
|
-
|
|
360
|
-
|
|
359
|
+
l && /* @__PURE__ */ m("div", {
|
|
360
|
+
className: "flexi-filter-footer",
|
|
361
|
+
children: /* @__PURE__ */ m("button", {
|
|
362
|
+
type: "button",
|
|
363
|
+
onClick: () => me(r.key),
|
|
364
|
+
className: "flexi-filter-clear",
|
|
361
365
|
children: "Clear Filter"
|
|
362
366
|
})
|
|
363
367
|
})
|
|
364
368
|
]
|
|
365
|
-
}),
|
|
369
|
+
}), G.current)
|
|
366
370
|
]
|
|
367
371
|
})
|
|
368
372
|
}, r.key);
|
|
369
373
|
}),
|
|
370
|
-
i === 0 &&
|
|
371
|
-
rowSpan:
|
|
372
|
-
className: "
|
|
374
|
+
i === 0 && x && /* @__PURE__ */ m("th", {
|
|
375
|
+
rowSpan: q.length,
|
|
376
|
+
className: "flexi-actions-th",
|
|
373
377
|
style: {
|
|
374
378
|
position: "sticky",
|
|
375
379
|
right: 0,
|
|
@@ -380,23 +384,23 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
380
384
|
]
|
|
381
385
|
}, `header-row-${i}`))
|
|
382
386
|
}),
|
|
383
|
-
/* @__PURE__ */
|
|
384
|
-
className: "
|
|
385
|
-
children:
|
|
387
|
+
/* @__PURE__ */ m("tbody", {
|
|
388
|
+
className: "flexi-tbody",
|
|
389
|
+
children: ee ? /* @__PURE__ */ m("tr", { children: /* @__PURE__ */ m("td", {
|
|
386
390
|
colSpan: $,
|
|
387
|
-
className: "
|
|
391
|
+
className: "flexi-empty-cell",
|
|
388
392
|
children: "Loading records..."
|
|
389
|
-
}) }) : Z.length === 0 ? /* @__PURE__ */
|
|
393
|
+
}) }) : Z.length === 0 ? /* @__PURE__ */ m("tr", { children: /* @__PURE__ */ m("td", {
|
|
390
394
|
colSpan: $,
|
|
391
|
-
className: "
|
|
395
|
+
className: "flexi-empty-cell",
|
|
392
396
|
children: "No records found matching criteria."
|
|
393
397
|
}) }) : Z.map((e, t) => {
|
|
394
398
|
if (e.isGroupRow) {
|
|
395
|
-
let n =
|
|
396
|
-
return /* @__PURE__ */
|
|
397
|
-
className: "
|
|
398
|
-
children: [/* @__PURE__ */
|
|
399
|
-
className: "
|
|
399
|
+
let n = I[e.path] !== !1;
|
|
400
|
+
return /* @__PURE__ */ h("tr", {
|
|
401
|
+
className: "flexi-group-row",
|
|
402
|
+
children: [/* @__PURE__ */ m("td", {
|
|
403
|
+
className: "flexi-group-cell",
|
|
400
404
|
style: {
|
|
401
405
|
position: "sticky",
|
|
402
406
|
left: 0,
|
|
@@ -404,63 +408,64 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
404
408
|
backgroundColor: "rgba(248, 250, 252, 0.9)",
|
|
405
409
|
paddingLeft: `${e.depth * 12 + 16}px`
|
|
406
410
|
},
|
|
407
|
-
children: /* @__PURE__ */
|
|
408
|
-
|
|
409
|
-
|
|
411
|
+
children: /* @__PURE__ */ h("button", {
|
|
412
|
+
type: "button",
|
|
413
|
+
onClick: () => he(e.path),
|
|
414
|
+
className: "flexi-group-toggle",
|
|
410
415
|
children: [
|
|
411
|
-
|
|
412
|
-
/* @__PURE__ */
|
|
413
|
-
className: "
|
|
416
|
+
m(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
|
|
417
|
+
/* @__PURE__ */ m("span", {
|
|
418
|
+
className: "flexi-group-value",
|
|
414
419
|
children: e.groupValue
|
|
415
420
|
}),
|
|
416
|
-
/* @__PURE__ */
|
|
417
|
-
className: "
|
|
421
|
+
/* @__PURE__ */ m("span", {
|
|
422
|
+
className: "flexi-group-count",
|
|
418
423
|
children: e.totalItemsCount
|
|
419
424
|
})
|
|
420
425
|
]
|
|
421
426
|
})
|
|
422
|
-
}), /* @__PURE__ */
|
|
427
|
+
}), /* @__PURE__ */ m("td", {
|
|
423
428
|
colSpan: $ - 1,
|
|
424
|
-
className: "
|
|
429
|
+
className: "flexi-group-filler"
|
|
425
430
|
})]
|
|
426
431
|
}, `group-header-${e.path}-${t}`);
|
|
427
432
|
}
|
|
428
|
-
return /* @__PURE__ */
|
|
429
|
-
className: "
|
|
433
|
+
return /* @__PURE__ */ h("tr", {
|
|
434
|
+
className: "flexi-row",
|
|
430
435
|
children: [
|
|
431
|
-
|
|
432
|
-
className: "
|
|
436
|
+
S && P?.length > 0 && /* @__PURE__ */ m("td", {
|
|
437
|
+
className: "flexi-row-indent-cell",
|
|
433
438
|
style: {
|
|
434
439
|
position: "sticky",
|
|
435
440
|
left: 0,
|
|
436
441
|
zIndex: 10
|
|
437
442
|
}
|
|
438
443
|
}),
|
|
439
|
-
|
|
444
|
+
W?.map((t) => {
|
|
440
445
|
let n = e[t.key], r = Q(t.key, !1, t.style);
|
|
441
|
-
return /* @__PURE__ */
|
|
442
|
-
className:
|
|
446
|
+
return /* @__PURE__ */ m("td", {
|
|
447
|
+
className: _("flexi-cell", H.includes(t.key) && "flexi-cell--pinned", t.className),
|
|
443
448
|
style: r,
|
|
444
|
-
children: t.render ? t.render(n, e) : /* @__PURE__ */
|
|
445
|
-
className: "
|
|
449
|
+
children: t.render ? t.render(n, e) : /* @__PURE__ */ m("span", {
|
|
450
|
+
className: "flexi-cell-text",
|
|
446
451
|
children: n
|
|
447
452
|
})
|
|
448
453
|
}, t.key);
|
|
449
454
|
}),
|
|
450
|
-
|
|
451
|
-
className: "
|
|
455
|
+
x && /* @__PURE__ */ m("td", {
|
|
456
|
+
className: "flexi-actions-cell",
|
|
452
457
|
style: {
|
|
453
458
|
position: "sticky",
|
|
454
459
|
right: 0,
|
|
455
460
|
zIndex: 20
|
|
456
461
|
},
|
|
457
|
-
children: /* @__PURE__ */
|
|
458
|
-
className: "
|
|
459
|
-
children:
|
|
462
|
+
children: /* @__PURE__ */ m("div", {
|
|
463
|
+
className: "flexi-actions-inner",
|
|
464
|
+
children: x(e)
|
|
460
465
|
})
|
|
461
466
|
})
|
|
462
467
|
]
|
|
463
|
-
},
|
|
468
|
+
}, oe(e) ?? `row-${t}`);
|
|
464
469
|
})
|
|
465
470
|
})
|
|
466
471
|
]
|
|
@@ -469,4 +474,4 @@ function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy:
|
|
|
469
474
|
});
|
|
470
475
|
}
|
|
471
476
|
//#endregion
|
|
472
|
-
export {
|
|
477
|
+
export { v as DataTable };
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t};function p({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:p,containerStyle:ee,tableStyle:m}){let[h,g]=(0,n.useState)(null),[_,v]=(0,n.useState)({}),[y,b]=(0,n.useState)(``),[x,S]=(0,n.useState)(null),C=(0,n.useRef)(new Map),[w,T]=(0,n.useState)(u),[E,D]=(0,n.useState)({}),[O,k]=(0,n.useState)(!1),[A,te]=(0,n.useState)({key:null,direction:null}),j=(0,n.useMemo)(()=>f(e),[e]),[M,N]=(0,n.useState)(j.filter(e=>e.pinned).map(e=>e.key)),P=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=M.includes(e.key),r=M.includes(t.key);return n&&!r?-1:!n&&r?1:0}).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e);return t(e)},[e,M]),F=(0,n.useMemo)(()=>{let e=f(P),t=l?w:[];return e.filter(e=>!t.includes(e.key))},[P,w,l]),I=(0,n.useRef)(null),L=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=h?C.current.get(h):null;L.current&&!L.current.contains(t)&&!(n&&n.contains(t))&&(g(null),b(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[h]),(0,n.useEffect)(()=>{if(!h)return;let e=()=>{let e=C.current.get(h),t=I.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();S({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[h]);let R=e=>typeof o==`function`?o(e):String(e[o]),z=e=>{let t=M.includes(e);N(t?M.filter(t=>t!==e):[...M,e]),d&&d(e,!t)},B=e=>{let t=`asc`;A.key===e&&(t=A.direction===`asc`?`desc`:A.direction===`desc`?null:`asc`),te({key:t?e:null,direction:t})},V=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},H=e=>{e.preventDefault(),k(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!w.includes(t)){let e=[...w,t];T(e),p&&p(e)}},U=e=>{let t=w.filter(t=>t!==e);T(t),D({}),p&&p(t)},W=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(P),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?w.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?w:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(P,0),n.filter(e=>e.length>0)},[P,w,l]),G=(0,n.useMemo)(()=>{let e={},t=0;return l&&w.length>0&&(t+=48),F.forEach(n=>{if(M.includes(n.key)){e[n.key]=t;let r=n.style?.width||n.headerStyle?.width||`150px`;t+=typeof r==`number`?r:parseInt(String(r),10)||150}}),e},[F,M,w,l]),K=(e,t)=>{v(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})},q=e=>{v(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!h)return[];let e=j.find(e=>e.key===h),t=a.map(t=>e?.getValue?e.getValue(t):t[h]),n=Array.from(new Set(t)).filter(e=>e!=null);return y.trim()?n.filter(e=>String(e).toLowerCase().includes(y.toLowerCase())):n},[a,h,y,j]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(_).every(([t,n])=>{if(!n||n.length===0)return!0;let r=j.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(A.key&&A.direction){let{key:t,direction:n}=A,r=j.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[a,_,A,j]),X=(0,n.useMemo)(()=>{if(!l||w.length===0)return Y;let e=(t,n,r=``)=>{if(n>=w.length)return t;let i=w[n],a=j.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).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(Y,0)},[Y,w,l,j]),ne=e=>{D(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||w.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),E[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,E,w,l]),Q=(e,t=!1,n)=>M.includes(e)?{position:`sticky`,left:`${G[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},$=F.length+ +!!s+(l&&w.length>0?1:0);return(0,i.jsxs)(`div`,{ref:I,className:`w-full space-y-3 relative`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),k(!0)},onDragLeave:()=>k(!1),onDrop:H,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${O?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:w.length===0?(0,i.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium select-none`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,i.jsx)(`span`,{className:`text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1`,children:`Grouped By:`}),w.map(e=>(0,i.jsxs)(`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-muted-foreground`,children:[(0,i.jsx)(`span`,{children:j.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{onClick:()=>U(e),className:`p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors`,children:(0,i.jsx)(t.X,{className:`w-3 h-3`})})]},e))]})}),(0,i.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,style:ee,children:(0,i.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,style:m,children:[(0,i.jsxs)(`colgroup`,{children:[l&&w.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),F.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`bg-slate-50 select-none`,children:W.map((e,n)=>(0,i.jsxs)(`tr`,{className:`border-b border-slate-100`,children:[n===0&&l&&w.length>0&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`w-12 border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(_[e.key]?.length||0)>0,s=M.includes(e.key),c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=A.key===e.key;return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...l&&u?{draggable:!0,onDragStart:t=>V(t,e.key)}:{},className:`h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${l&&u?`cursor-grab active:cursor-grabbing`:``} ${s?`bg-slate-50/90`:``} ${e.className||``}`,style:c,children:(0,i.jsxs)(`div`,{className:`flex items-center gap-1 group/header w-full justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 truncate w-full ${e.sortable&&u?`cursor-pointer select-none hover:text-blue-600`:``}`,onClick:()=>e.sortable&&u&&B(e.key),children:[(0,i.jsx)(`span`,{className:`truncate`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:`text-slate-400 transition-colors ${d?`text-blue-600`:`opacity-0 group-hover/header:opacity-100`}`,children:d&&A.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`w-3.5 h-3.5`}):d&&A.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`w-3.5 h-3.5`}):(0,i.jsx)(t.ArrowUpDown,{className:`w-3.5 h-3.5`})})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{ref:t=>{t?C.current.set(e.key,t):C.current.delete(e.key)},onClick:t=>{t.stopPropagation(),b(``),g(h===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${o?`text-blue-600`:`text-muted-foreground opacity-0 group-hover/header:opacity-100`}`,children:(0,i.jsx)(t.Filter,{className:`w-3.5 h-3.5`})}),u&&(0,i.jsx)(`button`,{onClick:t=>{t.stopPropagation(),z(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${s?`text-blue-500 opacity-100`:`text-slate-300`}`,title:s?`Unpin column`:`Pin column`,children:s?(0,i.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,i.jsx)(t.Pin,{className:`w-3.5 h-3.5`})})]}),h===e.key&&u&&x&&I.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:L,className:`absolute w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700 text-left pointer-events-auto`,style:{top:x.top,left:x.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`px-2 pb-2 mb-1 border-b border-slate-100`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:y,onChange:e=>b(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()})}),(0,i.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:J.length===0?(0,i.jsx)(`div`,{className:`text-[11px] text-muted-foreground p-2 text-center`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5`,checked:_[e.key]?.includes(t)||!1,onChange:()=>K(e.key,t)}),(0,i.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end`,children:(0,i.jsx)(`button`,{onClick:()=>q(e.key),className:`text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5`,children:`Clear Filter`})})]}),I.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`No records found matching criteria.`})}):Z.map((e,n)=>{if(e.isGroupRow){let r=E[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none`,children:[(0,i.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{onClick:()=>ne(e.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:[r?(0,i.jsx)(t.ChevronDown,{className:`w-4 h-4 text-slate-500`}):(0,i.jsx)(t.ChevronRight,{className:`w-4 h-4 text-slate-500`}),(0,i.jsx)(`span`,{className:`text-slate-800 font-bold w-40 truncate`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`bg-slate-50/30`})]},`group-header-${e.path}-${n}`)}return(0,i.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[l&&w?.length>0&&(0,i.jsx)(`td`,{className:`w-12 bg-white border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:10}}),F?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 transition-colors ${M.includes(t.key)?`group-hover:bg-slate-100`:``} ${t.className||``}`,style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium truncate block`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,style:{position:`sticky`,right:0,zIndex:20},children:(0,i.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150`,children:s(e)})})]},R(e)??`row-${n}`)})})]})})]})}e.DataTable=p});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `);function m({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:m,containerStyle:h,tableStyle:g}){let[_,v]=(0,n.useState)(null),[y,b]=(0,n.useState)({}),[x,S]=(0,n.useState)(``),[C,w]=(0,n.useState)(null),T=(0,n.useRef)(new Map),[E,D]=(0,n.useState)(u),[O,k]=(0,n.useState)({}),[A,j]=(0,n.useState)(!1),[M,N]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,I]=(0,n.useState)(P.filter(e=>e.pinned).map(e=>e.key)),L=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=F.includes(e.key),r=F.includes(t.key);return n&&!r?-1:!n&&r?1:0}).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e);return t(e)},[e,F]),R=(0,n.useMemo)(()=>{let e=f(L),t=l?E:[];return e.filter(e=>!t.includes(e.key))},[L,E,l]),z=(0,n.useRef)(null),B=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=_?T.current.get(_):null;B.current&&!B.current.contains(t)&&!(n&&n.contains(t))&&(v(null),S(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_]),(0,n.useEffect)(()=>{if(!_)return;let e=()=>{let e=T.current.get(_),t=z.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();w({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[_]);let V=e=>typeof o==`function`?o(e):String(e[o]),H=e=>{let t=F.includes(e);I(t?F.filter(t=>t!==e):[...F,e]),d&&d(e,!t)},U=e=>{let t=`asc`;M.key===e&&(t=M.direction===`asc`?`desc`:M.direction===`desc`?null:`asc`),N({key:t?e:null,direction:t})},W=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},G=e=>{e.preventDefault(),j(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!E.includes(t)){let e=[...E,t];D(e),m&&m(e)}},K=e=>{let t=E.filter(t=>t!==e);D(t),k({}),m&&m(t)},q=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(L),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?E.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?E:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(L,0),n.filter(e=>e.length>0)},[L,E,l]),ee=(0,n.useMemo)(()=>{let e={},t=0;return l&&E.length>0&&(t+=48),R.forEach(n=>{if(F.includes(n.key)){e[n.key]=t;let r=n.style?.width||n.headerStyle?.width||`150px`;t+=typeof r==`number`?r:parseInt(String(r),10)||150}}),e},[R,F,E,l]),te=(e,t)=>{b(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})},ne=e=>{b(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!_)return[];let e=P.find(e=>e.key===_),t=a.map(t=>e?.getValue?e.getValue(t):t[_]),n=Array.from(new Set(t)).filter(e=>e!=null);return x.trim()?n.filter(e=>String(e).toLowerCase().includes(x.toLowerCase())):n},[a,_,x,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(y).every(([t,n])=>{if(!n||n.length===0)return!0;let r=P.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(M.key&&M.direction){let{key:t,direction:n}=M,r=P.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[a,y,M,P]),X=(0,n.useMemo)(()=>{if(!l||E.length===0)return Y;let e=(t,n,r=``)=>{if(n>=E.length)return t;let i=E[n],a=P.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).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(Y,0)},[Y,E,l,P]),re=e=>{k(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||E.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),O[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,O,E,l]),Q=(e,t=!1,n)=>F.includes(e)?{position:`sticky`,left:`${ee[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},$=R.length+ +!!s+(l&&E.length>0?1:0);return(0,i.jsxs)(`div`,{ref:z,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),j(!0)},onDragLeave:()=>j(!1),onDrop:G,className:p(`flexi-groupzone`,A&&`flexi-groupzone--dragover`),children:E.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),E.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:P.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>K(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{className:`flexi-table-wrap`,style:h,children:(0,i.jsxs)(`table`,{className:`flexi-table`,style:g,children:[(0,i.jsxs)(`colgroup`,{children:[l&&E.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),R.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:q.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&E.length>0&&(0,i.jsx)(`th`,{rowSpan:q.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(y[e.key]?.length||0)>0,s=F.includes(e.key),c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=M.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>W(t,e.key)}:{},className:p(`flexi-th`,f&&`flexi-th--draggable`,s&&`flexi-th--pinned`,e.className),style:c,children:(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,e.sortable&&u&&`flexi-th-label--sortable`),onClick:()=>e.sortable&&u&&U(e.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,d&&`flexi-sort-icon--active`),children:d&&M.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&M.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:t=>{t?T.current.set(e.key,t):T.current.delete(e.key)},onClick:t=>{t.stopPropagation(),S(``),v(_===e.key?null:e.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,o&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),H(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:s?`Unpin column`:`Pin column`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),_===e.key&&u&&C&&z.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:B,className:`flexi-filter-dropdown`,style:{top:C.top,left:C.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:x,onChange:e=>S(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:J.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:y[e.key]?.includes(t)||!1,onChange:()=>te(e.key,t)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>ne(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),z.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:q.length,className:`flexi-actions-th`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):Z.map((e,n)=>{if(e.isGroupRow){let r=O[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>re(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&E?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),R?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,F.includes(t.key)&&`flexi-cell--pinned`,t.className),style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0,zIndex:20},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},V(e)??`row-${n}`)})})]})})]})}e.DataTable=m});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flexi-datagrid",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.umd.js",
|
|
@@ -46,7 +46,6 @@
|
|
|
46
46
|
"@vitejs/plugin-react": "^4.3.4",
|
|
47
47
|
"autoprefixer": "^10.4.20",
|
|
48
48
|
"postcss": "^8.5.1",
|
|
49
|
-
"tailwindcss": "^3.4.17",
|
|
50
49
|
"typescript": "^6.0.3",
|
|
51
50
|
"vite": "^8.0.16",
|
|
52
51
|
"vite-plugin-dts": "^4.5.0",
|