@invana/tables 0.0.4

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 ADDED
@@ -0,0 +1,562 @@
1
+ 'use strict';
2
+
3
+ var React2 = require('react');
4
+ var reactTable = require('@tanstack/react-table');
5
+ var core = require('@dnd-kit/core');
6
+ var modifiers = require('@dnd-kit/modifiers');
7
+ var sortable = require('@dnd-kit/sortable');
8
+ var utilities = require('@dnd-kit/utilities');
9
+ var ui = require('@invana/ui');
10
+ var lucideReact = require('lucide-react');
11
+ var forms = require('@invana/forms');
12
+ var jsxRuntime = require('react/jsx-runtime');
13
+
14
+ function _interopNamespace(e) {
15
+ if (e && e.__esModule) return e;
16
+ var n = Object.create(null);
17
+ if (e) {
18
+ Object.keys(e).forEach(function (k) {
19
+ if (k !== 'default') {
20
+ var d = Object.getOwnPropertyDescriptor(e, k);
21
+ Object.defineProperty(n, k, d.get ? d : {
22
+ enumerable: true,
23
+ get: function () { return e[k]; }
24
+ });
25
+ }
26
+ });
27
+ }
28
+ n.default = e;
29
+ return Object.freeze(n);
30
+ }
31
+
32
+ var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
33
+
34
+ // src/data-table.tsx
35
+ function DataTablePagination({
36
+ table,
37
+ pageSizeOptions = [10, 20, 50, 100]
38
+ }) {
39
+ const { pageIndex, pageSize } = table.getState().pagination;
40
+ const serverRowCount = table.options.rowCount;
41
+ const total = typeof serverRowCount === "number" ? serverRowCount : table.getFilteredRowModel().rows.length;
42
+ const start = total === 0 ? 0 : pageIndex * pageSize + 1;
43
+ const end = Math.min((pageIndex + 1) * pageSize, total);
44
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 px-2 py-2 text-sm", children: [
45
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: total === 0 ? "No rows" : `Showing ${start}\u2013${end} of ${total}` }),
46
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
47
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
48
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Rows per page" }),
49
+ /* @__PURE__ */ jsxRuntime.jsxs(
50
+ forms.Select,
51
+ {
52
+ value: String(pageSize),
53
+ onValueChange: (v) => table.setPageSize(Number(v)),
54
+ children: [
55
+ /* @__PURE__ */ jsxRuntime.jsx(forms.SelectTrigger, { className: "h-8 w-[72px]", children: /* @__PURE__ */ jsxRuntime.jsx(forms.SelectValue, {}) }),
56
+ /* @__PURE__ */ jsxRuntime.jsx(forms.SelectContent, { children: pageSizeOptions.map((s) => /* @__PURE__ */ jsxRuntime.jsx(forms.SelectItem, { value: String(s), children: s }, s)) })
57
+ ]
58
+ }
59
+ )
60
+ ] }),
61
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground tabular-nums", children: [
62
+ "Page ",
63
+ pageIndex + 1,
64
+ " of ",
65
+ table.getPageCount() || 1
66
+ ] }),
67
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
68
+ /* @__PURE__ */ jsxRuntime.jsx(
69
+ ui.Button,
70
+ {
71
+ variant: "outline",
72
+ size: "icon",
73
+ className: "h-8 w-8",
74
+ onClick: () => table.setPageIndex(0),
75
+ disabled: !table.getCanPreviousPage(),
76
+ "aria-label": "First page",
77
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
78
+ }
79
+ ),
80
+ /* @__PURE__ */ jsxRuntime.jsx(
81
+ ui.Button,
82
+ {
83
+ variant: "outline",
84
+ size: "icon",
85
+ className: "h-8 w-8",
86
+ onClick: () => table.previousPage(),
87
+ disabled: !table.getCanPreviousPage(),
88
+ "aria-label": "Previous page",
89
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
90
+ }
91
+ ),
92
+ /* @__PURE__ */ jsxRuntime.jsx(
93
+ ui.Button,
94
+ {
95
+ variant: "outline",
96
+ size: "icon",
97
+ className: "h-8 w-8",
98
+ onClick: () => table.nextPage(),
99
+ disabled: !table.getCanNextPage(),
100
+ "aria-label": "Next page",
101
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
102
+ }
103
+ ),
104
+ /* @__PURE__ */ jsxRuntime.jsx(
105
+ ui.Button,
106
+ {
107
+ variant: "outline",
108
+ size: "icon",
109
+ className: "h-8 w-8",
110
+ onClick: () => table.setPageIndex(table.getPageCount() - 1),
111
+ disabled: !table.getCanNextPage(),
112
+ "aria-label": "Last page",
113
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
114
+ }
115
+ )
116
+ ] })
117
+ ] })
118
+ ] });
119
+ }
120
+ function DataTableToolbar({
121
+ table,
122
+ enableColumnVisibility = true,
123
+ enableColumnPinning = false,
124
+ children
125
+ }) {
126
+ const toggleableCols = table.getAllLeafColumns().filter((c) => c.getCanHide());
127
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-2", children: [
128
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children }),
129
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: enableColumnVisibility && toggleableCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
130
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "outline", size: "sm", className: "h-8", children: [
131
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "mr-2 h-4 w-4" }),
132
+ "Columns"
133
+ ] }) }),
134
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuContent, { align: "end", className: "w-48", children: [
135
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuLabel, { children: "Toggle columns" }),
136
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
137
+ toggleableCols.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
138
+ ui.DropdownMenuCheckboxItem,
139
+ {
140
+ className: "capitalize",
141
+ checked: col.getIsVisible(),
142
+ onCheckedChange: (v) => col.toggleVisibility(!!v),
143
+ onSelect: (e) => e.preventDefault(),
144
+ children: String(col.columnDef.header ?? col.id)
145
+ },
146
+ col.id
147
+ )),
148
+ enableColumnPinning && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
149
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuSeparator, {}),
150
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuLabel, { children: "Pinning" }),
151
+ table.getAllLeafColumns().map((col) => {
152
+ if (!col.getCanPin()) return null;
153
+ const pinned = col.getIsPinned();
154
+ return /* @__PURE__ */ jsxRuntime.jsxs(
155
+ "div",
156
+ {
157
+ className: "flex items-center justify-between px-2 py-1 text-sm",
158
+ children: [
159
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize truncate", children: String(col.columnDef.header ?? col.id) }),
160
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
161
+ /* @__PURE__ */ jsxRuntime.jsx(
162
+ "button",
163
+ {
164
+ type: "button",
165
+ onClick: () => col.pin(pinned === "left" ? false : "left"),
166
+ className: `rounded px-1.5 py-0.5 text-xs ${pinned === "left" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/70"}`,
167
+ children: "L"
168
+ }
169
+ ),
170
+ /* @__PURE__ */ jsxRuntime.jsx(
171
+ "button",
172
+ {
173
+ type: "button",
174
+ onClick: () => col.pin(pinned === "right" ? false : "right"),
175
+ className: `rounded px-1.5 py-0.5 text-xs ${pinned === "right" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/70"}`,
176
+ children: "R"
177
+ }
178
+ )
179
+ ] })
180
+ ]
181
+ },
182
+ col.id
183
+ );
184
+ })
185
+ ] })
186
+ ] })
187
+ ] }) })
188
+ ] });
189
+ }
190
+ function EditableCell({
191
+ ctx,
192
+ editType = "text",
193
+ options,
194
+ align = "left",
195
+ onCellEdit
196
+ }) {
197
+ const initial = ctx.getValue();
198
+ const [editing, setEditing] = React2__namespace.useState(false);
199
+ const [draft, setDraft] = React2__namespace.useState(initial);
200
+ React2__namespace.useEffect(() => {
201
+ if (!editing) setDraft(initial);
202
+ }, [initial, editing]);
203
+ const commit = (next) => {
204
+ setEditing(false);
205
+ if (next === initial) return;
206
+ onCellEdit?.({
207
+ rowIndex: ctx.row.index,
208
+ columnId: ctx.column.id,
209
+ value: next,
210
+ row: ctx.row.original
211
+ });
212
+ };
213
+ const alignClass = align === "right" ? "text-right justify-end" : align === "center" ? "text-center justify-center" : "text-left justify-start";
214
+ if (!editing) {
215
+ return /* @__PURE__ */ jsxRuntime.jsx(
216
+ "button",
217
+ {
218
+ type: "button",
219
+ onClick: () => setEditing(true),
220
+ className: ui.cn(
221
+ "group flex w-full items-center rounded-sm px-1.5 py-1 text-sm hover:bg-muted/60 focus:outline-none focus:ring-2 focus:ring-ring",
222
+ alignClass
223
+ ),
224
+ title: "Click to edit",
225
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: initial == null || initial === "" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground italic", children: "empty" }) : String(initial) })
226
+ }
227
+ );
228
+ }
229
+ if (editType === "select") {
230
+ return /* @__PURE__ */ jsxRuntime.jsxs(
231
+ forms.Select,
232
+ {
233
+ defaultValue: initial == null ? void 0 : String(initial),
234
+ onValueChange: (v) => commit(v),
235
+ open: true,
236
+ onOpenChange: (open) => {
237
+ if (!open) setEditing(false);
238
+ },
239
+ children: [
240
+ /* @__PURE__ */ jsxRuntime.jsx(forms.SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntime.jsx(forms.SelectValue, {}) }),
241
+ /* @__PURE__ */ jsxRuntime.jsx(forms.SelectContent, { children: options?.map((o) => /* @__PURE__ */ jsxRuntime.jsx(forms.SelectItem, { value: o.value, children: o.label }, o.value)) })
242
+ ]
243
+ }
244
+ );
245
+ }
246
+ return /* @__PURE__ */ jsxRuntime.jsx(
247
+ forms.Input,
248
+ {
249
+ autoFocus: true,
250
+ type: editType === "number" ? "number" : "text",
251
+ defaultValue: initial == null ? "" : String(initial),
252
+ onBlur: (e) => {
253
+ const v = editType === "number" ? Number(e.currentTarget.value) : e.currentTarget.value;
254
+ commit(v);
255
+ },
256
+ onKeyDown: (e) => {
257
+ if (e.key === "Enter") {
258
+ e.preventDefault();
259
+ e.currentTarget.blur();
260
+ } else if (e.key === "Escape") {
261
+ e.preventDefault();
262
+ setEditing(false);
263
+ }
264
+ },
265
+ className: ui.cn("h-8", alignClass)
266
+ }
267
+ );
268
+ }
269
+ function getCommonPinStyles(header) {
270
+ const isPinned = header.column.getIsPinned();
271
+ if (!isPinned) return {};
272
+ return {
273
+ position: "sticky",
274
+ left: isPinned === "left" ? header.column.getStart("left") : void 0,
275
+ right: isPinned === "right" ? header.column.getAfter("right") : void 0,
276
+ zIndex: 2
277
+ };
278
+ }
279
+ function DraggableHeader({
280
+ header,
281
+ enableReordering,
282
+ enableResizing,
283
+ enableSorting
284
+ }) {
285
+ const column = header.column;
286
+ const isPinned = column.getIsPinned();
287
+ const canDrag = enableReordering && !isPinned && column.id !== "__select";
288
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({ id: column.id, disabled: !canDrag });
289
+ const sortDir = column.getIsSorted();
290
+ const canSort = enableSorting && column.getCanSort();
291
+ const align = column.columnDef.meta?.align ?? "left";
292
+ const alignClass = align === "right" ? "justify-end text-right" : align === "center" ? "justify-center text-center" : "justify-start text-left";
293
+ return /* @__PURE__ */ jsxRuntime.jsxs(
294
+ ui.TableHead,
295
+ {
296
+ ref: setNodeRef,
297
+ colSpan: header.colSpan,
298
+ style: {
299
+ width: header.getSize(),
300
+ transform: utilities.CSS.Translate.toString(transform),
301
+ transition,
302
+ opacity: isDragging ? 0.6 : 1,
303
+ ...getCommonPinStyles(header),
304
+ ...isPinned ? { backgroundColor: "hsl(var(--background))" } : {}
305
+ },
306
+ className: ui.cn(
307
+ "group relative select-none bg-muted/40",
308
+ isPinned && "bg-background shadow-[inset_-1px_0_0_0_hsl(var(--border))]"
309
+ ),
310
+ ...attributes,
311
+ children: [
312
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex items-center gap-1", alignClass), children: [
313
+ canDrag && /* @__PURE__ */ jsxRuntime.jsx(
314
+ "button",
315
+ {
316
+ type: "button",
317
+ className: "cursor-grab text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing",
318
+ ...listeners,
319
+ "aria-label": "Drag column",
320
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3.5 w-3.5" })
321
+ }
322
+ ),
323
+ canSort ? /* @__PURE__ */ jsxRuntime.jsxs(
324
+ "button",
325
+ {
326
+ type: "button",
327
+ onClick: column.getToggleSortingHandler(),
328
+ className: "inline-flex items-center gap-1 font-medium hover:text-foreground",
329
+ children: [
330
+ reactTable.flexRender(column.columnDef.header, header.getContext()),
331
+ sortDir === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" }) : sortDir === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "h-3.5 w-3.5 opacity-50" })
332
+ ]
333
+ }
334
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: reactTable.flexRender(column.columnDef.header, header.getContext()) })
335
+ ] }),
336
+ enableResizing && column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
337
+ "button",
338
+ {
339
+ type: "button",
340
+ onMouseDown: header.getResizeHandler(),
341
+ onTouchStart: header.getResizeHandler(),
342
+ className: ui.cn(
343
+ "absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none bg-transparent hover:bg-border",
344
+ column.getIsResizing() && "bg-primary"
345
+ ),
346
+ "aria-label": "Resize column"
347
+ }
348
+ )
349
+ ]
350
+ }
351
+ );
352
+ }
353
+ function DataTable({
354
+ columns,
355
+ data,
356
+ pageSize = 10,
357
+ pageSizeOptions,
358
+ enableSorting = true,
359
+ enablePagination = true,
360
+ enableColumnVisibility = true,
361
+ enableColumnReordering = false,
362
+ enableColumnResizing = false,
363
+ enableColumnPinning = false,
364
+ onCellEdit,
365
+ toolbar,
366
+ className,
367
+ emptyState,
368
+ manualPagination = false,
369
+ manualSorting = false,
370
+ pageCount,
371
+ rowCount,
372
+ pagination: paginationProp,
373
+ onPaginationChange,
374
+ sorting: sortingProp,
375
+ onSortingChange,
376
+ loading = false
377
+ }) {
378
+ const [internalSorting, setInternalSorting] = React2__namespace.useState([]);
379
+ const sorting = sortingProp ?? internalSorting;
380
+ const setSorting = (updater) => {
381
+ if (onSortingChange) onSortingChange(updater);
382
+ if (!sortingProp) setInternalSorting(updater);
383
+ };
384
+ const [internalPagination, setInternalPagination] = React2__namespace.useState({
385
+ pageIndex: 0,
386
+ pageSize
387
+ });
388
+ const pagination = paginationProp ?? internalPagination;
389
+ const setPagination = (updater) => {
390
+ if (onPaginationChange) onPaginationChange(updater);
391
+ if (!paginationProp) setInternalPagination(updater);
392
+ };
393
+ const [columnFilters, setColumnFilters] = React2__namespace.useState([]);
394
+ const [columnVisibility, setColumnVisibility] = React2__namespace.useState({});
395
+ const [columnPinning, setColumnPinning] = React2__namespace.useState({
396
+ left: [],
397
+ right: []
398
+ });
399
+ const [columnOrder, setColumnOrder] = React2__namespace.useState(
400
+ () => columns.map((c, i) => c.id ?? c.accessorKey ?? String(i))
401
+ );
402
+ const wrappedColumns = React2__namespace.useMemo(() => {
403
+ return columns.map((col) => {
404
+ const meta = col.meta;
405
+ if (meta?.editable && !col.cell) {
406
+ return {
407
+ ...col,
408
+ cell: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(
409
+ EditableCell,
410
+ {
411
+ ctx,
412
+ editType: meta.editType,
413
+ options: meta.options,
414
+ align: meta.align,
415
+ onCellEdit
416
+ }
417
+ )
418
+ };
419
+ }
420
+ return col;
421
+ });
422
+ }, [columns, onCellEdit]);
423
+ const table = reactTable.useReactTable({
424
+ data,
425
+ columns: wrappedColumns,
426
+ state: {
427
+ sorting,
428
+ pagination,
429
+ columnFilters,
430
+ columnVisibility,
431
+ columnPinning,
432
+ columnOrder
433
+ },
434
+ onSortingChange: setSorting,
435
+ onPaginationChange: setPagination,
436
+ onColumnFiltersChange: setColumnFilters,
437
+ onColumnVisibilityChange: setColumnVisibility,
438
+ onColumnPinningChange: setColumnPinning,
439
+ onColumnOrderChange: setColumnOrder,
440
+ enableSorting,
441
+ enableColumnResizing,
442
+ enableColumnPinning,
443
+ manualPagination,
444
+ manualSorting,
445
+ pageCount: pageCount ?? -1,
446
+ rowCount,
447
+ columnResizeMode: "onChange",
448
+ getCoreRowModel: reactTable.getCoreRowModel(),
449
+ getSortedRowModel: enableSorting && !manualSorting ? reactTable.getSortedRowModel() : void 0,
450
+ getFilteredRowModel: reactTable.getFilteredRowModel(),
451
+ getPaginationRowModel: enablePagination && !manualPagination ? reactTable.getPaginationRowModel() : void 0
452
+ });
453
+ const sensors = core.useSensors(
454
+ core.useSensor(core.MouseSensor, { activationConstraint: { distance: 4 } }),
455
+ core.useSensor(core.TouchSensor, { activationConstraint: { delay: 200, tolerance: 8 } }),
456
+ core.useSensor(core.KeyboardSensor)
457
+ );
458
+ const handleDragEnd = (event) => {
459
+ const { active, over } = event;
460
+ if (!over || active.id === over.id) return;
461
+ setColumnOrder((prev) => {
462
+ const next = prev.length ? prev : table.getAllLeafColumns().map((c) => c.id);
463
+ const oldIndex = next.indexOf(active.id);
464
+ const newIndex = next.indexOf(over.id);
465
+ if (oldIndex < 0 || newIndex < 0) return prev;
466
+ return sortable.arrayMove(next, oldIndex, newIndex);
467
+ });
468
+ };
469
+ const visibleLeafColumnIds = table.getVisibleLeafColumns().map((c) => c.id);
470
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex flex-col gap-2", className), children: [
471
+ /* @__PURE__ */ jsxRuntime.jsx(
472
+ DataTableToolbar,
473
+ {
474
+ table,
475
+ enableColumnVisibility,
476
+ enableColumnPinning,
477
+ children: toolbar
478
+ }
479
+ ),
480
+ /* @__PURE__ */ jsxRuntime.jsx(
481
+ core.DndContext,
482
+ {
483
+ sensors,
484
+ collisionDetection: core.closestCenter,
485
+ modifiers: [modifiers.restrictToHorizontalAxis],
486
+ onDragEnd: handleDragEnd,
487
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-auto rounded-md border", children: [
488
+ loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-start justify-center bg-background/60 pt-12 text-sm text-muted-foreground", children: "Loading\u2026" }),
489
+ /* @__PURE__ */ jsxRuntime.jsxs(
490
+ ui.Table,
491
+ {
492
+ style: {
493
+ width: enableColumnResizing ? table.getTotalSize() : void 0
494
+ },
495
+ children: [
496
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
497
+ sortable.SortableContext,
498
+ {
499
+ items: visibleLeafColumnIds,
500
+ strategy: sortable.horizontalListSortingStrategy,
501
+ children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
502
+ DraggableHeader,
503
+ {
504
+ header,
505
+ enableReordering: enableColumnReordering,
506
+ enableResizing: enableColumnResizing,
507
+ enableSorting
508
+ },
509
+ header.id
510
+ ))
511
+ }
512
+ ) }, headerGroup.id)) }),
513
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TableBody, { children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
514
+ ui.TableCell,
515
+ {
516
+ colSpan: table.getAllLeafColumns().length,
517
+ className: "h-24 text-center text-muted-foreground",
518
+ children: emptyState ?? "No results."
519
+ }
520
+ ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: row.getVisibleCells().map((cell) => {
521
+ const column = cell.column;
522
+ const isPinned = column.getIsPinned();
523
+ const align = column.columnDef.meta?.align ?? "left";
524
+ return /* @__PURE__ */ jsxRuntime.jsx(
525
+ ui.TableCell,
526
+ {
527
+ style: {
528
+ width: cell.column.getSize(),
529
+ ...isPinned ? {
530
+ position: "sticky",
531
+ left: isPinned === "left" ? column.getStart("left") : void 0,
532
+ right: isPinned === "right" ? column.getAfter("right") : void 0,
533
+ zIndex: 1,
534
+ backgroundColor: "hsl(var(--background))"
535
+ } : {}
536
+ },
537
+ className: ui.cn(
538
+ align === "right" && "text-right",
539
+ align === "center" && "text-center",
540
+ isPinned && "bg-background shadow-[inset_-1px_0_0_0_hsl(var(--border))]"
541
+ ),
542
+ children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
543
+ },
544
+ cell.id
545
+ );
546
+ }) }, row.id)) })
547
+ ]
548
+ }
549
+ )
550
+ ] })
551
+ }
552
+ ),
553
+ enablePagination && /* @__PURE__ */ jsxRuntime.jsx(DataTablePagination, { table, pageSizeOptions })
554
+ ] });
555
+ }
556
+
557
+ exports.DataTable = DataTable;
558
+ exports.DataTablePagination = DataTablePagination;
559
+ exports.DataTableToolbar = DataTableToolbar;
560
+ exports.EditableCell = EditableCell;
561
+ //# sourceMappingURL=index.cjs.map
562
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/data-table-pagination.tsx","../src/data-table-toolbar.tsx","../src/editable-cell.tsx","../src/data-table.tsx"],"names":["jsxs","jsx","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Button","ChevronsLeft","ChevronLeft","ChevronRight","ChevronsRight","DropdownMenu","DropdownMenuTrigger","Settings2","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuCheckboxItem","Fragment","React","cn","Input","useSortable","TableHead","CSS","GripVertical","flexRender","ArrowUp","ArrowDown","ChevronsUpDown","React2","useReactTable","getCoreRowModel","getSortedRowModel","getFilteredRowModel","getPaginationRowModel","useSensors","useSensor","MouseSensor","TouchSensor","KeyboardSensor","arrayMove","DndContext","closestCenter","restrictToHorizontalAxis","Table","TableHeader","TableRow","SortableContext","horizontalListSortingStrategy","TableBody","TableCell"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,SAAS,mBAAA,CAA2B;AAAA,EACzC,KAAA;AAAA,EACA,eAAA,GAAkB,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,GAAG;AACpC,CAAA,EAAoC;AAClC,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA,CAAM,UAAS,CAAE,UAAA;AACjD,EAAA,MAAM,cAAA,GAAiB,MAAM,OAAA,CAAQ,QAAA;AACrC,EAAA,MAAM,KAAA,GACJ,OAAO,cAAA,KAAmB,QAAA,GACtB,iBACA,KAAA,CAAM,mBAAA,GAAsB,IAAA,CAAK,MAAA;AACvC,EAAA,MAAM,KAAA,GAAQ,KAAA,KAAU,CAAA,GAAI,CAAA,GAAI,YAAY,QAAA,GAAW,CAAA;AACvD,EAAA,MAAM,MAAM,IAAA,CAAK,GAAA,CAAA,CAAK,SAAA,GAAY,CAAA,IAAK,UAAU,KAAK,CAAA;AAEtD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACZ,QAAA,EAAA,KAAA,KAAU,CAAA,GAAI,SAAA,GAAY,CAAA,QAAA,EAAW,KAAK,CAAA,MAAA,EAAI,GAAG,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA,EAChE,CAAA;AAAA,oBACAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACrDD,eAAA;AAAA,UAACE,YAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,OAAO,QAAQ,CAAA;AAAA,YACtB,eAAe,CAAC,CAAA,KAAM,MAAM,WAAA,CAAY,MAAA,CAAO,CAAC,CAAC,CAAA;AAAA,YAEjD,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAACE,mBAAA,EAAA,EAAc,SAAA,EAAU,cAAA,EACvB,QAAA,kBAAAF,cAAA,CAACG,qBAAY,CAAA,EACf,CAAA;AAAA,8BACAH,cAAA,CAACI,mBAAA,EAAA,EACE,QAAA,EAAA,eAAA,CAAgB,GAAA,CAAI,CAAC,CAAA,qBACpBJ,cAAA,CAACK,gBAAA,EAAA,EAAmB,KAAA,EAAO,OAAO,CAAC,CAAA,EAChC,QAAA,EAAA,CAAA,EAAA,EADc,CAEjB,CACD,CAAA,EACH;AAAA;AAAA;AAAA;AACF,OAAA,EACF,CAAA;AAAA,sBACAN,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EAAqC,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,QAC5C,SAAA,GAAY,CAAA;AAAA,QAAE,MAAA;AAAA,QAAK,KAAA,CAAM,cAAa,IAAK;AAAA,OAAA,EACnD,CAAA;AAAA,sBACAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACM,SAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,SAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,SAAA;AAAA,YACV,OAAA,EAAS,MAAM,KAAA,CAAM,YAAA,CAAa,CAAC,CAAA;AAAA,YACnC,QAAA,EAAU,CAAC,KAAA,CAAM,kBAAA,EAAmB;AAAA,YACpC,YAAA,EAAW,YAAA;AAAA,YAEX,QAAA,kBAAAN,cAAA,CAACO,wBAAA,EAAA,EAAa,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,SACpC;AAAA,wBACAP,cAAA;AAAA,UAACM,SAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,SAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,SAAA;AAAA,YACV,OAAA,EAAS,MAAM,KAAA,CAAM,YAAA,EAAa;AAAA,YAClC,QAAA,EAAU,CAAC,KAAA,CAAM,kBAAA,EAAmB;AAAA,YACpC,YAAA,EAAW,eAAA;AAAA,YAEX,QAAA,kBAAAN,cAAA,CAACQ,uBAAA,EAAA,EAAY,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,SACnC;AAAA,wBACAR,cAAA;AAAA,UAACM,SAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,SAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,SAAA;AAAA,YACV,OAAA,EAAS,MAAM,KAAA,CAAM,QAAA,EAAS;AAAA,YAC9B,QAAA,EAAU,CAAC,KAAA,CAAM,cAAA,EAAe;AAAA,YAChC,YAAA,EAAW,WAAA;AAAA,YAEX,QAAA,kBAAAN,cAAA,CAACS,wBAAA,EAAA,EAAa,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,SACpC;AAAA,wBACAT,cAAA;AAAA,UAACM,SAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,SAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,SAAA;AAAA,YACV,SAAS,MAAM,KAAA,CAAM,aAAa,KAAA,CAAM,YAAA,KAAiB,CAAC,CAAA;AAAA,YAC1D,QAAA,EAAU,CAAC,KAAA,CAAM,cAAA,EAAe;AAAA,YAChC,YAAA,EAAW,WAAA;AAAA,YAEX,QAAA,kBAAAN,cAAA,CAACU,yBAAA,EAAA,EAAc,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA;AACrC,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;ACvFO,SAAS,gBAAA,CAAwB;AAAA,EACtC,KAAA;AAAA,EACA,sBAAA,GAAyB,IAAA;AAAA,EACzB,mBAAA,GAAsB,KAAA;AAAA,EACtB;AACF,CAAA,EAAiC;AAC/B,EAAA,MAAM,cAAA,GAAiB,MACpB,iBAAA,EAAkB,CAClB,OAAO,CAAC,CAAA,KAAM,CAAA,CAAE,UAAA,EAAY,CAAA;AAE/B,EAAA,uBACEX,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAAA,oBACnDA,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA,sBAAA,IAA0B,cAAA,CAAe,MAAA,GAAS,CAAA,oBACjDD,eAAAA,CAACY,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAX,cAAAA,CAACY,sBAAA,EAAA,EAAoB,OAAA,EAAO,IAAA,EAC1B,QAAA,kBAAAb,eAAAA,CAACO,SAAAA,EAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,IAAA,EAAK,WAAU,KAAA,EAC5C,QAAA,EAAA;AAAA,wBAAAN,cAAAA,CAACa,qBAAA,EAAA,EAAU,SAAA,EAAU,cAAA,EAAe,CAAA;AAAA,QAAE;AAAA,OAAA,EAExC,CAAA,EACF,CAAA;AAAA,sBACAd,eAAAA,CAACe,sBAAA,EAAA,EAAoB,KAAA,EAAM,KAAA,EAAM,WAAU,MAAA,EACzC,QAAA,EAAA;AAAA,wBAAAd,cAAAA,CAACe,wBAAkB,QAAA,EAAA,gBAAA,EAAc,CAAA;AAAA,wBACjCf,eAACgB,wBAAA,EAAA,EAAsB,CAAA;AAAA,QACtB,cAAA,CAAe,GAAA,CAAI,CAAC,GAAA,qBACnBhB,cAAAA;AAAA,UAACiB,2BAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,YAAA;AAAA,YACV,OAAA,EAAS,IAAI,YAAA,EAAa;AAAA,YAC1B,iBAAiB,CAAC,CAAA,KAAM,IAAI,gBAAA,CAAiB,CAAC,CAAC,CAAC,CAAA;AAAA,YAChD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YAEjC,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,SAAA,CAAU,MAAA,IAAU,IAAI,EAAE;AAAA,WAAA;AAAA,UANjC,GAAA,CAAI;AAAA,SAQZ,CAAA;AAAA,QACA,mBAAA,oBACClB,eAAAA,CAAAmB,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAlB,eAACgB,wBAAA,EAAA,EAAsB,CAAA;AAAA,0BACvBhB,cAAAA,CAACe,oBAAA,EAAA,EAAkB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,UACzB,KAAA,CAAM,iBAAA,EAAkB,CAAE,GAAA,CAAI,CAAC,GAAA,KAAQ;AACtC,YAAA,IAAI,CAAC,GAAA,CAAI,SAAA,EAAU,EAAG,OAAO,IAAA;AAC7B,YAAA,MAAM,MAAA,GAAS,IAAI,WAAA,EAAY;AAC/B,YAAA,uBACEhB,eAAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBAEC,SAAA,EAAU,qDAAA;AAAA,gBAEV,QAAA,EAAA;AAAA,kCAAAC,cAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA,MAAA,CAAO,IAAI,SAAA,CAAU,MAAA,IAAU,GAAA,CAAI,EAAE,CAAA,EACxC,CAAA;AAAA,kCACAD,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,oCAAAC,cAAAA;AAAA,sBAAC,QAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAK,QAAA;AAAA,wBACL,SAAS,MACP,GAAA,CAAI,IAAI,MAAA,KAAW,MAAA,GAAS,QAAQ,MAAM,CAAA;AAAA,wBAE5C,SAAA,EAAW,CAAA,8BAAA,EACT,MAAA,KAAW,MAAA,GACP,uCACA,4BACN,CAAA,CAAA;AAAA,wBACD,QAAA,EAAA;AAAA;AAAA,qBAED;AAAA,oCACAA,cAAAA;AAAA,sBAAC,QAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAK,QAAA;AAAA,wBACL,SAAS,MACP,GAAA,CAAI,IAAI,MAAA,KAAW,OAAA,GAAU,QAAQ,OAAO,CAAA;AAAA,wBAE9C,SAAA,EAAW,CAAA,8BAAA,EACT,MAAA,KAAW,OAAA,GACP,uCACA,4BACN,CAAA,CAAA;AAAA,wBACD,QAAA,EAAA;AAAA;AAAA;AAED,mBAAA,EACF;AAAA;AAAA,eAAA;AAAA,cAjCK,GAAA,CAAI;AAAA,aAkCX;AAAA,UAEJ,CAAC;AAAA,SAAA,EACH;AAAA,OAAA,EAEJ;AAAA,KAAA,EACF,CAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;ACxFO,SAAS,YAAA,CAAoB;AAAA,EAClC,GAAA;AAAA,EACA,QAAA,GAAW,MAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR;AACF,CAAA,EAA6B;AAC3B,EAAA,MAAM,OAAA,GAAU,IAAI,QAAA,EAAS;AAC7B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAUmB,2BAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAUA,2BAAkB,OAAO,CAAA;AAEzD,EAAMA,4BAAU,MAAM;AACpB,IAAA,IAAI,CAAC,OAAA,EAAS,QAAA,CAAS,OAAO,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AAErB,EAAA,MAAM,MAAA,GAAS,CAAC,IAAA,KAAkB;AAChC,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,IAAI,SAAS,OAAA,EAAS;AACtB,IAAA,UAAA,GAAa;AAAA,MACX,QAAA,EAAU,IAAI,GAAA,CAAI,KAAA;AAAA,MAClB,QAAA,EAAU,IAAI,MAAA,CAAO,EAAA;AAAA,MACrB,KAAA,EAAO,IAAA;AAAA,MACP,GAAA,EAAK,IAAI,GAAA,CAAI;AAAA,KACd,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,MAAM,aACJ,KAAA,KAAU,OAAA,GACN,wBAAA,GACA,KAAA,KAAU,WACR,4BAAA,GACA,yBAAA;AAER,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBACEnB,cAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,MAAM,UAAA,CAAW,IAAI,CAAA;AAAA,QAC9B,SAAA,EAAWoB,KAAA;AAAA,UACT,iIAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAM,eAAA;AAAA,QAEN,0BAAApB,cAAAA,CAAC,MAAA,EAAA,EAAK,WAAU,UAAA,EACb,QAAA,EAAA,OAAA,IAAW,QAAQ,OAAA,KAAY,EAAA,mBAC9BA,cAAAA,CAAC,UAAK,SAAA,EAAU,8BAAA,EAA+B,mBAAK,CAAA,GAEpD,MAAA,CAAO,OAAO,CAAA,EAElB;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,IAAI,aAAa,QAAA,EAAU;AACzB,IAAA,uBACED,eAAAA;AAAA,MAACE,YAAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAc,OAAA,IAAW,IAAA,GAAO,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,QAC1D,aAAA,EAAe,CAAC,CAAA,KAAM,MAAA,CAAO,CAAC,CAAA;AAAA,QAC9B,IAAA,EAAI,IAAA;AAAA,QACJ,YAAA,EAAc,CAAC,IAAA,KAAS;AACtB,UAAA,IAAI,CAAC,IAAA,EAAM,UAAA,CAAW,KAAK,CAAA;AAAA,QAC7B,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAD,cAAAA,CAACE,qBAAA,EAAc,SAAA,EAAU,OACvB,QAAA,kBAAAF,cAAAA,CAACG,iBAAAA,EAAA,EAAY,CAAA,EACf,CAAA;AAAA,0BACAH,eAACI,mBAAAA,EAAA,EACE,mBAAS,GAAA,CAAI,CAAC,sBACbJ,cAAAA,CAACK,kBAAA,EAAyB,KAAA,EAAO,EAAE,KAAA,EAChC,QAAA,EAAA,CAAA,CAAE,SADY,CAAA,CAAE,KAEnB,CACD,CAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACEL,cAAAA;AAAA,IAACqB,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAS,IAAA;AAAA,MACT,IAAA,EAAM,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAAA,MACzC,YAAA,EAAc,OAAA,IAAW,IAAA,GAAO,EAAA,GAAK,OAAO,OAAO,CAAA;AAAA,MACnD,MAAA,EAAQ,CAAC,CAAA,KAAM;AACb,QAAA,MAAM,CAAA,GACJ,aAAa,QAAA,GAAW,MAAA,CAAO,EAAE,aAAA,CAAc,KAAK,CAAA,GAAI,CAAA,CAAE,aAAA,CAAc,KAAA;AAC1E,QAAA,MAAA,CAAO,CAAC,CAAA;AAAA,MACV,CAAA;AAAA,MACA,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,QAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AACrB,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAC,CAAA,CAAE,cAAmC,IAAA,EAAK;AAAA,QAC7C,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU;AAC7B,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClB;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAWD,KAAA,CAAG,KAAA,EAAO,UAAU;AAAA;AAAA,GACjC;AAEJ;ACrCA,SAAS,mBAA0B,MAAA,EAAqD;AACtF,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,MAAA,CAAO,WAAA,EAAY;AAC3C,EAAA,IAAI,CAAC,QAAA,EAAU,OAAO,EAAC;AACvB,EAAA,OAAO;AAAA,IACL,QAAA,EAAU,QAAA;AAAA,IACV,MAAM,QAAA,KAAa,MAAA,GAAS,OAAO,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GAAI,MAAA;AAAA,IAC7D,OAAO,QAAA,KAAa,OAAA,GAAU,OAAO,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA,GAAI,MAAA;AAAA,IAChE,MAAA,EAAQ;AAAA,GACV;AACF;AASA,SAAS,eAAA,CAAuB;AAAA,EAC9B,MAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAgC;AAC9B,EAAA,MAAM,SAAS,MAAA,CAAO,MAAA;AACtB,EAAA,MAAM,QAAA,GAAW,OAAO,WAAA,EAAY;AACpC,EAAA,MAAM,OAAA,GAAU,gBAAA,IAAoB,CAAC,QAAA,IAAY,OAAO,EAAA,KAAO,UAAA;AAC/D,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAW,UAAA,EAAY,SAAA,EAAW,YAAY,UAAA,EAAW,GAC3EE,oBAAA,CAAY,EAAE,IAAI,MAAA,CAAO,EAAA,EAAI,QAAA,EAAU,CAAC,SAAS,CAAA;AAEnD,EAAA,MAAM,OAAA,GAAU,OAAO,WAAA,EAAY;AACnC,EAAA,MAAM,OAAA,GAAU,aAAA,IAAiB,MAAA,CAAO,UAAA,EAAW;AACnD,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM,KAAA,IAAS,MAAA;AAC9C,EAAA,MAAM,aACJ,KAAA,KAAU,OAAA,GAAU,wBAAA,GAA2B,KAAA,KAAU,WAAW,4BAAA,GAA+B,yBAAA;AAErG,EAAA,uBACEvB,eAAAA;AAAA,IAACwB,YAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,SAAS,MAAA,CAAO,OAAA;AAAA,MAChB,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,OAAO,OAAA,EAAQ;AAAA,QACtB,SAAA,EAAWC,aAAA,CAAI,SAAA,CAAU,QAAA,CAAS,SAAS,CAAA;AAAA,QAC3C,UAAA;AAAA,QACA,OAAA,EAAS,aAAa,GAAA,GAAM,CAAA;AAAA,QAC5B,GAAG,mBAAmB,MAAM,CAAA;AAAA,QAC5B,GAAI,QAAA,GAAW,EAAE,eAAA,EAAiB,wBAAA,KAA6B;AAAC,OAClE;AAAA,MACA,SAAA,EAAWJ,KAAAA;AAAA,QACT,wCAAA;AAAA,QACA,QAAA,IAAY;AAAA,OACd;AAAA,MACC,GAAG,UAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAArB,gBAAC,KAAA,EAAA,EAAI,SAAA,EAAWqB,KAAAA,CAAG,yBAAA,EAA2B,UAAU,CAAA,EACrD,QAAA,EAAA;AAAA,UAAA,OAAA,oBACCpB,cAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAU,+GAAA;AAAA,cACT,GAAG,SAAA;AAAA,cACJ,YAAA,EAAW,aAAA;AAAA,cAEX,QAAA,kBAAAA,cAAAA,CAACyB,wBAAA,EAAA,EAAa,SAAA,EAAU,aAAA,EAAc;AAAA;AAAA,WACxC;AAAA,UAED,0BACC1B,eAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,OAAO,uBAAA,EAAwB;AAAA,cACxC,SAAA,EAAU,kEAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA2B,qBAAA,CAAW,MAAA,CAAO,SAAA,CAAU,MAAA,EAAQ,MAAA,CAAO,YAAY,CAAA;AAAA,gBACvD,OAAA,KAAY,wBACX1B,cAAAA,CAAC2B,uBAAQ,SAAA,EAAU,aAAA,EAAc,IAC/B,OAAA,KAAY,MAAA,mBACd3B,cAAAA,CAAC4B,qBAAA,EAAA,EAAU,WAAU,aAAA,EAAc,CAAA,mBAEnC5B,cAAAA,CAAC6B,0BAAA,EAAA,EAAe,WAAU,wBAAA,EAAyB;AAAA;AAAA;AAAA,WAEvD,mBAEA7B,cAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EACb,QAAA,EAAA0B,qBAAA,CAAW,MAAA,CAAO,SAAA,CAAU,MAAA,EAAQ,MAAA,CAAO,UAAA,EAAY,CAAA,EAC1D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,cAAA,IAAkB,MAAA,CAAO,YAAA,EAAa,oBACrC1B,cAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAa,OAAO,gBAAA,EAAiB;AAAA,YACrC,YAAA,EAAc,OAAO,gBAAA,EAAiB;AAAA,YACtC,SAAA,EAAWoB,KAAAA;AAAA,cACT,2GAAA;AAAA,cACA,MAAA,CAAO,eAAc,IAAK;AAAA,aAC5B;AAAA,YACA,YAAA,EAAW;AAAA;AAAA;AACb;AAAA;AAAA,GAEJ;AAEJ;AAEO,SAAS,SAAA,CAAiC;AAAA,EAC/C,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,EAAA;AAAA,EACX,eAAA;AAAA,EACA,aAAA,GAAgB,IAAA;AAAA,EAChB,gBAAA,GAAmB,IAAA;AAAA,EACnB,sBAAA,GAAyB,IAAA;AAAA,EACzB,sBAAA,GAAyB,KAAA;AAAA,EACzB,oBAAA,GAAuB,KAAA;AAAA,EACvB,mBAAA,GAAsB,KAAA;AAAA,EACtB,UAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,gBAAA,GAAmB,KAAA;AAAA,EACnB,aAAA,GAAgB,KAAA;AAAA,EAChB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA,EAAY,cAAA;AAAA,EACZ,kBAAA;AAAA,EACA,OAAA,EAAS,WAAA;AAAA,EACT,eAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,EAA0B;AACxB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAUU,iBAAA,CAAA,QAAA,CAAuB,EAAE,CAAA;AAC7E,EAAA,MAAM,UAAU,WAAA,IAAe,eAAA;AAC/B,EAAA,MAAM,UAAA,GAAuC,CAAC,OAAA,KAAY;AACxD,IAAA,IAAI,eAAA,kBAAiC,OAAO,CAAA;AAC5C,IAAA,IAAI,CAAC,WAAA,EAAa,kBAAA,CAAmB,OAAO,CAAA;AAAA,EAC9C,CAAA;AAEA,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAUA,iBAAA,CAAA,QAAA,CAA0B;AAAA,IAClF,SAAA,EAAW,CAAA;AAAA,IACX;AAAA,GACD,CAAA;AACD,EAAA,MAAM,aAAa,cAAA,IAAkB,kBAAA;AACrC,EAAA,MAAM,aAAA,GAA6C,CAAC,OAAA,KAAY;AAC9D,IAAA,IAAI,kBAAA,qBAAuC,OAAO,CAAA;AAClD,IAAA,IAAI,CAAC,cAAA,EAAgB,qBAAA,CAAsB,OAAO,CAAA;AAAA,EACpD,CAAA;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAUA,iBAAA,CAAA,QAAA,CAA6B,EAAE,CAAA;AAC/E,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAUA,iBAAA,CAAA,QAAA,CAA0B,EAAE,CAAA;AAClF,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAUA,iBAAA,CAAA,QAAA,CAA6B;AAAA,IAC3E,MAAM,EAAC;AAAA,IACP,OAAO;AAAC,GACT,CAAA;AACD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAUA,iBAAA,CAAA,QAAA;AAAA,IAA2B,MACrE,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAO,CAAA,CAAU,EAAA,IAAO,CAAA,CAAU,WAAA,IAAe,MAAA,CAAO,CAAC,CAAC;AAAA,GAC5E;AAEA,EAAA,MAAM,cAAA,GAAuBA,0BAAiC,MAAM;AAClE,IAAA,OAAO,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,KAAQ;AAC1B,MAAA,MAAM,OAAO,GAAA,CAAI,IAAA;AACjB,MAAA,IAAI,IAAA,EAAM,QAAA,IAAY,CAAC,GAAA,CAAI,IAAA,EAAM;AAC/B,QAAA,OAAO;AAAA,UACL,GAAG,GAAA;AAAA,UACH,IAAA,EAAM,CAAC,GAAA,qBACL9B,cAAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,UAAU,IAAA,CAAK,QAAA;AAAA,cACf,SAAS,IAAA,CAAK,OAAA;AAAA,cACd,OAAO,IAAA,CAAK,KAAA;AAAA,cACZ;AAAA;AAAA;AACF,SAEJ;AAAA,MACF;AACA,MAAA,OAAO,GAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,EAAA,MAAM,QAAQ+B,wBAAA,CAAc;AAAA,IAC1B,IAAA;AAAA,IACA,OAAA,EAAS,cAAA;AAAA,IACT,KAAA,EAAO;AAAA,MACL,OAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,eAAA,EAAiB,UAAA;AAAA,IACjB,kBAAA,EAAoB,aAAA;AAAA,IACpB,qBAAA,EAAuB,gBAAA;AAAA,IACvB,wBAAA,EAA0B,mBAAA;AAAA,IAC1B,qBAAA,EAAuB,gBAAA;AAAA,IACvB,mBAAA,EAAqB,cAAA;AAAA,IACrB,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAW,SAAA,IAAa,EAAA;AAAA,IACxB,QAAA;AAAA,IACA,gBAAA,EAAkB,UAAA;AAAA,IAClB,iBAAiBC,0BAAA,EAAgB;AAAA,IACjC,iBAAA,EAAmB,aAAA,IAAiB,CAAC,aAAA,GAAgBC,8BAAkB,GAAI,MAAA;AAAA,IAC3E,qBAAqBC,8BAAA,EAAoB;AAAA,IACzC,qBAAA,EACE,gBAAA,IAAoB,CAAC,gBAAA,GAAmBC,kCAAsB,GAAI;AAAA,GACrE,CAAA;AAED,EAAA,MAAM,OAAA,GAAUC,eAAA;AAAA,IACdC,cAAA,CAAUC,kBAAa,EAAE,oBAAA,EAAsB,EAAE,QAAA,EAAU,CAAA,IAAK,CAAA;AAAA,IAChED,cAAA,CAAUE,gBAAA,EAAa,EAAE,oBAAA,EAAsB,EAAE,OAAO,GAAA,EAAK,SAAA,EAAW,CAAA,EAAE,EAAG,CAAA;AAAA,IAC7EF,eAAUG,mBAAc;AAAA,GAC1B;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAwB;AAC7C,IAAA,MAAM,EAAE,MAAA,EAAQ,IAAA,EAAK,GAAI,KAAA;AACzB,IAAA,IAAI,CAAC,IAAA,IAAQ,MAAA,CAAO,EAAA,KAAO,KAAK,EAAA,EAAI;AACpC,IAAA,cAAA,CAAe,CAAC,IAAA,KAAS;AACvB,MAAA,MAAM,IAAA,GAAO,IAAA,CAAK,MAAA,GAAS,IAAA,GAAO,KAAA,CAAM,iBAAA,EAAkB,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,EAAE,CAAA;AAC3E,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,OAAA,CAAQ,MAAA,CAAO,EAAY,CAAA;AACjD,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,OAAA,CAAQ,IAAA,CAAK,EAAY,CAAA;AAC/C,MAAA,IAAI,QAAA,GAAW,CAAA,IAAK,QAAA,GAAW,CAAA,EAAG,OAAO,IAAA;AACzC,MAAA,OAAOC,kBAAA,CAAU,IAAA,EAAM,QAAA,EAAU,QAAQ,CAAA;AAAA,IAC3C,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,MAAM,oBAAA,GAAuB,MAAM,qBAAA,EAAsB,CAAE,IAAI,CAAC,CAAA,KAAM,EAAE,EAAE,CAAA;AAE1E,EAAA,uBACE1C,eAAAA,CAAC,KAAA,EAAA,EAAI,WAAWqB,KAAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA,EACjD,QAAA,EAAA;AAAA,oBAAApB,cAAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,sBAAA;AAAA,QACA,mBAAA;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBAEAA,cAAAA;AAAA,MAAC0C,eAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,kBAAA,EAAoBC,kBAAA;AAAA,QACpB,SAAA,EAAW,CAACC,kCAAwB,CAAA;AAAA,QACpC,SAAA,EAAW,aAAA;AAAA,QAEX,QAAA,kBAAA7C,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EACZ,QAAA,EAAA;AAAA,UAAA,OAAA,oBACCC,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kIAAiI,QAAA,EAAA,eAAA,EAEhJ,CAAA;AAAA,0BAEFD,eAAAA;AAAA,YAAC8C,QAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,oBAAA,GAAuB,KAAA,CAAM,YAAA,EAAa,GAAI;AAAA,eACvD;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA7C,cAAAA,CAAC8C,cAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,eAAA,EAAgB,CAAE,GAAA,CAAI,CAAC,WAAA,qBAC5B9C,cAAAA,CAAC+C,WAAA,EAAA,EACC,QAAA,kBAAA/C,cAAAA;AAAA,kBAACgD,wBAAA;AAAA,kBAAA;AAAA,oBACC,KAAA,EAAO,oBAAA;AAAA,oBACP,QAAA,EAAUC,sCAAA;AAAA,oBAET,QAAA,EAAA,WAAA,CAAY,OAAA,CAAQ,GAAA,CAAI,CAAC,2BACxBjD,cAAAA;AAAA,sBAAC,eAAA;AAAA,sBAAA;AAAA,wBAEC,MAAA;AAAA,wBACA,gBAAA,EAAkB,sBAAA;AAAA,wBAClB,cAAA,EAAgB,oBAAA;AAAA,wBAChB;AAAA,uBAAA;AAAA,sBAJK,MAAA,CAAO;AAAA,qBAMf;AAAA;AAAA,iBACH,EAAA,EAda,WAAA,CAAY,EAe3B,CACD,CAAA,EACH,CAAA;AAAA,gCACAA,cAAAA,CAACkD,YAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,WAAA,EAAY,CAAE,IAAA,CAAK,MAAA,KAAW,CAAA,mBACnClD,cAAAA,CAAC+C,WAAA,EAAA,EACC,QAAA,kBAAA/C,cAAAA;AAAA,kBAACmD,YAAA;AAAA,kBAAA;AAAA,oBACC,OAAA,EAAS,KAAA,CAAM,iBAAA,EAAkB,CAAE,MAAA;AAAA,oBACnC,SAAA,EAAU,wCAAA;AAAA,oBAET,QAAA,EAAA,UAAA,IAAc;AAAA;AAAA,mBAEnB,CAAA,GAEA,KAAA,CAAM,WAAA,EAAY,CAAE,KAAK,GAAA,CAAI,CAAC,GAAA,qBAC5BnD,eAAC+C,WAAA,EAAA,EACE,QAAA,EAAA,GAAA,CAAI,iBAAgB,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS;AACnC,kBAAA,MAAM,SAAS,IAAA,CAAK,MAAA;AACpB,kBAAA,MAAM,QAAA,GAAW,OAAO,WAAA,EAAY;AACpC,kBAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM,KAAA,IAAS,MAAA;AAC9C,kBAAA,uBACE/C,cAAAA;AAAA,oBAACmD,YAAA;AAAA,oBAAA;AAAA,sBAEC,KAAA,EAAO;AAAA,wBACL,KAAA,EAAO,IAAA,CAAK,MAAA,CAAO,OAAA,EAAQ;AAAA,wBAC3B,GAAI,QAAA,GACA;AAAA,0BACE,QAAA,EAAU,QAAA;AAAA,0BACV,MACE,QAAA,KAAa,MAAA,GACT,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GACtB,MAAA;AAAA,0BACN,OACE,QAAA,KAAa,OAAA,GACT,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA,GACvB,MAAA;AAAA,0BACN,MAAA,EAAQ,CAAA;AAAA,0BACR,eAAA,EAAiB;AAAA,4BAEnB;AAAC,uBACP;AAAA,sBACA,SAAA,EAAW/B,KAAAA;AAAA,wBACT,UAAU,OAAA,IAAW,YAAA;AAAA,wBACrB,UAAU,QAAA,IAAY,aAAA;AAAA,wBACtB,QAAA,IACE;AAAA,uBACJ;AAAA,sBAEC,gCAAW,IAAA,CAAK,MAAA,CAAO,UAAU,IAAA,EAAM,IAAA,CAAK,YAAY;AAAA,qBAAA;AAAA,oBA1BpD,IAAA,CAAK;AAAA,mBA2BZ;AAAA,gBAEJ,CAAC,CAAA,EAAA,EApCY,GAAA,CAAI,EAqCnB,CACD,CAAA,EAEL;AAAA;AAAA;AAAA;AACF,SAAA,EACF;AAAA;AAAA,KACF;AAAA,IAEC,gBAAA,oBACCpB,cAAAA,CAAC,mBAAA,EAAA,EAAoB,OAAc,eAAA,EAAkC;AAAA,GAAA,EAEzE,CAAA;AAEJ","file":"index.cjs","sourcesContent":["import { Button } from '@invana/ui';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@invana/forms';\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n} from 'lucide-react';\nimport type { Table } from '@tanstack/react-table';\n\nexport interface DataTablePaginationProps<TData> {\n table: Table<TData>;\n pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n table,\n pageSizeOptions = [10, 20, 50, 100],\n}: DataTablePaginationProps<TData>) {\n const { pageIndex, pageSize } = table.getState().pagination;\n const serverRowCount = table.options.rowCount;\n const total =\n typeof serverRowCount === 'number'\n ? serverRowCount\n : table.getFilteredRowModel().rows.length;\n const start = total === 0 ? 0 : pageIndex * pageSize + 1;\n const end = Math.min((pageIndex + 1) * pageSize, total);\n\n return (\n <div className=\"flex items-center justify-between gap-4 px-2 py-2 text-sm\">\n <div className=\"text-muted-foreground\">\n {total === 0 ? 'No rows' : `Showing ${start}–${end} of ${total}`}\n </div>\n <div className=\"flex items-center gap-4\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-muted-foreground\">Rows per page</span>\n <Select\n value={String(pageSize)}\n onValueChange={(v) => table.setPageSize(Number(v))}\n >\n <SelectTrigger className=\"h-8 w-[72px]\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((s) => (\n <SelectItem key={s} value={String(s)}>\n {s}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"text-muted-foreground tabular-nums\">\n Page {pageIndex + 1} of {table.getPageCount() || 1}\n </div>\n <div className=\"flex items-center gap-1\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n aria-label=\"First page\"\n >\n <ChevronsLeft className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n aria-label=\"Previous page\"\n >\n <ChevronLeft className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n aria-label=\"Next page\"\n >\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n aria-label=\"Last page\"\n >\n <ChevronsRight className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n","import {\n Button,\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@invana/ui';\nimport { Settings2 } from 'lucide-react';\nimport type { Table } from '@tanstack/react-table';\n\nexport interface DataTableToolbarProps<TData> {\n table: Table<TData>;\n enableColumnVisibility?: boolean;\n enableColumnPinning?: boolean;\n children?: React.ReactNode;\n}\n\nexport function DataTableToolbar<TData>({\n table,\n enableColumnVisibility = true,\n enableColumnPinning = false,\n children,\n}: DataTableToolbarProps<TData>) {\n const toggleableCols = table\n .getAllLeafColumns()\n .filter((c) => c.getCanHide());\n\n return (\n <div className=\"flex items-center justify-between gap-2 px-2 py-2\">\n <div className=\"flex items-center gap-2\">{children}</div>\n <div className=\"flex items-center gap-2\">\n {enableColumnVisibility && toggleableCols.length > 0 && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"h-8\">\n <Settings2 className=\"mr-2 h-4 w-4\" />\n Columns\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-48\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {toggleableCols.map((col) => (\n <DropdownMenuCheckboxItem\n key={col.id}\n className=\"capitalize\"\n checked={col.getIsVisible()}\n onCheckedChange={(v) => col.toggleVisibility(!!v)}\n onSelect={(e) => e.preventDefault()}\n >\n {String(col.columnDef.header ?? col.id)}\n </DropdownMenuCheckboxItem>\n ))}\n {enableColumnPinning && (\n <>\n <DropdownMenuSeparator />\n <DropdownMenuLabel>Pinning</DropdownMenuLabel>\n {table.getAllLeafColumns().map((col) => {\n if (!col.getCanPin()) return null;\n const pinned = col.getIsPinned();\n return (\n <div\n key={col.id}\n className=\"flex items-center justify-between px-2 py-1 text-sm\"\n >\n <span className=\"capitalize truncate\">\n {String(col.columnDef.header ?? col.id)}\n </span>\n <div className=\"flex items-center gap-1\">\n <button\n type=\"button\"\n onClick={() =>\n col.pin(pinned === 'left' ? false : 'left')\n }\n className={`rounded px-1.5 py-0.5 text-xs ${\n pinned === 'left'\n ? 'bg-primary text-primary-foreground'\n : 'bg-muted hover:bg-muted/70'\n }`}\n >\n L\n </button>\n <button\n type=\"button\"\n onClick={() =>\n col.pin(pinned === 'right' ? false : 'right')\n }\n className={`rounded px-1.5 py-0.5 text-xs ${\n pinned === 'right'\n ? 'bg-primary text-primary-foreground'\n : 'bg-muted hover:bg-muted/70'\n }`}\n >\n R\n </button>\n </div>\n </div>\n );\n })}\n </>\n )}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n );\n}\n","import * as React from 'react';\nimport { cn } from '@invana/ui';\nimport {\n Input,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@invana/forms';\nimport type { CellContext } from '@tanstack/react-table';\nimport type { CellEditHandler, EditOption, EditType } from './types';\n\nexport interface EditableCellProps<TData> {\n ctx: CellContext<TData, unknown>;\n editType?: EditType;\n options?: EditOption[];\n align?: 'left' | 'center' | 'right';\n onCellEdit?: CellEditHandler<TData>;\n}\n\nexport function EditableCell<TData>({\n ctx,\n editType = 'text',\n options,\n align = 'left',\n onCellEdit,\n}: EditableCellProps<TData>) {\n const initial = ctx.getValue();\n const [editing, setEditing] = React.useState(false);\n const [draft, setDraft] = React.useState<unknown>(initial);\n\n React.useEffect(() => {\n if (!editing) setDraft(initial);\n }, [initial, editing]);\n\n const commit = (next: unknown) => {\n setEditing(false);\n if (next === initial) return;\n onCellEdit?.({\n rowIndex: ctx.row.index,\n columnId: ctx.column.id,\n value: next,\n row: ctx.row.original,\n });\n };\n\n const alignClass =\n align === 'right'\n ? 'text-right justify-end'\n : align === 'center'\n ? 'text-center justify-center'\n : 'text-left justify-start';\n\n if (!editing) {\n return (\n <button\n type=\"button\"\n onClick={() => setEditing(true)}\n className={cn(\n 'group flex w-full items-center rounded-sm px-1.5 py-1 text-sm hover:bg-muted/60 focus:outline-none focus:ring-2 focus:ring-ring',\n alignClass,\n )}\n title=\"Click to edit\"\n >\n <span className=\"truncate\">\n {initial == null || initial === '' ? (\n <span className=\"text-muted-foreground italic\">empty</span>\n ) : (\n String(initial)\n )}\n </span>\n </button>\n );\n }\n\n if (editType === 'select') {\n return (\n <Select\n defaultValue={initial == null ? undefined : String(initial)}\n onValueChange={(v) => commit(v)}\n open\n onOpenChange={(open) => {\n if (!open) setEditing(false);\n }}\n >\n <SelectTrigger className=\"h-8\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options?.map((o) => (\n <SelectItem key={o.value} value={o.value}>\n {o.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n );\n }\n\n return (\n <Input\n autoFocus\n type={editType === 'number' ? 'number' : 'text'}\n defaultValue={initial == null ? '' : String(initial)}\n onBlur={(e) => {\n const v =\n editType === 'number' ? Number(e.currentTarget.value) : e.currentTarget.value;\n commit(v);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n (e.currentTarget as HTMLInputElement).blur();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n setEditing(false);\n }\n }}\n className={cn('h-8', alignClass)}\n />\n );\n}\n","import * as React from 'react';\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type ColumnOrderState,\n type ColumnPinningState,\n type Header,\n type OnChangeFn,\n type PaginationState,\n type RowData,\n type SortingState,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n closestCenter,\n useSensor,\n useSensors,\n type DragEndEvent,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n arrayMove,\n horizontalListSortingStrategy,\n useSortable,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n cn,\n} from '@invana/ui';\nimport { ArrowDown, ArrowUp, ChevronsUpDown, GripVertical } from 'lucide-react';\nimport { DataTablePagination } from './data-table-pagination';\nimport { DataTableToolbar } from './data-table-toolbar';\nimport { EditableCell } from './editable-cell';\nimport type { CellEditHandler } from './types';\n\nexport interface DataTableProps<TData extends RowData> {\n columns: ColumnDef<TData, any>[];\n data: TData[];\n pageSize?: number;\n pageSizeOptions?: number[];\n enableSorting?: boolean;\n enablePagination?: boolean;\n enableColumnVisibility?: boolean;\n enableColumnReordering?: boolean;\n enableColumnResizing?: boolean;\n enableColumnPinning?: boolean;\n onCellEdit?: CellEditHandler<TData>;\n toolbar?: React.ReactNode;\n className?: string;\n emptyState?: React.ReactNode;\n /** Server-side mode: skip client pagination — `data` is already the current page. Requires `pageCount` (or `rowCount`). */\n manualPagination?: boolean;\n /** Server-side mode: skip client sorting — caller refetches when `sorting` changes. */\n manualSorting?: boolean;\n /** Total pages on server (for manualPagination). */\n pageCount?: number;\n /** Total rows on server (drives \"Showing X–Y of Z\" in manual mode). */\n rowCount?: number;\n /** Controlled pagination state. */\n pagination?: PaginationState;\n onPaginationChange?: OnChangeFn<PaginationState>;\n /** Controlled sorting state. */\n sorting?: SortingState;\n onSortingChange?: OnChangeFn<SortingState>;\n /** Show a loading overlay over the table body. */\n loading?: boolean;\n}\n\nfunction getCommonPinStyles<TData>(header: Header<TData, unknown>): React.CSSProperties {\n const isPinned = header.column.getIsPinned();\n if (!isPinned) return {};\n return {\n position: 'sticky',\n left: isPinned === 'left' ? header.column.getStart('left') : undefined,\n right: isPinned === 'right' ? header.column.getAfter('right') : undefined,\n zIndex: 2,\n };\n}\n\ninterface DraggableHeaderProps<TData> {\n header: Header<TData, unknown>;\n enableReordering: boolean;\n enableResizing: boolean;\n enableSorting: boolean;\n}\n\nfunction DraggableHeader<TData>({\n header,\n enableReordering,\n enableResizing,\n enableSorting,\n}: DraggableHeaderProps<TData>) {\n const column = header.column;\n const isPinned = column.getIsPinned();\n const canDrag = enableReordering && !isPinned && column.id !== '__select';\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n useSortable({ id: column.id, disabled: !canDrag });\n\n const sortDir = column.getIsSorted();\n const canSort = enableSorting && column.getCanSort();\n const align = column.columnDef.meta?.align ?? 'left';\n const alignClass =\n align === 'right' ? 'justify-end text-right' : align === 'center' ? 'justify-center text-center' : 'justify-start text-left';\n\n return (\n <TableHead\n ref={setNodeRef}\n colSpan={header.colSpan}\n style={{\n width: header.getSize(),\n transform: CSS.Translate.toString(transform),\n transition,\n opacity: isDragging ? 0.6 : 1,\n ...getCommonPinStyles(header),\n ...(isPinned ? { backgroundColor: 'hsl(var(--background))' } : {}),\n }}\n className={cn(\n 'group relative select-none bg-muted/40',\n isPinned && 'bg-background shadow-[inset_-1px_0_0_0_hsl(var(--border))]',\n )}\n {...attributes}\n >\n <div className={cn('flex items-center gap-1', alignClass)}>\n {canDrag && (\n <button\n type=\"button\"\n className=\"cursor-grab text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing\"\n {...listeners}\n aria-label=\"Drag column\"\n >\n <GripVertical className=\"h-3.5 w-3.5\" />\n </button>\n )}\n {canSort ? (\n <button\n type=\"button\"\n onClick={column.getToggleSortingHandler()}\n className=\"inline-flex items-center gap-1 font-medium hover:text-foreground\"\n >\n {flexRender(column.columnDef.header, header.getContext())}\n {sortDir === 'asc' ? (\n <ArrowUp className=\"h-3.5 w-3.5\" />\n ) : sortDir === 'desc' ? (\n <ArrowDown className=\"h-3.5 w-3.5\" />\n ) : (\n <ChevronsUpDown className=\"h-3.5 w-3.5 opacity-50\" />\n )}\n </button>\n ) : (\n <span className=\"font-medium\">\n {flexRender(column.columnDef.header, header.getContext())}\n </span>\n )}\n </div>\n {enableResizing && column.getCanResize() && (\n <button\n type=\"button\"\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n className={cn(\n 'absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none bg-transparent hover:bg-border',\n column.getIsResizing() && 'bg-primary',\n )}\n aria-label=\"Resize column\"\n />\n )}\n </TableHead>\n );\n}\n\nexport function DataTable<TData extends RowData>({\n columns,\n data,\n pageSize = 10,\n pageSizeOptions,\n enableSorting = true,\n enablePagination = true,\n enableColumnVisibility = true,\n enableColumnReordering = false,\n enableColumnResizing = false,\n enableColumnPinning = false,\n onCellEdit,\n toolbar,\n className,\n emptyState,\n manualPagination = false,\n manualSorting = false,\n pageCount,\n rowCount,\n pagination: paginationProp,\n onPaginationChange,\n sorting: sortingProp,\n onSortingChange,\n loading = false,\n}: DataTableProps<TData>) {\n const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);\n const sorting = sortingProp ?? internalSorting;\n const setSorting: OnChangeFn<SortingState> = (updater) => {\n if (onSortingChange) onSortingChange(updater);\n if (!sortingProp) setInternalSorting(updater);\n };\n\n const [internalPagination, setInternalPagination] = React.useState<PaginationState>({\n pageIndex: 0,\n pageSize,\n });\n const pagination = paginationProp ?? internalPagination;\n const setPagination: OnChangeFn<PaginationState> = (updater) => {\n if (onPaginationChange) onPaginationChange(updater);\n if (!paginationProp) setInternalPagination(updater);\n };\n\n const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});\n const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({\n left: [],\n right: [],\n });\n const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(() =>\n columns.map((c, i) => (c as any).id ?? (c as any).accessorKey ?? String(i)),\n );\n\n const wrappedColumns = React.useMemo<ColumnDef<TData, any>[]>(() => {\n return columns.map((col) => {\n const meta = col.meta;\n if (meta?.editable && !col.cell) {\n return {\n ...col,\n cell: (ctx) => (\n <EditableCell\n ctx={ctx}\n editType={meta.editType}\n options={meta.options}\n align={meta.align}\n onCellEdit={onCellEdit}\n />\n ),\n };\n }\n return col;\n });\n }, [columns, onCellEdit]);\n\n const table = useReactTable({\n data,\n columns: wrappedColumns,\n state: {\n sorting,\n pagination,\n columnFilters,\n columnVisibility,\n columnPinning,\n columnOrder,\n },\n onSortingChange: setSorting,\n onPaginationChange: setPagination,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnPinningChange: setColumnPinning,\n onColumnOrderChange: setColumnOrder,\n enableSorting,\n enableColumnResizing,\n enableColumnPinning,\n manualPagination,\n manualSorting,\n pageCount: pageCount ?? -1,\n rowCount,\n columnResizeMode: 'onChange',\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel:\n enablePagination && !manualPagination ? getPaginationRowModel() : undefined,\n });\n\n const sensors = useSensors(\n useSensor(MouseSensor, { activationConstraint: { distance: 4 } }),\n useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 8 } }),\n useSensor(KeyboardSensor),\n );\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n if (!over || active.id === over.id) return;\n setColumnOrder((prev) => {\n const next = prev.length ? prev : table.getAllLeafColumns().map((c) => c.id);\n const oldIndex = next.indexOf(active.id as string);\n const newIndex = next.indexOf(over.id as string);\n if (oldIndex < 0 || newIndex < 0) return prev;\n return arrayMove(next, oldIndex, newIndex);\n });\n };\n\n const visibleLeafColumnIds = table.getVisibleLeafColumns().map((c) => c.id);\n\n return (\n <div className={cn('flex flex-col gap-2', className)}>\n <DataTableToolbar\n table={table}\n enableColumnVisibility={enableColumnVisibility}\n enableColumnPinning={enableColumnPinning}\n >\n {toolbar}\n </DataTableToolbar>\n\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n modifiers={[restrictToHorizontalAxis]}\n onDragEnd={handleDragEnd}\n >\n <div className=\"relative overflow-auto rounded-md border\">\n {loading && (\n <div className=\"pointer-events-none absolute inset-0 z-10 flex items-start justify-center bg-background/60 pt-12 text-sm text-muted-foreground\">\n Loading…\n </div>\n )}\n <Table\n style={{\n width: enableColumnResizing ? table.getTotalSize() : undefined,\n }}\n >\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <SortableContext\n items={visibleLeafColumnIds}\n strategy={horizontalListSortingStrategy}\n >\n {headerGroup.headers.map((header) => (\n <DraggableHeader\n key={header.id}\n header={header}\n enableReordering={enableColumnReordering}\n enableResizing={enableColumnResizing}\n enableSorting={enableSorting}\n />\n ))}\n </SortableContext>\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.length === 0 ? (\n <TableRow>\n <TableCell\n colSpan={table.getAllLeafColumns().length}\n className=\"h-24 text-center text-muted-foreground\"\n >\n {emptyState ?? 'No results.'}\n </TableCell>\n </TableRow>\n ) : (\n table.getRowModel().rows.map((row) => (\n <TableRow key={row.id}>\n {row.getVisibleCells().map((cell) => {\n const column = cell.column;\n const isPinned = column.getIsPinned();\n const align = column.columnDef.meta?.align ?? 'left';\n return (\n <TableCell\n key={cell.id}\n style={{\n width: cell.column.getSize(),\n ...(isPinned\n ? {\n position: 'sticky',\n left:\n isPinned === 'left'\n ? column.getStart('left')\n : undefined,\n right:\n isPinned === 'right'\n ? column.getAfter('right')\n : undefined,\n zIndex: 1,\n backgroundColor: 'hsl(var(--background))',\n }\n : {}),\n }}\n className={cn(\n align === 'right' && 'text-right',\n align === 'center' && 'text-center',\n isPinned &&\n 'bg-background shadow-[inset_-1px_0_0_0_hsl(var(--border))]',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n );\n })}\n </TableRow>\n ))\n )}\n </TableBody>\n </Table>\n </div>\n </DndContext>\n\n {enablePagination && (\n <DataTablePagination table={table} pageSizeOptions={pageSizeOptions} />\n )}\n </div>\n );\n}\n"]}