@stereopt/data-table 0.1.9 → 0.1.11
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/index.cjs +525 -33
- package/dist/index.d.cts +12 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +521 -33
- package/dist/styles.css +302 -52
- package/package.json +6 -3
package/dist/index.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __export = (target, all) => {
|
|
3
|
+
for (var name in all)
|
|
4
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
5
|
+
};
|
|
6
|
+
|
|
1
7
|
// src/lib/utils.ts
|
|
2
8
|
import { clsx } from "clsx";
|
|
3
9
|
import { twMerge } from "tailwind-merge";
|
|
@@ -84,6 +90,454 @@ function TableCell({ className, ...props }) {
|
|
|
84
90
|
);
|
|
85
91
|
}
|
|
86
92
|
|
|
93
|
+
// src/components/ui/input.tsx
|
|
94
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
95
|
+
function Input({ className, type, ...props }) {
|
|
96
|
+
return /* @__PURE__ */ jsx2(
|
|
97
|
+
"input",
|
|
98
|
+
{
|
|
99
|
+
className: cn(
|
|
100
|
+
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
101
|
+
className
|
|
102
|
+
),
|
|
103
|
+
"data-slot": "input",
|
|
104
|
+
type,
|
|
105
|
+
...props
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// src/dataTable/DataTableControls.tsx
|
|
111
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
112
|
+
var DataTableControls = ({
|
|
113
|
+
table,
|
|
114
|
+
search,
|
|
115
|
+
filters
|
|
116
|
+
}) => {
|
|
117
|
+
const value = table.getState().globalFilter ?? "";
|
|
118
|
+
const setValue = table.setGlobalFilter;
|
|
119
|
+
if (!filters || !search) return null;
|
|
120
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pb-4", children: [
|
|
121
|
+
search && /* @__PURE__ */ jsx3(
|
|
122
|
+
Input,
|
|
123
|
+
{
|
|
124
|
+
className: "max-w-sm",
|
|
125
|
+
onChange: (event) => setValue(() => event.target.value),
|
|
126
|
+
placeholder: search?.placeholder,
|
|
127
|
+
value
|
|
128
|
+
}
|
|
129
|
+
),
|
|
130
|
+
filters?.map((filter) => {
|
|
131
|
+
return null;
|
|
132
|
+
})
|
|
133
|
+
] });
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
// src/components/ui/button.tsx
|
|
137
|
+
import { cva } from "class-variance-authority";
|
|
138
|
+
|
|
139
|
+
// node_modules/@radix-ui/react-slot/dist/index.mjs
|
|
140
|
+
var dist_exports = {};
|
|
141
|
+
__export(dist_exports, {
|
|
142
|
+
Root: () => Slot,
|
|
143
|
+
Slot: () => Slot,
|
|
144
|
+
Slottable: () => Slottable,
|
|
145
|
+
createSlot: () => createSlot,
|
|
146
|
+
createSlottable: () => createSlottable
|
|
147
|
+
});
|
|
148
|
+
import * as React2 from "react";
|
|
149
|
+
|
|
150
|
+
// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
|
|
151
|
+
import * as React from "react";
|
|
152
|
+
function setRef(ref, value) {
|
|
153
|
+
if (typeof ref === "function") {
|
|
154
|
+
return ref(value);
|
|
155
|
+
} else if (ref !== null && ref !== void 0) {
|
|
156
|
+
ref.current = value;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
function composeRefs(...refs) {
|
|
160
|
+
return (node) => {
|
|
161
|
+
let hasCleanup = false;
|
|
162
|
+
const cleanups = refs.map((ref) => {
|
|
163
|
+
const cleanup = setRef(ref, node);
|
|
164
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
165
|
+
hasCleanup = true;
|
|
166
|
+
}
|
|
167
|
+
return cleanup;
|
|
168
|
+
});
|
|
169
|
+
if (hasCleanup) {
|
|
170
|
+
return () => {
|
|
171
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
172
|
+
const cleanup = cleanups[i];
|
|
173
|
+
if (typeof cleanup == "function") {
|
|
174
|
+
cleanup();
|
|
175
|
+
} else {
|
|
176
|
+
setRef(refs[i], null);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// node_modules/@radix-ui/react-slot/dist/index.mjs
|
|
185
|
+
import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
|
|
186
|
+
// @__NO_SIDE_EFFECTS__
|
|
187
|
+
function createSlot(ownerName) {
|
|
188
|
+
const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
|
|
189
|
+
const Slot2 = React2.forwardRef((props, forwardedRef) => {
|
|
190
|
+
const { children, ...slotProps } = props;
|
|
191
|
+
const childrenArray = React2.Children.toArray(children);
|
|
192
|
+
const slottable = childrenArray.find(isSlottable);
|
|
193
|
+
if (slottable) {
|
|
194
|
+
const newElement = slottable.props.children;
|
|
195
|
+
const newChildren = childrenArray.map((child) => {
|
|
196
|
+
if (child === slottable) {
|
|
197
|
+
if (React2.Children.count(newElement) > 1) return React2.Children.only(null);
|
|
198
|
+
return React2.isValidElement(newElement) ? newElement.props.children : null;
|
|
199
|
+
} else {
|
|
200
|
+
return child;
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
return /* @__PURE__ */ jsx4(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
|
|
204
|
+
}
|
|
205
|
+
return /* @__PURE__ */ jsx4(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
|
206
|
+
});
|
|
207
|
+
Slot2.displayName = `${ownerName}.Slot`;
|
|
208
|
+
return Slot2;
|
|
209
|
+
}
|
|
210
|
+
var Slot = /* @__PURE__ */ createSlot("Slot");
|
|
211
|
+
// @__NO_SIDE_EFFECTS__
|
|
212
|
+
function createSlotClone(ownerName) {
|
|
213
|
+
const SlotClone = React2.forwardRef((props, forwardedRef) => {
|
|
214
|
+
const { children, ...slotProps } = props;
|
|
215
|
+
if (React2.isValidElement(children)) {
|
|
216
|
+
const childrenRef = getElementRef(children);
|
|
217
|
+
const props2 = mergeProps(slotProps, children.props);
|
|
218
|
+
if (children.type !== React2.Fragment) {
|
|
219
|
+
props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
|
|
220
|
+
}
|
|
221
|
+
return React2.cloneElement(children, props2);
|
|
222
|
+
}
|
|
223
|
+
return React2.Children.count(children) > 1 ? React2.Children.only(null) : null;
|
|
224
|
+
});
|
|
225
|
+
SlotClone.displayName = `${ownerName}.SlotClone`;
|
|
226
|
+
return SlotClone;
|
|
227
|
+
}
|
|
228
|
+
var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
|
|
229
|
+
// @__NO_SIDE_EFFECTS__
|
|
230
|
+
function createSlottable(ownerName) {
|
|
231
|
+
const Slottable2 = ({ children }) => {
|
|
232
|
+
return /* @__PURE__ */ jsx4(Fragment2, { children });
|
|
233
|
+
};
|
|
234
|
+
Slottable2.displayName = `${ownerName}.Slottable`;
|
|
235
|
+
Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
|
|
236
|
+
return Slottable2;
|
|
237
|
+
}
|
|
238
|
+
var Slottable = /* @__PURE__ */ createSlottable("Slottable");
|
|
239
|
+
function isSlottable(child) {
|
|
240
|
+
return React2.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
|
|
241
|
+
}
|
|
242
|
+
function mergeProps(slotProps, childProps) {
|
|
243
|
+
const overrideProps = { ...childProps };
|
|
244
|
+
for (const propName in childProps) {
|
|
245
|
+
const slotPropValue = slotProps[propName];
|
|
246
|
+
const childPropValue = childProps[propName];
|
|
247
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
|
248
|
+
if (isHandler) {
|
|
249
|
+
if (slotPropValue && childPropValue) {
|
|
250
|
+
overrideProps[propName] = (...args) => {
|
|
251
|
+
const result = childPropValue(...args);
|
|
252
|
+
slotPropValue(...args);
|
|
253
|
+
return result;
|
|
254
|
+
};
|
|
255
|
+
} else if (slotPropValue) {
|
|
256
|
+
overrideProps[propName] = slotPropValue;
|
|
257
|
+
}
|
|
258
|
+
} else if (propName === "style") {
|
|
259
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
260
|
+
} else if (propName === "className") {
|
|
261
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
return { ...slotProps, ...overrideProps };
|
|
265
|
+
}
|
|
266
|
+
function getElementRef(element) {
|
|
267
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
268
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
269
|
+
if (mayWarn) {
|
|
270
|
+
return element.ref;
|
|
271
|
+
}
|
|
272
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
273
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
274
|
+
if (mayWarn) {
|
|
275
|
+
return element.props.ref;
|
|
276
|
+
}
|
|
277
|
+
return element.props.ref || element.ref;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
// src/components/ui/button.tsx
|
|
281
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
282
|
+
var buttonVariants = cva(
|
|
283
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
284
|
+
{
|
|
285
|
+
variants: {
|
|
286
|
+
variant: {
|
|
287
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
288
|
+
outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
289
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
290
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
291
|
+
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
292
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
293
|
+
},
|
|
294
|
+
size: {
|
|
295
|
+
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
296
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
297
|
+
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
298
|
+
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
299
|
+
icon: "size-8",
|
|
300
|
+
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
301
|
+
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
|
302
|
+
"icon-lg": "size-9"
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
defaultVariants: {
|
|
306
|
+
variant: "default",
|
|
307
|
+
size: "default"
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
);
|
|
311
|
+
function Button({
|
|
312
|
+
className,
|
|
313
|
+
variant = "default",
|
|
314
|
+
size = "default",
|
|
315
|
+
asChild = false,
|
|
316
|
+
...props
|
|
317
|
+
}) {
|
|
318
|
+
const Comp = asChild ? dist_exports.Root : "button";
|
|
319
|
+
return /* @__PURE__ */ jsx5(
|
|
320
|
+
Comp,
|
|
321
|
+
{
|
|
322
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
323
|
+
"data-size": size,
|
|
324
|
+
"data-slot": "button",
|
|
325
|
+
"data-variant": variant,
|
|
326
|
+
...props
|
|
327
|
+
}
|
|
328
|
+
);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
332
|
+
import { forwardRef as forwardRef3, createElement as createElement2 } from "react";
|
|
333
|
+
|
|
334
|
+
// node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
|
|
335
|
+
var mergeClasses = (...classes) => classes.filter((className, index, array) => {
|
|
336
|
+
return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
|
|
337
|
+
}).join(" ").trim();
|
|
338
|
+
|
|
339
|
+
// node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
|
|
340
|
+
var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
341
|
+
|
|
342
|
+
// node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
|
|
343
|
+
var toCamelCase = (string) => string.replace(
|
|
344
|
+
/^([A-Z])|[\s-_]+(\w)/g,
|
|
345
|
+
(match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
|
|
346
|
+
);
|
|
347
|
+
|
|
348
|
+
// node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
|
|
349
|
+
var toPascalCase = (string) => {
|
|
350
|
+
const camelCase = toCamelCase(string);
|
|
351
|
+
return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
// node_modules/lucide-react/dist/esm/Icon.js
|
|
355
|
+
import { forwardRef as forwardRef2, createElement } from "react";
|
|
356
|
+
|
|
357
|
+
// node_modules/lucide-react/dist/esm/defaultAttributes.js
|
|
358
|
+
var defaultAttributes = {
|
|
359
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
360
|
+
width: 24,
|
|
361
|
+
height: 24,
|
|
362
|
+
viewBox: "0 0 24 24",
|
|
363
|
+
fill: "none",
|
|
364
|
+
stroke: "currentColor",
|
|
365
|
+
strokeWidth: 2,
|
|
366
|
+
strokeLinecap: "round",
|
|
367
|
+
strokeLinejoin: "round"
|
|
368
|
+
};
|
|
369
|
+
|
|
370
|
+
// node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
|
|
371
|
+
var hasA11yProp = (props) => {
|
|
372
|
+
for (const prop in props) {
|
|
373
|
+
if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
|
|
374
|
+
return true;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
return false;
|
|
378
|
+
};
|
|
379
|
+
|
|
380
|
+
// node_modules/lucide-react/dist/esm/Icon.js
|
|
381
|
+
var Icon = forwardRef2(
|
|
382
|
+
({
|
|
383
|
+
color = "currentColor",
|
|
384
|
+
size = 24,
|
|
385
|
+
strokeWidth = 2,
|
|
386
|
+
absoluteStrokeWidth,
|
|
387
|
+
className = "",
|
|
388
|
+
children,
|
|
389
|
+
iconNode,
|
|
390
|
+
...rest
|
|
391
|
+
}, ref) => createElement(
|
|
392
|
+
"svg",
|
|
393
|
+
{
|
|
394
|
+
ref,
|
|
395
|
+
...defaultAttributes,
|
|
396
|
+
width: size,
|
|
397
|
+
height: size,
|
|
398
|
+
stroke: color,
|
|
399
|
+
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
|
|
400
|
+
className: mergeClasses("lucide", className),
|
|
401
|
+
...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
|
|
402
|
+
...rest
|
|
403
|
+
},
|
|
404
|
+
[
|
|
405
|
+
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
|
|
406
|
+
...Array.isArray(children) ? children : [children]
|
|
407
|
+
]
|
|
408
|
+
)
|
|
409
|
+
);
|
|
410
|
+
|
|
411
|
+
// node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
412
|
+
var createLucideIcon = (iconName, iconNode) => {
|
|
413
|
+
const Component = forwardRef3(
|
|
414
|
+
({ className, ...props }, ref) => createElement2(Icon, {
|
|
415
|
+
ref,
|
|
416
|
+
iconNode,
|
|
417
|
+
className: mergeClasses(
|
|
418
|
+
`lucide-${toKebabCase(toPascalCase(iconName))}`,
|
|
419
|
+
`lucide-${iconName}`,
|
|
420
|
+
className
|
|
421
|
+
),
|
|
422
|
+
...props
|
|
423
|
+
})
|
|
424
|
+
);
|
|
425
|
+
Component.displayName = toPascalCase(iconName);
|
|
426
|
+
return Component;
|
|
427
|
+
};
|
|
428
|
+
|
|
429
|
+
// node_modules/lucide-react/dist/esm/icons/chevron-left.js
|
|
430
|
+
var __iconNode = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
|
|
431
|
+
var ChevronLeft = createLucideIcon("chevron-left", __iconNode);
|
|
432
|
+
|
|
433
|
+
// node_modules/lucide-react/dist/esm/icons/chevron-right.js
|
|
434
|
+
var __iconNode2 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
|
|
435
|
+
var ChevronRight = createLucideIcon("chevron-right", __iconNode2);
|
|
436
|
+
|
|
437
|
+
// node_modules/lucide-react/dist/esm/icons/chevrons-left.js
|
|
438
|
+
var __iconNode3 = [
|
|
439
|
+
["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
|
|
440
|
+
["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
|
|
441
|
+
];
|
|
442
|
+
var ChevronsLeft = createLucideIcon("chevrons-left", __iconNode3);
|
|
443
|
+
|
|
444
|
+
// node_modules/lucide-react/dist/esm/icons/chevrons-right.js
|
|
445
|
+
var __iconNode4 = [
|
|
446
|
+
["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
|
|
447
|
+
["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
|
|
448
|
+
];
|
|
449
|
+
var ChevronsRight = createLucideIcon("chevrons-right", __iconNode4);
|
|
450
|
+
|
|
451
|
+
// src/dataTable/pagination/DataTablePagination.tsx
|
|
452
|
+
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
453
|
+
function DataTablePagination({
|
|
454
|
+
table
|
|
455
|
+
}) {
|
|
456
|
+
return /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-2 pt-4", children: [
|
|
457
|
+
/* @__PURE__ */ jsxs2("div", { className: "text-muted-foreground flex-1 text-sm", children: [
|
|
458
|
+
table.getFilteredRowModel().rows.length,
|
|
459
|
+
" rows"
|
|
460
|
+
] }),
|
|
461
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
|
|
462
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
|
|
463
|
+
"Page ",
|
|
464
|
+
table.getState().pagination.pageIndex + 1,
|
|
465
|
+
" of",
|
|
466
|
+
" ",
|
|
467
|
+
table.getPageCount() || 1
|
|
468
|
+
] }),
|
|
469
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-2", children: [
|
|
470
|
+
/* @__PURE__ */ jsxs2(
|
|
471
|
+
Button,
|
|
472
|
+
{
|
|
473
|
+
className: "hidden size-8 lg:flex",
|
|
474
|
+
disabled: !table.getCanPreviousPage(),
|
|
475
|
+
onClick: () => table.setPageIndex(0),
|
|
476
|
+
size: "icon",
|
|
477
|
+
variant: "outline",
|
|
478
|
+
children: [
|
|
479
|
+
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to first page" }),
|
|
480
|
+
/* @__PURE__ */ jsx6(ChevronsLeft, {})
|
|
481
|
+
]
|
|
482
|
+
}
|
|
483
|
+
),
|
|
484
|
+
/* @__PURE__ */ jsxs2(
|
|
485
|
+
Button,
|
|
486
|
+
{
|
|
487
|
+
className: "size-8",
|
|
488
|
+
disabled: !table.getCanPreviousPage(),
|
|
489
|
+
onClick: () => table.previousPage(),
|
|
490
|
+
size: "icon",
|
|
491
|
+
variant: "outline",
|
|
492
|
+
children: [
|
|
493
|
+
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to previous page" }),
|
|
494
|
+
/* @__PURE__ */ jsx6(ChevronLeft, {})
|
|
495
|
+
]
|
|
496
|
+
}
|
|
497
|
+
),
|
|
498
|
+
/* @__PURE__ */ jsxs2(
|
|
499
|
+
Button,
|
|
500
|
+
{
|
|
501
|
+
className: "size-8",
|
|
502
|
+
disabled: !table.getCanNextPage(),
|
|
503
|
+
onClick: () => table.nextPage(),
|
|
504
|
+
size: "icon",
|
|
505
|
+
variant: "outline",
|
|
506
|
+
children: [
|
|
507
|
+
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to next page" }),
|
|
508
|
+
/* @__PURE__ */ jsx6(ChevronRight, {})
|
|
509
|
+
]
|
|
510
|
+
}
|
|
511
|
+
),
|
|
512
|
+
/* @__PURE__ */ jsxs2(
|
|
513
|
+
Button,
|
|
514
|
+
{
|
|
515
|
+
className: "hidden size-8 lg:flex",
|
|
516
|
+
disabled: !table.getCanNextPage(),
|
|
517
|
+
onClick: () => table.setPageIndex(table.getPageCount() - 1),
|
|
518
|
+
size: "icon",
|
|
519
|
+
variant: "outline",
|
|
520
|
+
children: [
|
|
521
|
+
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to last page" }),
|
|
522
|
+
/* @__PURE__ */ jsx6(ChevronsRight, {})
|
|
523
|
+
]
|
|
524
|
+
}
|
|
525
|
+
)
|
|
526
|
+
] })
|
|
527
|
+
] })
|
|
528
|
+
] });
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
// src/lib/search.ts
|
|
532
|
+
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
533
|
+
var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
|
|
534
|
+
if (!searchableColumns) return false;
|
|
535
|
+
if (!searchableColumns.includes(columnId)) return false;
|
|
536
|
+
const itemRank = rankItem(row.getValue(columnId), filterValue);
|
|
537
|
+
addMeta({ itemRank });
|
|
538
|
+
return itemRank.passed;
|
|
539
|
+
};
|
|
540
|
+
|
|
87
541
|
// src/dataTable/DataTable.tsx
|
|
88
542
|
import {
|
|
89
543
|
flexRender,
|
|
@@ -94,7 +548,7 @@ import {
|
|
|
94
548
|
getPaginationRowModel,
|
|
95
549
|
useReactTable
|
|
96
550
|
} from "@tanstack/react-table";
|
|
97
|
-
import { jsx as
|
|
551
|
+
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
98
552
|
function DataTable({
|
|
99
553
|
columns,
|
|
100
554
|
data,
|
|
@@ -108,47 +562,81 @@ function DataTable({
|
|
|
108
562
|
getFilteredRowModel: getFilteredRowModel(),
|
|
109
563
|
getFacetedRowModel: getFacetedRowModel(),
|
|
110
564
|
getFacetedUniqueValues: getFacetedUniqueValues(),
|
|
565
|
+
globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
|
|
111
566
|
autoResetPageIndex: false,
|
|
112
567
|
initialState: {
|
|
113
568
|
columnVisibility: config?.columnVisibility
|
|
114
569
|
}
|
|
115
570
|
});
|
|
116
|
-
return /* @__PURE__ */
|
|
117
|
-
/* @__PURE__ */
|
|
118
|
-
|
|
119
|
-
TableHead,
|
|
120
|
-
{
|
|
121
|
-
colSpan: header.colSpan,
|
|
122
|
-
style: { width: header.getSize() },
|
|
123
|
-
children: header.isPlaceholder ? null : flexRender(
|
|
124
|
-
header.column.columnDef.header,
|
|
125
|
-
header.getContext()
|
|
126
|
-
)
|
|
127
|
-
},
|
|
128
|
-
header.id
|
|
129
|
-
);
|
|
130
|
-
}) }, headerGroup.id)) }),
|
|
131
|
-
/* @__PURE__ */ jsx2(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx2(
|
|
132
|
-
TableRow,
|
|
133
|
-
{
|
|
134
|
-
"data-state": row.getIsSelected() && "selected",
|
|
135
|
-
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx2(TableCell, { className: "truncate max-w-0", children: flexRender(
|
|
136
|
-
cell.column.columnDef.cell,
|
|
137
|
-
cell.getContext()
|
|
138
|
-
) }, cell.id))
|
|
139
|
-
},
|
|
140
|
-
row.id
|
|
141
|
-
)) : /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(
|
|
142
|
-
TableCell,
|
|
571
|
+
return /* @__PURE__ */ jsxs3("div", { className: "w-full", children: [
|
|
572
|
+
/* @__PURE__ */ jsx7(
|
|
573
|
+
DataTableControls,
|
|
143
574
|
{
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
575
|
+
filters: config?.filters,
|
|
576
|
+
search: config?.search,
|
|
577
|
+
table
|
|
147
578
|
}
|
|
148
|
-
)
|
|
149
|
-
|
|
579
|
+
),
|
|
580
|
+
/* @__PURE__ */ jsx7("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs3(Table, { children: [
|
|
581
|
+
/* @__PURE__ */ jsx7(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx7(TableRow, { children: headerGroup.headers.map((header) => {
|
|
582
|
+
return /* @__PURE__ */ jsx7(
|
|
583
|
+
TableHead,
|
|
584
|
+
{
|
|
585
|
+
colSpan: header.colSpan,
|
|
586
|
+
style: { width: header.getSize() },
|
|
587
|
+
children: header.isPlaceholder ? null : flexRender(
|
|
588
|
+
header.column.columnDef.header,
|
|
589
|
+
header.getContext()
|
|
590
|
+
)
|
|
591
|
+
},
|
|
592
|
+
header.id
|
|
593
|
+
);
|
|
594
|
+
}) }, headerGroup.id)) }),
|
|
595
|
+
/* @__PURE__ */ jsx7(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx7(
|
|
596
|
+
TableRow,
|
|
597
|
+
{
|
|
598
|
+
"data-state": row.getIsSelected() && "selected",
|
|
599
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx7(TableCell, { className: "truncate max-w-0", children: flexRender(
|
|
600
|
+
cell.column.columnDef.cell,
|
|
601
|
+
cell.getContext()
|
|
602
|
+
) }, cell.id))
|
|
603
|
+
},
|
|
604
|
+
row.id
|
|
605
|
+
)) : /* @__PURE__ */ jsx7(TableRow, { children: /* @__PURE__ */ jsx7(
|
|
606
|
+
TableCell,
|
|
607
|
+
{
|
|
608
|
+
className: "h-24 text-center",
|
|
609
|
+
colSpan: columns.length,
|
|
610
|
+
children: "No results."
|
|
611
|
+
}
|
|
612
|
+
) }) })
|
|
613
|
+
] }) }),
|
|
614
|
+
/* @__PURE__ */ jsx7(DataTablePagination, { table })
|
|
615
|
+
] });
|
|
150
616
|
}
|
|
151
617
|
export {
|
|
152
618
|
DataTable,
|
|
153
619
|
DataTable as default
|
|
154
620
|
};
|
|
621
|
+
/*! Bundled license information:
|
|
622
|
+
|
|
623
|
+
lucide-react/dist/esm/shared/src/utils/mergeClasses.js:
|
|
624
|
+
lucide-react/dist/esm/shared/src/utils/toKebabCase.js:
|
|
625
|
+
lucide-react/dist/esm/shared/src/utils/toCamelCase.js:
|
|
626
|
+
lucide-react/dist/esm/shared/src/utils/toPascalCase.js:
|
|
627
|
+
lucide-react/dist/esm/defaultAttributes.js:
|
|
628
|
+
lucide-react/dist/esm/shared/src/utils/hasA11yProp.js:
|
|
629
|
+
lucide-react/dist/esm/Icon.js:
|
|
630
|
+
lucide-react/dist/esm/createLucideIcon.js:
|
|
631
|
+
lucide-react/dist/esm/icons/chevron-left.js:
|
|
632
|
+
lucide-react/dist/esm/icons/chevron-right.js:
|
|
633
|
+
lucide-react/dist/esm/icons/chevrons-left.js:
|
|
634
|
+
lucide-react/dist/esm/icons/chevrons-right.js:
|
|
635
|
+
lucide-react/dist/esm/lucide-react.js:
|
|
636
|
+
(**
|
|
637
|
+
* @license lucide-react v0.574.0 - ISC
|
|
638
|
+
*
|
|
639
|
+
* This source code is licensed under the ISC license.
|
|
640
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
641
|
+
*)
|
|
642
|
+
*/
|