@codefast/ui 0.0.6 → 0.0.7
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/alert-dialog.js +3 -3
- package/dist/alert-dialog.mjs +1 -1
- package/dist/button.d.mts +2 -2
- package/dist/button.d.ts +2 -2
- package/dist/button.js +2 -2
- package/dist/button.mjs +1 -1
- package/dist/calendar.js +3 -3
- package/dist/calendar.mjs +1 -1
- package/dist/carousel.js +3 -3
- package/dist/carousel.mjs +1 -1
- package/dist/chunk-2D7SRYKN.js +135 -0
- package/dist/chunk-2D7SRYKN.js.map +1 -0
- package/dist/chunk-EDVCMWDT.mjs +158 -0
- package/dist/chunk-EDVCMWDT.mjs.map +1 -0
- package/dist/chunk-ESWGFN3R.mjs +135 -0
- package/dist/chunk-ESWGFN3R.mjs.map +1 -0
- package/dist/{chunk-Z524G4RY.mjs → chunk-KW5FJ62U.mjs} +6 -2
- package/dist/chunk-KW5FJ62U.mjs.map +1 -0
- package/dist/chunk-OCLLX7EY.js +158 -0
- package/dist/chunk-OCLLX7EY.js.map +1 -0
- package/dist/{chunk-4K26QLS2.js → chunk-U2WDUCW3.js} +6 -2
- package/dist/chunk-U2WDUCW3.js.map +1 -0
- package/dist/command.d.mts +15 -15
- package/dist/command.d.ts +15 -15
- package/dist/data-table.d.mts +16 -0
- package/dist/data-table.d.ts +16 -0
- package/dist/data-table.js +255 -0
- package/dist/data-table.js.map +1 -0
- package/dist/data-table.mjs +255 -0
- package/dist/data-table.mjs.map +1 -0
- package/dist/dropdown-menu.js +34 -157
- package/dist/dropdown-menu.js.map +1 -1
- package/dist/dropdown-menu.mjs +16 -139
- package/dist/dropdown-menu.mjs.map +1 -1
- package/dist/input-otp.d.mts +2 -2
- package/dist/input-otp.d.ts +2 -2
- package/dist/input.d.mts +58 -1
- package/dist/input.d.ts +58 -1
- package/dist/input.js +17 -6
- package/dist/input.js.map +1 -1
- package/dist/input.mjs +18 -7
- package/dist/input.mjs.map +1 -1
- package/dist/pagination.js +2 -2
- package/dist/pagination.mjs +1 -1
- package/dist/select.js +26 -134
- package/dist/select.js.map +1 -1
- package/dist/select.mjs +12 -120
- package/dist/select.mjs.map +1 -1
- package/dist/sheet.d.mts +1 -1
- package/dist/sheet.d.ts +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/dist/table.js +2 -5
- package/dist/table.js.map +1 -1
- package/dist/table.mjs +2 -5
- package/dist/table.mjs.map +1 -1
- package/package.json +8 -2
- package/src/button.tsx +4 -0
- package/src/data-table.tsx +255 -0
- package/src/input.tsx +26 -8
- package/src/table.tsx +2 -5
- package/dist/chunk-4K26QLS2.js.map +0 -1
- package/dist/chunk-Z524G4RY.mjs.map +0 -1
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }"use client";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _chunk2D7SRYKNjs = require('./chunk-2D7SRYKN.js');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
var _chunkOCLLX7EYjs = require('./chunk-OCLLX7EY.js');
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
var _chunkU2WDUCW3js = require('./chunk-U2WDUCW3.js');
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
|
|
24
|
+
|
|
25
|
+
// src/data-table.tsx
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
var _reacticons = require('@radix-ui/react-icons');
|
|
37
|
+
var _reacttable = require('@tanstack/react-table'); _createStarExport(_reacttable);
|
|
38
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
39
|
+
function DataTableViewOptions({
|
|
40
|
+
table
|
|
41
|
+
}) {
|
|
42
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOCLLX7EYjs.DropdownMenu, { children: [
|
|
43
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOCLLX7EYjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
44
|
+
_chunkU2WDUCW3js.Button,
|
|
45
|
+
{
|
|
46
|
+
variant: "outline",
|
|
47
|
+
size: "sm",
|
|
48
|
+
className: "ml-auto hidden h-8 lg:flex",
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.MixerHorizontalIcon, { className: "mr-2 size-4" }),
|
|
51
|
+
"View"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
) }),
|
|
55
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOCLLX7EYjs.DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
|
|
56
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOCLLX7EYjs.DropdownMenuLabel, { children: "Toggle columns" }),
|
|
57
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOCLLX7EYjs.DropdownMenuSeparator, {}),
|
|
58
|
+
table.getAllColumns().filter(
|
|
59
|
+
(column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
|
|
60
|
+
).map((column) => {
|
|
61
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
62
|
+
_chunkOCLLX7EYjs.DropdownMenuCheckboxItem,
|
|
63
|
+
{
|
|
64
|
+
className: "capitalize",
|
|
65
|
+
checked: column.getIsVisible(),
|
|
66
|
+
onCheckedChange: (value) => {
|
|
67
|
+
column.toggleVisibility(Boolean(value));
|
|
68
|
+
},
|
|
69
|
+
children: column.id
|
|
70
|
+
},
|
|
71
|
+
column.id
|
|
72
|
+
);
|
|
73
|
+
})
|
|
74
|
+
] })
|
|
75
|
+
] });
|
|
76
|
+
}
|
|
77
|
+
function DataTablePagination({
|
|
78
|
+
table,
|
|
79
|
+
className,
|
|
80
|
+
...props
|
|
81
|
+
}) {
|
|
82
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: _chunkG3NP7M2Njs.cn.call(void 0, "flex items-center justify-between px-2", className),
|
|
86
|
+
...props,
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-muted-foreground flex-1 text-sm", children: [
|
|
89
|
+
table.getFilteredSelectedRowModel().rows.length,
|
|
90
|
+
" of",
|
|
91
|
+
" ",
|
|
92
|
+
table.getFilteredRowModel().rows.length,
|
|
93
|
+
" row(s) selected."
|
|
94
|
+
] }),
|
|
95
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
|
|
96
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center space-x-2", children: [
|
|
97
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium", children: "Rows per page" }),
|
|
98
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
99
|
+
_chunk2D7SRYKNjs.Select,
|
|
100
|
+
{
|
|
101
|
+
value: `${table.getState().pagination.pageSize}`,
|
|
102
|
+
onValueChange: (value) => {
|
|
103
|
+
table.setPageSize(Number(value));
|
|
104
|
+
},
|
|
105
|
+
children: [
|
|
106
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2D7SRYKNjs.SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2D7SRYKNjs.SelectValue, { placeholder: table.getState().pagination.pageSize }) }),
|
|
107
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2D7SRYKNjs.SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2D7SRYKNjs.SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
] }),
|
|
112
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
|
|
113
|
+
"Page ",
|
|
114
|
+
table.getState().pagination.pageIndex + 1,
|
|
115
|
+
" of",
|
|
116
|
+
" ",
|
|
117
|
+
table.getPageCount()
|
|
118
|
+
] }),
|
|
119
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center space-x-2", children: [
|
|
120
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
121
|
+
_chunkU2WDUCW3js.Button,
|
|
122
|
+
{
|
|
123
|
+
variant: "outline",
|
|
124
|
+
size: "icon-xs",
|
|
125
|
+
className: "hidden lg:flex",
|
|
126
|
+
onClick: () => {
|
|
127
|
+
table.setPageIndex(0);
|
|
128
|
+
},
|
|
129
|
+
disabled: !table.getCanPreviousPage(),
|
|
130
|
+
children: [
|
|
131
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Go to first page" }),
|
|
132
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DoubleArrowLeftIcon, { className: "size-4" })
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
137
|
+
_chunkU2WDUCW3js.Button,
|
|
138
|
+
{
|
|
139
|
+
variant: "outline",
|
|
140
|
+
size: "icon-xs",
|
|
141
|
+
onClick: () => {
|
|
142
|
+
table.previousPage();
|
|
143
|
+
},
|
|
144
|
+
disabled: !table.getCanPreviousPage(),
|
|
145
|
+
children: [
|
|
146
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Go to previous page" }),
|
|
147
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronLeftIcon, { className: "size-4" })
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
),
|
|
151
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
152
|
+
_chunkU2WDUCW3js.Button,
|
|
153
|
+
{
|
|
154
|
+
variant: "outline",
|
|
155
|
+
size: "icon-xs",
|
|
156
|
+
onClick: () => {
|
|
157
|
+
table.nextPage();
|
|
158
|
+
},
|
|
159
|
+
disabled: !table.getCanNextPage(),
|
|
160
|
+
children: [
|
|
161
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Go to next page" }),
|
|
162
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "size-4" })
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
167
|
+
_chunkU2WDUCW3js.Button,
|
|
168
|
+
{
|
|
169
|
+
variant: "outline",
|
|
170
|
+
size: "icon-xs",
|
|
171
|
+
className: "hidden lg:flex",
|
|
172
|
+
onClick: () => {
|
|
173
|
+
table.setPageIndex(table.getPageCount() - 1);
|
|
174
|
+
},
|
|
175
|
+
disabled: !table.getCanNextPage(),
|
|
176
|
+
children: [
|
|
177
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Go to last page" }),
|
|
178
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DoubleArrowRightIcon, { className: "size-4" })
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] })
|
|
183
|
+
] })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
function DataTableColumnHeader({
|
|
189
|
+
column,
|
|
190
|
+
title,
|
|
191
|
+
className
|
|
192
|
+
}) {
|
|
193
|
+
if (!column.getCanSort()) {
|
|
194
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkG3NP7M2Njs.cn.call(void 0, className), children: title });
|
|
195
|
+
}
|
|
196
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkG3NP7M2Njs.cn.call(void 0, "flex items-center space-x-2", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOCLLX7EYjs.DropdownMenu, { children: [
|
|
197
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOCLLX7EYjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
198
|
+
_chunkU2WDUCW3js.Button,
|
|
199
|
+
{
|
|
200
|
+
variant: "ghost",
|
|
201
|
+
size: "xs",
|
|
202
|
+
className: "data-[state=open]:bg-accent -ml-3",
|
|
203
|
+
children: [
|
|
204
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: title }),
|
|
205
|
+
column.getIsSorted() === "desc" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowDownIcon, { className: "ml-2 size-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowUpIcon, { className: "ml-2 size-4" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CaretSortIcon, { className: "ml-2 size-4" })
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
) }),
|
|
209
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOCLLX7EYjs.DropdownMenuContent, { align: "start", children: [
|
|
210
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
211
|
+
_chunkOCLLX7EYjs.DropdownMenuItem,
|
|
212
|
+
{
|
|
213
|
+
onClick: () => {
|
|
214
|
+
column.toggleSorting(false);
|
|
215
|
+
},
|
|
216
|
+
children: [
|
|
217
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowUpIcon, { className: "text-muted-foreground/70 mr-2 size-3.5" }),
|
|
218
|
+
"Asc"
|
|
219
|
+
]
|
|
220
|
+
}
|
|
221
|
+
),
|
|
222
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
223
|
+
_chunkOCLLX7EYjs.DropdownMenuItem,
|
|
224
|
+
{
|
|
225
|
+
onClick: () => {
|
|
226
|
+
column.toggleSorting(true);
|
|
227
|
+
},
|
|
228
|
+
children: [
|
|
229
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ArrowDownIcon, { className: "text-muted-foreground/70 mr-2 size-3.5" }),
|
|
230
|
+
"Desc"
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
),
|
|
234
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOCLLX7EYjs.DropdownMenuSeparator, {}),
|
|
235
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
236
|
+
_chunkOCLLX7EYjs.DropdownMenuItem,
|
|
237
|
+
{
|
|
238
|
+
onClick: () => {
|
|
239
|
+
column.toggleVisibility(false);
|
|
240
|
+
},
|
|
241
|
+
children: [
|
|
242
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.EyeNoneIcon, { className: "text-muted-foreground/70 mr-2 size-3.5" }),
|
|
243
|
+
"Hide"
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
)
|
|
247
|
+
] })
|
|
248
|
+
] }) });
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
exports.DataTableColumnHeader = DataTableColumnHeader; exports.DataTablePagination = DataTablePagination; exports.DataTableViewOptions = DataTableViewOptions;
|
|
255
|
+
//# sourceMappingURL=data-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/data-table.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type * as ReactTable from \"@tanstack/react-table\";\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n EyeNoneIcon,\n MixerHorizontalIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport { Button } from \"./button\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"./select\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableViewOptions\n * -------------------------------------------------------------------------- */\n\nfunction DataTableViewOptions<TData>({\n table,\n}: {\n table: ReactTable.Table<TData>;\n}): React.JSX.Element {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"sm\"\n className=\"ml-auto hidden h-8 lg:flex\"\n >\n <MixerHorizontalIcon className=\"mr-2 size-4\" />\n View\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" && column.getCanHide(),\n )\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => {\n column.toggleVisibility(Boolean(value));\n }}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTablePagination\n * -------------------------------------------------------------------------- */\n\nfunction DataTablePagination<TData>({\n table,\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & {\n table: ReactTable.Table<TData>;\n}): React.JSX.Element {\n return (\n <div\n className={cn(\"flex items-center justify-between px-2\", className)}\n {...props}\n >\n <div className=\"text-muted-foreground flex-1 text-sm\">\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={`${table.getState().pagination.pageSize}`}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"h-8 w-[70px]\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={`${pageSize}`}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(0);\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <DoubleArrowLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.previousPage();\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.nextPage();\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(table.getPageCount() - 1);\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <DoubleArrowRightIcon className=\"size-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableColumnHeader\n * -------------------------------------------------------------------------- */\n\nfunction DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: React.HTMLAttributes<HTMLDivElement> & {\n column: ReactTable.Column<TData, TValue>;\n title: string;\n}): React.JSX.Element {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n return (\n <div className={cn(\"flex items-center space-x-2\", className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"data-[state=open]:bg-accent -ml-3\"\n >\n <span>{title}</span>\n {column.getIsSorted() === \"desc\" ? (\n <ArrowDownIcon className=\"ml-2 size-4\" />\n ) : column.getIsSorted() === \"asc\" ? (\n <ArrowUpIcon className=\"ml-2 size-4\" />\n ) : (\n <CaretSortIcon className=\"ml-2 size-4\" />\n )}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(false);\n }}\n >\n <ArrowUpIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Asc\n </DropdownMenuItem>\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(true);\n }}\n >\n <ArrowDownIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Desc\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={() => {\n column.toggleVisibility(false);\n }}\n >\n <EyeNoneIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Hide\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { DataTableViewOptions, DataTablePagination, DataTableColumnHeader };\n\nexport * from \"@tanstack/react-table\";\n"]}
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
Select,
|
|
4
|
+
SelectContent,
|
|
5
|
+
SelectItem,
|
|
6
|
+
SelectTrigger,
|
|
7
|
+
SelectValue
|
|
8
|
+
} from "./chunk-ESWGFN3R.mjs";
|
|
9
|
+
import {
|
|
10
|
+
DropdownMenu,
|
|
11
|
+
DropdownMenuCheckboxItem,
|
|
12
|
+
DropdownMenuContent,
|
|
13
|
+
DropdownMenuItem,
|
|
14
|
+
DropdownMenuLabel,
|
|
15
|
+
DropdownMenuSeparator,
|
|
16
|
+
DropdownMenuTrigger
|
|
17
|
+
} from "./chunk-EDVCMWDT.mjs";
|
|
18
|
+
import {
|
|
19
|
+
Button
|
|
20
|
+
} from "./chunk-KW5FJ62U.mjs";
|
|
21
|
+
import {
|
|
22
|
+
cn
|
|
23
|
+
} from "./chunk-UG3URV2Z.mjs";
|
|
24
|
+
|
|
25
|
+
// src/data-table.tsx
|
|
26
|
+
import {
|
|
27
|
+
ArrowDownIcon,
|
|
28
|
+
ArrowUpIcon,
|
|
29
|
+
CaretSortIcon,
|
|
30
|
+
ChevronLeftIcon,
|
|
31
|
+
ChevronRightIcon,
|
|
32
|
+
DoubleArrowLeftIcon,
|
|
33
|
+
DoubleArrowRightIcon,
|
|
34
|
+
EyeNoneIcon,
|
|
35
|
+
MixerHorizontalIcon
|
|
36
|
+
} from "@radix-ui/react-icons";
|
|
37
|
+
export * from "@tanstack/react-table";
|
|
38
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
39
|
+
function DataTableViewOptions({
|
|
40
|
+
table
|
|
41
|
+
}) {
|
|
42
|
+
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
43
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
44
|
+
Button,
|
|
45
|
+
{
|
|
46
|
+
variant: "outline",
|
|
47
|
+
size: "sm",
|
|
48
|
+
className: "ml-auto hidden h-8 lg:flex",
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "mr-2 size-4" }),
|
|
51
|
+
"View"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
) }),
|
|
55
|
+
/* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
|
|
56
|
+
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }),
|
|
57
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
58
|
+
table.getAllColumns().filter(
|
|
59
|
+
(column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
|
|
60
|
+
).map((column) => {
|
|
61
|
+
return /* @__PURE__ */ jsx(
|
|
62
|
+
DropdownMenuCheckboxItem,
|
|
63
|
+
{
|
|
64
|
+
className: "capitalize",
|
|
65
|
+
checked: column.getIsVisible(),
|
|
66
|
+
onCheckedChange: (value) => {
|
|
67
|
+
column.toggleVisibility(Boolean(value));
|
|
68
|
+
},
|
|
69
|
+
children: column.id
|
|
70
|
+
},
|
|
71
|
+
column.id
|
|
72
|
+
);
|
|
73
|
+
})
|
|
74
|
+
] })
|
|
75
|
+
] });
|
|
76
|
+
}
|
|
77
|
+
function DataTablePagination({
|
|
78
|
+
table,
|
|
79
|
+
className,
|
|
80
|
+
...props
|
|
81
|
+
}) {
|
|
82
|
+
return /* @__PURE__ */ jsxs(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: cn("flex items-center justify-between px-2", className),
|
|
86
|
+
...props,
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex-1 text-sm", children: [
|
|
89
|
+
table.getFilteredSelectedRowModel().rows.length,
|
|
90
|
+
" of",
|
|
91
|
+
" ",
|
|
92
|
+
table.getFilteredRowModel().rows.length,
|
|
93
|
+
" row(s) selected."
|
|
94
|
+
] }),
|
|
95
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
|
|
96
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
97
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
|
|
98
|
+
/* @__PURE__ */ jsxs(
|
|
99
|
+
Select,
|
|
100
|
+
{
|
|
101
|
+
value: `${table.getState().pagination.pageSize}`,
|
|
102
|
+
onValueChange: (value) => {
|
|
103
|
+
table.setPageSize(Number(value));
|
|
104
|
+
},
|
|
105
|
+
children: [
|
|
106
|
+
/* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }),
|
|
107
|
+
/* @__PURE__ */ jsx(SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
] }),
|
|
112
|
+
/* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
|
|
113
|
+
"Page ",
|
|
114
|
+
table.getState().pagination.pageIndex + 1,
|
|
115
|
+
" of",
|
|
116
|
+
" ",
|
|
117
|
+
table.getPageCount()
|
|
118
|
+
] }),
|
|
119
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
120
|
+
/* @__PURE__ */ jsxs(
|
|
121
|
+
Button,
|
|
122
|
+
{
|
|
123
|
+
variant: "outline",
|
|
124
|
+
size: "icon-xs",
|
|
125
|
+
className: "hidden lg:flex",
|
|
126
|
+
onClick: () => {
|
|
127
|
+
table.setPageIndex(0);
|
|
128
|
+
},
|
|
129
|
+
disabled: !table.getCanPreviousPage(),
|
|
130
|
+
children: [
|
|
131
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to first page" }),
|
|
132
|
+
/* @__PURE__ */ jsx(DoubleArrowLeftIcon, { className: "size-4" })
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
/* @__PURE__ */ jsxs(
|
|
137
|
+
Button,
|
|
138
|
+
{
|
|
139
|
+
variant: "outline",
|
|
140
|
+
size: "icon-xs",
|
|
141
|
+
onClick: () => {
|
|
142
|
+
table.previousPage();
|
|
143
|
+
},
|
|
144
|
+
disabled: !table.getCanPreviousPage(),
|
|
145
|
+
children: [
|
|
146
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to previous page" }),
|
|
147
|
+
/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" })
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
),
|
|
151
|
+
/* @__PURE__ */ jsxs(
|
|
152
|
+
Button,
|
|
153
|
+
{
|
|
154
|
+
variant: "outline",
|
|
155
|
+
size: "icon-xs",
|
|
156
|
+
onClick: () => {
|
|
157
|
+
table.nextPage();
|
|
158
|
+
},
|
|
159
|
+
disabled: !table.getCanNextPage(),
|
|
160
|
+
children: [
|
|
161
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to next page" }),
|
|
162
|
+
/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
/* @__PURE__ */ jsxs(
|
|
167
|
+
Button,
|
|
168
|
+
{
|
|
169
|
+
variant: "outline",
|
|
170
|
+
size: "icon-xs",
|
|
171
|
+
className: "hidden lg:flex",
|
|
172
|
+
onClick: () => {
|
|
173
|
+
table.setPageIndex(table.getPageCount() - 1);
|
|
174
|
+
},
|
|
175
|
+
disabled: !table.getCanNextPage(),
|
|
176
|
+
children: [
|
|
177
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to last page" }),
|
|
178
|
+
/* @__PURE__ */ jsx(DoubleArrowRightIcon, { className: "size-4" })
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] })
|
|
183
|
+
] })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
function DataTableColumnHeader({
|
|
189
|
+
column,
|
|
190
|
+
title,
|
|
191
|
+
className
|
|
192
|
+
}) {
|
|
193
|
+
if (!column.getCanSort()) {
|
|
194
|
+
return /* @__PURE__ */ jsx("div", { className: cn(className), children: title });
|
|
195
|
+
}
|
|
196
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center space-x-2", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
197
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
198
|
+
Button,
|
|
199
|
+
{
|
|
200
|
+
variant: "ghost",
|
|
201
|
+
size: "xs",
|
|
202
|
+
className: "data-[state=open]:bg-accent -ml-3",
|
|
203
|
+
children: [
|
|
204
|
+
/* @__PURE__ */ jsx("span", { children: title }),
|
|
205
|
+
column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { className: "ml-2 size-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { className: "ml-2 size-4" }) : /* @__PURE__ */ jsx(CaretSortIcon, { className: "ml-2 size-4" })
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
) }),
|
|
209
|
+
/* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
|
|
210
|
+
/* @__PURE__ */ jsxs(
|
|
211
|
+
DropdownMenuItem,
|
|
212
|
+
{
|
|
213
|
+
onClick: () => {
|
|
214
|
+
column.toggleSorting(false);
|
|
215
|
+
},
|
|
216
|
+
children: [
|
|
217
|
+
/* @__PURE__ */ jsx(ArrowUpIcon, { className: "text-muted-foreground/70 mr-2 size-3.5" }),
|
|
218
|
+
"Asc"
|
|
219
|
+
]
|
|
220
|
+
}
|
|
221
|
+
),
|
|
222
|
+
/* @__PURE__ */ jsxs(
|
|
223
|
+
DropdownMenuItem,
|
|
224
|
+
{
|
|
225
|
+
onClick: () => {
|
|
226
|
+
column.toggleSorting(true);
|
|
227
|
+
},
|
|
228
|
+
children: [
|
|
229
|
+
/* @__PURE__ */ jsx(ArrowDownIcon, { className: "text-muted-foreground/70 mr-2 size-3.5" }),
|
|
230
|
+
"Desc"
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
),
|
|
234
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
235
|
+
/* @__PURE__ */ jsxs(
|
|
236
|
+
DropdownMenuItem,
|
|
237
|
+
{
|
|
238
|
+
onClick: () => {
|
|
239
|
+
column.toggleVisibility(false);
|
|
240
|
+
},
|
|
241
|
+
children: [
|
|
242
|
+
/* @__PURE__ */ jsx(EyeNoneIcon, { className: "text-muted-foreground/70 mr-2 size-3.5" }),
|
|
243
|
+
"Hide"
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
)
|
|
247
|
+
] })
|
|
248
|
+
] }) });
|
|
249
|
+
}
|
|
250
|
+
export {
|
|
251
|
+
DataTableColumnHeader,
|
|
252
|
+
DataTablePagination,
|
|
253
|
+
DataTableViewOptions
|
|
254
|
+
};
|
|
255
|
+
//# sourceMappingURL=data-table.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type * as ReactTable from \"@tanstack/react-table\";\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n EyeNoneIcon,\n MixerHorizontalIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport { Button } from \"./button\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"./select\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableViewOptions\n * -------------------------------------------------------------------------- */\n\nfunction DataTableViewOptions<TData>({\n table,\n}: {\n table: ReactTable.Table<TData>;\n}): React.JSX.Element {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"sm\"\n className=\"ml-auto hidden h-8 lg:flex\"\n >\n <MixerHorizontalIcon className=\"mr-2 size-4\" />\n View\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" && column.getCanHide(),\n )\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => {\n column.toggleVisibility(Boolean(value));\n }}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTablePagination\n * -------------------------------------------------------------------------- */\n\nfunction DataTablePagination<TData>({\n table,\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & {\n table: ReactTable.Table<TData>;\n}): React.JSX.Element {\n return (\n <div\n className={cn(\"flex items-center justify-between px-2\", className)}\n {...props}\n >\n <div className=\"text-muted-foreground flex-1 text-sm\">\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Rows per page</p>\n <Select\n value={`${table.getState().pagination.pageSize}`}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"h-8 w-[70px]\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {[10, 20, 30, 40, 50].map((pageSize) => (\n <SelectItem key={pageSize} value={`${pageSize}`}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(0);\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to first page</span>\n <DoubleArrowLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.previousPage();\n }}\n disabled={!table.getCanPreviousPage()}\n >\n <span className=\"sr-only\">Go to previous page</span>\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n onClick={() => {\n table.nextPage();\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to next page</span>\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon-xs\"\n className=\"hidden lg:flex\"\n onClick={() => {\n table.setPageIndex(table.getPageCount() - 1);\n }}\n disabled={!table.getCanNextPage()}\n >\n <span className=\"sr-only\">Go to last page</span>\n <DoubleArrowRightIcon className=\"size-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DataTableColumnHeader\n * -------------------------------------------------------------------------- */\n\nfunction DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: React.HTMLAttributes<HTMLDivElement> & {\n column: ReactTable.Column<TData, TValue>;\n title: string;\n}): React.JSX.Element {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n return (\n <div className={cn(\"flex items-center space-x-2\", className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"data-[state=open]:bg-accent -ml-3\"\n >\n <span>{title}</span>\n {column.getIsSorted() === \"desc\" ? (\n <ArrowDownIcon className=\"ml-2 size-4\" />\n ) : column.getIsSorted() === \"asc\" ? (\n <ArrowUpIcon className=\"ml-2 size-4\" />\n ) : (\n <CaretSortIcon className=\"ml-2 size-4\" />\n )}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(false);\n }}\n >\n <ArrowUpIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Asc\n </DropdownMenuItem>\n <DropdownMenuItem\n onClick={() => {\n column.toggleSorting(true);\n }}\n >\n <ArrowDownIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Desc\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={() => {\n column.toggleVisibility(false);\n }}\n >\n <EyeNoneIcon className=\"text-muted-foreground/70 mr-2 size-3.5\" />\n Hide\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { DataTableViewOptions, DataTablePagination, DataTableColumnHeader };\n\nexport * from \"@tanstack/react-table\";\n"],"mappings":"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","names":[]}
|