@simpleapps-com/augur-web 2.2.23 → 2.2.25
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/checkbox.cjs +4 -21
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.js +3 -20
- package/dist/checkbox.js.map +1 -1
- package/dist/chunk-32XB3REY.cjs +34 -0
- package/dist/chunk-32XB3REY.cjs.map +1 -0
- package/dist/chunk-3UFEQSTN.js +26 -0
- package/dist/chunk-3UFEQSTN.js.map +1 -0
- package/dist/chunk-3VN3FX2Q.js +165 -0
- package/dist/chunk-3VN3FX2Q.js.map +1 -0
- package/dist/chunk-JXW4XE2P.cjs +143 -0
- package/dist/chunk-JXW4XE2P.cjs.map +1 -0
- package/dist/chunk-KHIHHL3A.js +52 -0
- package/dist/chunk-KHIHHL3A.js.map +1 -0
- package/dist/chunk-MOC5N2N4.js +143 -0
- package/dist/chunk-MOC5N2N4.js.map +1 -0
- package/dist/chunk-NEY26NNF.cjs +75 -0
- package/dist/chunk-NEY26NNF.cjs.map +1 -0
- package/dist/chunk-NSSX7USQ.cjs +165 -0
- package/dist/chunk-NSSX7USQ.cjs.map +1 -0
- package/dist/chunk-RGJT67PN.js +34 -0
- package/dist/chunk-RGJT67PN.js.map +1 -0
- package/dist/chunk-UB7HYAAC.js +34 -0
- package/dist/chunk-UB7HYAAC.js.map +1 -0
- package/dist/chunk-UFL6PVLI.cjs +52 -0
- package/dist/chunk-UFL6PVLI.cjs.map +1 -0
- package/dist/chunk-WFMP6TZN.js +51 -0
- package/dist/chunk-WFMP6TZN.js.map +1 -0
- package/dist/chunk-WJUDOEVB.cjs +51 -0
- package/dist/chunk-WJUDOEVB.cjs.map +1 -0
- package/dist/chunk-XGKBDPGD.cjs +26 -0
- package/dist/chunk-XGKBDPGD.cjs.map +1 -0
- package/dist/chunk-XIKSI7NY.js +75 -0
- package/dist/chunk-XIKSI7NY.js.map +1 -0
- package/dist/chunk-Z57QBVUC.cjs +34 -0
- package/dist/chunk-Z57QBVUC.cjs.map +1 -0
- package/dist/confirm-dialog.cjs +49 -0
- package/dist/confirm-dialog.cjs.map +1 -0
- package/dist/confirm-dialog.d.cts +35 -0
- package/dist/confirm-dialog.d.ts +35 -0
- package/dist/confirm-dialog.js +49 -0
- package/dist/confirm-dialog.js.map +1 -0
- package/dist/data-table.cjs +373 -0
- package/dist/data-table.cjs.map +1 -0
- package/dist/data-table.d.cts +49 -0
- package/dist/data-table.d.ts +49 -0
- package/dist/data-table.js +373 -0
- package/dist/data-table.js.map +1 -0
- package/dist/detail-panel.cjs +142 -0
- package/dist/detail-panel.cjs.map +1 -0
- package/dist/detail-panel.d.cts +59 -0
- package/dist/detail-panel.d.ts +59 -0
- package/dist/detail-panel.js +142 -0
- package/dist/detail-panel.js.map +1 -0
- package/dist/dropdown-menu.cjs +34 -140
- package/dist/dropdown-menu.cjs.map +1 -1
- package/dist/dropdown-menu.js +17 -123
- package/dist/dropdown-menu.js.map +1 -1
- package/dist/form-input.cjs +5 -28
- package/dist/form-input.cjs.map +1 -1
- package/dist/form-input.js +4 -27
- package/dist/form-input.js.map +1 -1
- package/dist/form-select.cjs +5 -45
- package/dist/form-select.cjs.map +1 -1
- package/dist/form-select.js +4 -44
- package/dist/form-select.js.map +1 -1
- package/dist/form-textarea.cjs +5 -28
- package/dist/form-textarea.cjs.map +1 -1
- package/dist/form-textarea.js +4 -27
- package/dist/form-textarea.js.map +1 -1
- package/dist/pagination.cjs +22 -161
- package/dist/pagination.cjs.map +1 -1
- package/dist/pagination.js +10 -149
- package/dist/pagination.js.map +1 -1
- package/dist/resource-tabs.cjs +25 -0
- package/dist/resource-tabs.cjs.map +1 -0
- package/dist/resource-tabs.d.cts +33 -0
- package/dist/resource-tabs.d.ts +33 -0
- package/dist/resource-tabs.js +25 -0
- package/dist/resource-tabs.js.map +1 -0
- package/dist/table.cjs +20 -72
- package/dist/table.cjs.map +1 -1
- package/dist/table.js +10 -62
- package/dist/table.js.map +1 -1
- package/dist/tabs.cjs +12 -49
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +6 -43
- package/dist/tabs.js.map +1 -1
- package/package.json +29 -7
|
@@ -0,0 +1,373 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _chunkNEY26NNFcjs = require('./chunk-NEY26NNF.cjs');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
var _chunkNSSX7USQcjs = require('./chunk-NSSX7USQ.cjs');
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
var _chunkJXW4XE2Pcjs = require('./chunk-JXW4XE2P.cjs');
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
var _chunk7EXXNELXcjs = require('./chunk-7EXXNELX.cjs');
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
var _chunk5VMEEKZ5cjs = require('./chunk-5VMEEKZ5.cjs');
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
var _chunkVL6L4GDAcjs = require('./chunk-VL6L4GDA.cjs');
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
var _chunkXGKBDPGDcjs = require('./chunk-XGKBDPGD.cjs');
|
|
34
|
+
|
|
35
|
+
// src/data-table.tsx
|
|
36
|
+
var _react = require('react'); var React = _interopRequireWildcard(_react);
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
var _reacttable = require('@tanstack/react-table');
|
|
44
|
+
var _web = require('@simpleapps-com/augur-utils/web');
|
|
45
|
+
var _lu = require('react-icons/lu');
|
|
46
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
47
|
+
var ALIGN_CLASS = { left: "text-left", center: "text-center", right: "text-right" };
|
|
48
|
+
function getAlignCn(meta) {
|
|
49
|
+
const align = _nullishCoalesce(_optionalChain([meta, 'optionalAccess', _ => _.align]), () => ( "left"));
|
|
50
|
+
return ALIGN_CLASS[align];
|
|
51
|
+
}
|
|
52
|
+
function buildTanstackColumns(columns, selectable) {
|
|
53
|
+
const cols = [];
|
|
54
|
+
if (selectable) {
|
|
55
|
+
cols.push({
|
|
56
|
+
id: "_select",
|
|
57
|
+
header: ({ table }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
58
|
+
_chunkXGKBDPGDcjs.Checkbox,
|
|
59
|
+
{
|
|
60
|
+
checked: table.getIsAllPageRowsSelected(),
|
|
61
|
+
onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v),
|
|
62
|
+
"aria-label": "Select all"
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
cell: ({ row }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
66
|
+
_chunkXGKBDPGDcjs.Checkbox,
|
|
67
|
+
{
|
|
68
|
+
checked: row.getIsSelected(),
|
|
69
|
+
onCheckedChange: (v) => row.toggleSelected(!!v),
|
|
70
|
+
"aria-label": "Select row",
|
|
71
|
+
onClick: (e) => e.stopPropagation()
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
enableSorting: false,
|
|
75
|
+
enableHiding: false,
|
|
76
|
+
meta: { align: "center" }
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
for (const col of columns) {
|
|
80
|
+
cols.push({
|
|
81
|
+
id: col.key,
|
|
82
|
+
accessorKey: col.key,
|
|
83
|
+
header: col.header,
|
|
84
|
+
enableSorting: _nullishCoalesce(col.sortable, () => ( false)),
|
|
85
|
+
enableHiding: col.hideable !== false,
|
|
86
|
+
cell: col.render ? (info) => col.render(info.row.original) : (info) => String(_nullishCoalesce(info.getValue(), () => ( ""))),
|
|
87
|
+
meta: { align: col.align }
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
return cols;
|
|
91
|
+
}
|
|
92
|
+
function exportToCsv(columns, data, filename) {
|
|
93
|
+
const headers = columns.map((c) => c.header);
|
|
94
|
+
const rows = data.map(
|
|
95
|
+
(row) => columns.map((col) => {
|
|
96
|
+
const str = String(_nullishCoalesce(row[col.key], () => ( "")));
|
|
97
|
+
return str.includes(",") || str.includes('"') || str.includes("\n") ? `"${str.replace(/"/g, '""')}"` : str;
|
|
98
|
+
})
|
|
99
|
+
);
|
|
100
|
+
const csv = [headers.join(","), ...rows.map((r) => r.join(","))].join("\n");
|
|
101
|
+
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
|
|
102
|
+
const url = URL.createObjectURL(blob);
|
|
103
|
+
const link = document.createElement("a");
|
|
104
|
+
link.href = url;
|
|
105
|
+
link.download = `${filename}.csv`;
|
|
106
|
+
link.click();
|
|
107
|
+
URL.revokeObjectURL(url);
|
|
108
|
+
}
|
|
109
|
+
function SortIndicator({ direction }) {
|
|
110
|
+
if (direction === "asc") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuArrowUp, { className: "h-4 w-4" });
|
|
111
|
+
if (direction === "desc") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuArrowDown, { className: "h-4 w-4" });
|
|
112
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuArrowUpDown, { className: "text-muted-foreground/50 h-4 w-4" });
|
|
113
|
+
}
|
|
114
|
+
function ColumnToggle({ table }) {
|
|
115
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJXW4XE2Pcjs.DropdownMenu, { children: [
|
|
116
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJXW4XE2Pcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVL6L4GDAcjs.Button, { variant: "outline", size: "sm", children: [
|
|
117
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuSettings2, { className: "mr-2 h-4 w-4" }),
|
|
118
|
+
"Columns"
|
|
119
|
+
] }) }),
|
|
120
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJXW4XE2Pcjs.DropdownMenuContent, { align: "end", children: [
|
|
121
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJXW4XE2Pcjs.DropdownMenuLabel, { children: "Toggle columns" }),
|
|
122
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJXW4XE2Pcjs.DropdownMenuSeparator, {}),
|
|
123
|
+
table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
124
|
+
_chunkJXW4XE2Pcjs.DropdownMenuCheckboxItem,
|
|
125
|
+
{
|
|
126
|
+
checked: col.getIsVisible(),
|
|
127
|
+
onCheckedChange: (v) => col.toggleVisibility(!!v),
|
|
128
|
+
children: col.columnDef.header
|
|
129
|
+
},
|
|
130
|
+
col.id
|
|
131
|
+
))
|
|
132
|
+
] })
|
|
133
|
+
] });
|
|
134
|
+
}
|
|
135
|
+
function HeaderCell({ header }) {
|
|
136
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
137
|
+
_chunkNEY26NNFcjs.TableHead,
|
|
138
|
+
{
|
|
139
|
+
className: _web.cn.call(void 0,
|
|
140
|
+
getAlignCn(header.column.columnDef.meta),
|
|
141
|
+
header.column.getCanSort() && "cursor-pointer select-none"
|
|
142
|
+
),
|
|
143
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
144
|
+
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "inline-flex items-center gap-1", children: [
|
|
145
|
+
_reacttable.flexRender.call(void 0, header.column.columnDef.header, header.getContext()),
|
|
146
|
+
header.column.getCanSort() && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortIndicator, { direction: header.column.getIsSorted() })
|
|
147
|
+
] })
|
|
148
|
+
}
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
function DataCell({ cell }) {
|
|
152
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableCell, { className: getAlignCn(cell.column.columnDef.meta), children: _reacttable.flexRender.call(void 0, cell.column.columnDef.cell, cell.getContext()) });
|
|
153
|
+
}
|
|
154
|
+
function DataRow({ row, onRowClick }) {
|
|
155
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
156
|
+
_chunkNEY26NNFcjs.TableRow,
|
|
157
|
+
{
|
|
158
|
+
"data-state": row.getIsSelected() ? "selected" : void 0,
|
|
159
|
+
className: _web.cn.call(void 0, onRowClick && "cursor-pointer"),
|
|
160
|
+
onClick: onRowClick ? () => onRowClick(row.original) : void 0,
|
|
161
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataCell, { cell }, cell.id))
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
function ExportButton({
|
|
166
|
+
columns,
|
|
167
|
+
data,
|
|
168
|
+
csvFilename
|
|
169
|
+
}) {
|
|
170
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVL6L4GDAcjs.Button, { variant: "outline", size: "sm", onClick: () => exportToCsv(columns, data, csvFilename), children: [
|
|
171
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuDownload, { className: "mr-2 h-4 w-4" }),
|
|
172
|
+
"Export"
|
|
173
|
+
] });
|
|
174
|
+
}
|
|
175
|
+
function BulkActionsBar({
|
|
176
|
+
selectedRows,
|
|
177
|
+
bulkActions
|
|
178
|
+
}) {
|
|
179
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
|
|
180
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-muted-foreground text-sm", children: [
|
|
181
|
+
selectedRows.length,
|
|
182
|
+
" selected"
|
|
183
|
+
] }),
|
|
184
|
+
bulkActions(selectedRows)
|
|
185
|
+
] });
|
|
186
|
+
}
|
|
187
|
+
function Toolbar({
|
|
188
|
+
searchable,
|
|
189
|
+
searchPlaceholder,
|
|
190
|
+
globalFilter,
|
|
191
|
+
onGlobalFilterChange,
|
|
192
|
+
selectedRows,
|
|
193
|
+
bulkActions,
|
|
194
|
+
toolbar,
|
|
195
|
+
exportCsv,
|
|
196
|
+
columns,
|
|
197
|
+
data,
|
|
198
|
+
csvFilename,
|
|
199
|
+
columnToggle,
|
|
200
|
+
table
|
|
201
|
+
}) {
|
|
202
|
+
const hasSelection = selectedRows.length > 0;
|
|
203
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-4", children: [
|
|
204
|
+
searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
205
|
+
_chunk7EXXNELXcjs.Input,
|
|
206
|
+
{
|
|
207
|
+
placeholder: searchPlaceholder,
|
|
208
|
+
value: globalFilter,
|
|
209
|
+
onChange: (e) => onGlobalFilterChange(e.target.value),
|
|
210
|
+
className: "max-w-sm"
|
|
211
|
+
}
|
|
212
|
+
),
|
|
213
|
+
hasSelection && bulkActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BulkActionsBar, { selectedRows, bulkActions }),
|
|
214
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex items-center gap-2", children: [
|
|
215
|
+
toolbar,
|
|
216
|
+
exportCsv && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExportButton, { columns, data, csvFilename }),
|
|
217
|
+
columnToggle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColumnToggle, { table })
|
|
218
|
+
] })
|
|
219
|
+
] });
|
|
220
|
+
}
|
|
221
|
+
function TableBodyContent({
|
|
222
|
+
loading,
|
|
223
|
+
colSpan,
|
|
224
|
+
emptyMessage,
|
|
225
|
+
rows,
|
|
226
|
+
onRowClick
|
|
227
|
+
}) {
|
|
228
|
+
if (loading) {
|
|
229
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableRow, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableCell, { colSpan, className: "h-24 text-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMEEKZ5cjs.Spinner, { size: "lg", className: "mx-auto" }) }) });
|
|
230
|
+
}
|
|
231
|
+
if (rows.length === 0) {
|
|
232
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableRow, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableCell, { colSpan, className: "h-24 text-center", children: emptyMessage }) });
|
|
233
|
+
}
|
|
234
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: rows.map((row) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataRow, { row, onRowClick }, row.id)) });
|
|
235
|
+
}
|
|
236
|
+
function PaginationFooter({ pagination }) {
|
|
237
|
+
if (!pagination || pagination.totalPages <= 1) return null;
|
|
238
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
239
|
+
_chunkNSSX7USQcjs.ListPagination,
|
|
240
|
+
{
|
|
241
|
+
page: pagination.page,
|
|
242
|
+
totalPages: pagination.totalPages,
|
|
243
|
+
getHref: pagination.getHref,
|
|
244
|
+
onPageChange: pagination.onPageChange
|
|
245
|
+
}
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
function useDataTable(opts) {
|
|
249
|
+
const isManualFiltering = opts.externalGlobalFilter !== void 0;
|
|
250
|
+
const isManualSorting = opts.externalSorting !== void 0;
|
|
251
|
+
const [internalSorting, setInternalSorting] = React.useState([]);
|
|
252
|
+
const [internalGlobalFilter, setInternalGlobalFilter] = React.useState("");
|
|
253
|
+
const [internalRowSelection, setInternalRowSelection] = React.useState({});
|
|
254
|
+
const [columnVisibility, setColumnVisibility] = React.useState({});
|
|
255
|
+
const sorting = _nullishCoalesce(opts.externalSorting, () => ( internalSorting));
|
|
256
|
+
const globalFilter = _nullishCoalesce(opts.externalGlobalFilter, () => ( internalGlobalFilter));
|
|
257
|
+
const rowSelectionState = _nullishCoalesce(opts.externalRowSelection, () => ( internalRowSelection));
|
|
258
|
+
const handleSortingChange = opts.onSortingChange ? (updater) => {
|
|
259
|
+
opts.onSortingChange(updater(sorting));
|
|
260
|
+
} : setInternalSorting;
|
|
261
|
+
const handleGlobalFilterChange = _nullishCoalesce(opts.onGlobalFilterChange, () => ( setInternalGlobalFilter));
|
|
262
|
+
const handleRowSelectionChange = opts.onRowSelectionChange ? (updater) => {
|
|
263
|
+
opts.onRowSelectionChange(
|
|
264
|
+
updater(rowSelectionState)
|
|
265
|
+
);
|
|
266
|
+
} : setInternalRowSelection;
|
|
267
|
+
const tanstackColumns = React.useMemo(
|
|
268
|
+
() => buildTanstackColumns(opts.columns, opts.selectable),
|
|
269
|
+
[opts.columns, opts.selectable]
|
|
270
|
+
);
|
|
271
|
+
const table = _reacttable.useReactTable.call(void 0, {
|
|
272
|
+
data: opts.data,
|
|
273
|
+
columns: tanstackColumns,
|
|
274
|
+
state: {
|
|
275
|
+
sorting,
|
|
276
|
+
globalFilter: isManualFiltering ? void 0 : globalFilter,
|
|
277
|
+
rowSelection: rowSelectionState,
|
|
278
|
+
columnVisibility
|
|
279
|
+
},
|
|
280
|
+
onSortingChange: handleSortingChange,
|
|
281
|
+
onGlobalFilterChange: isManualFiltering ? void 0 : setInternalGlobalFilter,
|
|
282
|
+
onRowSelectionChange: handleRowSelectionChange,
|
|
283
|
+
onColumnVisibilityChange: setColumnVisibility,
|
|
284
|
+
getCoreRowModel: _reacttable.getCoreRowModel.call(void 0, ),
|
|
285
|
+
getSortedRowModel: isManualSorting ? void 0 : _reacttable.getSortedRowModel.call(void 0, ),
|
|
286
|
+
getFilteredRowModel: isManualFiltering ? void 0 : _reacttable.getFilteredRowModel.call(void 0, ),
|
|
287
|
+
manualSorting: isManualSorting,
|
|
288
|
+
manualFiltering: isManualFiltering,
|
|
289
|
+
manualPagination: opts.pagination !== void 0,
|
|
290
|
+
enableRowSelection: opts.selectable,
|
|
291
|
+
getRowId: opts.getRowId ? (row) => opts.getRowId(row) : void 0
|
|
292
|
+
});
|
|
293
|
+
const selectedRows = opts.selectable ? table.getSelectedRowModel().rows.map((r) => r.original) : [];
|
|
294
|
+
return { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows };
|
|
295
|
+
}
|
|
296
|
+
function DataTable({
|
|
297
|
+
columns,
|
|
298
|
+
data,
|
|
299
|
+
searchable = false,
|
|
300
|
+
searchPlaceholder = "Search...",
|
|
301
|
+
onRowClick,
|
|
302
|
+
loading = false,
|
|
303
|
+
emptyMessage = "No results.",
|
|
304
|
+
toolbar,
|
|
305
|
+
className,
|
|
306
|
+
getRowId,
|
|
307
|
+
pagination,
|
|
308
|
+
globalFilter: externalGlobalFilter,
|
|
309
|
+
onGlobalFilterChange,
|
|
310
|
+
sortingState,
|
|
311
|
+
onSortingChange,
|
|
312
|
+
selectable = false,
|
|
313
|
+
rowSelection,
|
|
314
|
+
onRowSelectionChange,
|
|
315
|
+
bulkActions,
|
|
316
|
+
columnToggle = false,
|
|
317
|
+
exportCsv = false,
|
|
318
|
+
csvFilename = "export"
|
|
319
|
+
}) {
|
|
320
|
+
const { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows } = useDataTable({
|
|
321
|
+
columns,
|
|
322
|
+
data,
|
|
323
|
+
selectable,
|
|
324
|
+
getRowId,
|
|
325
|
+
pagination,
|
|
326
|
+
externalGlobalFilter,
|
|
327
|
+
onGlobalFilterChange,
|
|
328
|
+
externalSorting: sortingState,
|
|
329
|
+
onSortingChange,
|
|
330
|
+
externalRowSelection: rowSelection,
|
|
331
|
+
onRowSelectionChange
|
|
332
|
+
});
|
|
333
|
+
const showToolbar = searchable || toolbar || columnToggle || exportCsv || selectedRows.length > 0;
|
|
334
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _web.cn.call(void 0, "space-y-4", className), children: [
|
|
335
|
+
showToolbar && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
336
|
+
Toolbar,
|
|
337
|
+
{
|
|
338
|
+
searchable,
|
|
339
|
+
searchPlaceholder,
|
|
340
|
+
globalFilter,
|
|
341
|
+
onGlobalFilterChange: handleGlobalFilterChange,
|
|
342
|
+
selectedRows,
|
|
343
|
+
bulkActions,
|
|
344
|
+
toolbar,
|
|
345
|
+
exportCsv,
|
|
346
|
+
columns,
|
|
347
|
+
data,
|
|
348
|
+
csvFilename,
|
|
349
|
+
columnToggle,
|
|
350
|
+
table
|
|
351
|
+
}
|
|
352
|
+
),
|
|
353
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNEY26NNFcjs.Table, { children: [
|
|
354
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableHeader, { className: "bg-background sticky top-0 z-10", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableRow, { children: hg.headers.map((h) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderCell, { header: h }, h.id)) }, hg.id)) }),
|
|
355
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableBody, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
356
|
+
TableBodyContent,
|
|
357
|
+
{
|
|
358
|
+
loading,
|
|
359
|
+
colSpan: tanstackColumns.length,
|
|
360
|
+
emptyMessage,
|
|
361
|
+
rows: table.getRowModel().rows,
|
|
362
|
+
onRowClick
|
|
363
|
+
}
|
|
364
|
+
) })
|
|
365
|
+
] }),
|
|
366
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, PaginationFooter, { pagination })
|
|
367
|
+
] });
|
|
368
|
+
}
|
|
369
|
+
DataTable.displayName = "DataTable";
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
exports.DataTable = DataTable;
|
|
373
|
+
//# sourceMappingURL=data-table.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/augur-packages/augur-packages/packages/augur-web/dist/data-table.cjs","../src/data-table.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/augur-packages/augur-packages/packages/augur-web/dist/data-table.cjs","sourcesContent":[null,"/** Feature-complete admin data table built on TanStack Table. */\n\"use client\";\n\nimport * as React from \"react\";\nimport {\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n getFilteredRowModel,\n useReactTable,\n type ColumnDef as TanstackColumnDef,\n type SortingState,\n type RowSelectionState,\n type VisibilityState,\n type Table as TanstackTable,\n type Header,\n type Row,\n type Cell,\n} from \"@tanstack/react-table\";\nimport { cn } from \"@simpleapps-com/augur-utils/web\";\nimport { LuArrowDown, LuArrowUp, LuArrowUpDown, LuDownload, LuSettings2 } from \"react-icons/lu\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"./table\";\nimport { Input } from \"./input\";\nimport { Spinner } from \"./spinner\";\nimport { Checkbox } from \"./checkbox\";\nimport { Button } from \"./button\";\nimport { ListPagination } from \"./pagination\";\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuCheckboxItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n} from \"./dropdown-menu\";\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport interface ColumnDef<T> {\n key: keyof T & string;\n header: string;\n sortable?: boolean;\n render?: (row: T) => React.ReactNode;\n align?: \"left\" | \"center\" | \"right\";\n hideable?: boolean;\n}\n\nexport interface DataTablePagination {\n page: number;\n totalPages: number;\n getHref: (page: number) => string;\n onPageChange?: (page: number) => void;\n}\n\nexport interface DataTableProps<T> {\n columns: ColumnDef<T>[];\n data: T[];\n searchable?: boolean;\n searchPlaceholder?: string;\n onRowClick?: (row: T) => void;\n loading?: boolean;\n emptyMessage?: string;\n toolbar?: React.ReactNode;\n className?: string;\n getRowId?: (row: T) => string;\n pagination?: DataTablePagination;\n globalFilter?: string;\n onGlobalFilterChange?: (value: string) => void;\n sortingState?: SortingState;\n onSortingChange?: (state: SortingState) => void;\n selectable?: boolean;\n rowSelection?: RowSelectionState;\n onRowSelectionChange?: (state: RowSelectionState) => void;\n bulkActions?: (selectedRows: T[]) => React.ReactNode;\n columnToggle?: boolean;\n exportCsv?: boolean;\n csvFilename?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\nconst ALIGN_CLASS = { left: \"text-left\", center: \"text-center\", right: \"text-right\" } as const;\n\nfunction getAlignCn(meta: unknown): string {\n const align = (meta as { align?: string } | undefined)?.align ?? \"left\";\n return ALIGN_CLASS[align as keyof typeof ALIGN_CLASS];\n}\n\nfunction buildTanstackColumns<T>(\n columns: ColumnDef<T>[],\n selectable: boolean,\n): TanstackColumnDef<T, unknown>[] {\n const cols: TanstackColumnDef<T, unknown>[] = [];\n if (selectable) {\n cols.push({\n id: \"_select\",\n header: ({ table }) => (\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(v) => row.toggleSelected(!!v)}\n aria-label=\"Select row\"\n onClick={(e) => e.stopPropagation()}\n />\n ),\n enableSorting: false,\n enableHiding: false,\n meta: { align: \"center\" },\n });\n }\n for (const col of columns) {\n cols.push({\n id: col.key,\n accessorKey: col.key,\n header: col.header,\n enableSorting: col.sortable ?? false,\n enableHiding: col.hideable !== false,\n cell: col.render\n ? (info) => col.render!(info.row.original)\n : (info) => String(info.getValue() ?? \"\"),\n meta: { align: col.align },\n });\n }\n return cols;\n}\n\nfunction exportToCsv<T>(columns: ColumnDef<T>[], data: T[], filename: string) {\n const headers = columns.map((c) => c.header);\n const rows = data.map((row) =>\n columns.map((col) => {\n const str = String(row[col.key] ?? \"\");\n return str.includes(\",\") || str.includes('\"') || str.includes(\"\\n\")\n ? `\"${str.replace(/\"/g, '\"\"')}\"`\n : str;\n }),\n );\n const csv = [headers.join(\",\"), ...rows.map((r) => r.join(\",\"))].join(\"\\n\");\n const blob = new Blob([csv], { type: \"text/csv;charset=utf-8;\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = `${filename}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-components\n// ---------------------------------------------------------------------------\n\nfunction SortIndicator({ direction }: { direction: false | \"asc\" | \"desc\" }) {\n if (direction === \"asc\") return <LuArrowUp className=\"h-4 w-4\" />;\n if (direction === \"desc\") return <LuArrowDown className=\"h-4 w-4\" />;\n return <LuArrowUpDown className=\"text-muted-foreground/50 h-4 w-4\" />;\n}\n\nfunction ColumnToggle<T>({ table }: { table: TanstackTable<T> }) {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\">\n <LuSettings2 className=\"mr-2 h-4 w-4\" />\n Columns\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter((col) => col.getCanHide())\n .map((col) => (\n <DropdownMenuCheckboxItem\n key={col.id}\n checked={col.getIsVisible()}\n onCheckedChange={(v) => col.toggleVisibility(!!v)}\n >\n {col.columnDef.header as string}\n </DropdownMenuCheckboxItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\nfunction HeaderCell<T>({ header }: { header: Header<T, unknown> }) {\n return (\n <TableHead\n className={cn(\n getAlignCn(header.column.columnDef.meta),\n header.column.getCanSort() && \"cursor-pointer select-none\",\n )}\n onClick={header.column.getToggleSortingHandler()}\n >\n <span className=\"inline-flex items-center gap-1\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n {header.column.getCanSort() && <SortIndicator direction={header.column.getIsSorted()} />}\n </span>\n </TableHead>\n );\n}\n\nfunction DataCell<T>({ cell }: { cell: Cell<T, unknown> }) {\n return (\n <TableCell className={getAlignCn(cell.column.columnDef.meta)}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n );\n}\n\nfunction DataRow<T>({ row, onRowClick }: { row: Row<T>; onRowClick?: (r: T) => void }) {\n return (\n <TableRow\n data-state={row.getIsSelected() ? \"selected\" : undefined}\n className={cn(onRowClick && \"cursor-pointer\")}\n onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n >\n {row.getVisibleCells().map((cell) => (\n <DataCell key={cell.id} cell={cell} />\n ))}\n </TableRow>\n );\n}\n\nfunction ExportButton<T>({\n columns,\n data,\n csvFilename,\n}: {\n columns: ColumnDef<T>[];\n data: T[];\n csvFilename: string;\n}) {\n return (\n <Button variant=\"outline\" size=\"sm\" onClick={() => exportToCsv(columns, data, csvFilename)}>\n <LuDownload className=\"mr-2 h-4 w-4\" />\n Export\n </Button>\n );\n}\n\nfunction BulkActionsBar<T>({\n selectedRows,\n bulkActions,\n}: {\n selectedRows: T[];\n bulkActions: (rows: T[]) => React.ReactNode;\n}) {\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"text-muted-foreground text-sm\">{selectedRows.length} selected</span>\n {bulkActions(selectedRows)}\n </div>\n );\n}\n\nfunction Toolbar<T>({\n searchable,\n searchPlaceholder,\n globalFilter,\n onGlobalFilterChange,\n selectedRows,\n bulkActions,\n toolbar,\n exportCsv,\n columns,\n data,\n csvFilename,\n columnToggle,\n table,\n}: {\n searchable: boolean;\n searchPlaceholder: string;\n globalFilter: string;\n onGlobalFilterChange: (value: string) => void;\n selectedRows: T[];\n bulkActions?: (rows: T[]) => React.ReactNode;\n toolbar?: React.ReactNode;\n exportCsv: boolean;\n columns: ColumnDef<T>[];\n data: T[];\n csvFilename: string;\n columnToggle: boolean;\n table: TanstackTable<T>;\n}) {\n const hasSelection = selectedRows.length > 0;\n return (\n <div className=\"flex items-center gap-4\">\n {searchable && (\n <Input\n placeholder={searchPlaceholder}\n value={globalFilter}\n onChange={(e) => onGlobalFilterChange(e.target.value)}\n className=\"max-w-sm\"\n />\n )}\n {hasSelection && bulkActions && (\n <BulkActionsBar selectedRows={selectedRows} bulkActions={bulkActions} />\n )}\n <div className=\"ml-auto flex items-center gap-2\">\n {toolbar}\n {exportCsv && <ExportButton columns={columns} data={data} csvFilename={csvFilename} />}\n {columnToggle && <ColumnToggle table={table} />}\n </div>\n </div>\n );\n}\n\nfunction TableBodyContent<T>({\n loading,\n colSpan,\n emptyMessage,\n rows,\n onRowClick,\n}: {\n loading: boolean;\n colSpan: number;\n emptyMessage: string;\n rows: Row<T>[];\n onRowClick?: (r: T) => void;\n}) {\n if (loading) {\n return (\n <TableRow>\n <TableCell colSpan={colSpan} className=\"h-24 text-center\">\n <Spinner size=\"lg\" className=\"mx-auto\" />\n </TableCell>\n </TableRow>\n );\n }\n if (rows.length === 0) {\n return (\n <TableRow>\n <TableCell colSpan={colSpan} className=\"h-24 text-center\">\n {emptyMessage}\n </TableCell>\n </TableRow>\n );\n }\n return (\n <>\n {rows.map((row) => (\n <DataRow key={row.id} row={row} onRowClick={onRowClick} />\n ))}\n </>\n );\n}\n\nfunction PaginationFooter({ pagination }: { pagination?: DataTablePagination }) {\n if (!pagination || pagination.totalPages <= 1) return null;\n return (\n <ListPagination\n page={pagination.page}\n totalPages={pagination.totalPages}\n getHref={pagination.getHref}\n onPageChange={pagination.onPageChange}\n />\n );\n}\n\n// ---------------------------------------------------------------------------\n// Hook: encapsulates all state management and TanStack Table configuration\n// ---------------------------------------------------------------------------\n\ninterface UseDataTableOptions<T> {\n columns: ColumnDef<T>[];\n data: T[];\n selectable: boolean;\n getRowId?: (row: T) => string;\n pagination?: DataTablePagination;\n externalGlobalFilter?: string;\n onGlobalFilterChange?: (value: string) => void;\n externalSorting?: SortingState;\n onSortingChange?: (state: SortingState) => void;\n externalRowSelection?: RowSelectionState;\n onRowSelectionChange?: (state: RowSelectionState) => void;\n}\n\nfunction useDataTable<T>(opts: UseDataTableOptions<T>) {\n const isManualFiltering = opts.externalGlobalFilter !== undefined;\n const isManualSorting = opts.externalSorting !== undefined;\n\n const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);\n const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(\"\");\n const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({});\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});\n\n const sorting = opts.externalSorting ?? internalSorting;\n const globalFilter = opts.externalGlobalFilter ?? internalGlobalFilter;\n const rowSelectionState = opts.externalRowSelection ?? internalRowSelection;\n\n const handleSortingChange = opts.onSortingChange\n ? (updater: SortingState | ((prev: SortingState) => SortingState)) => {\n opts.onSortingChange!((updater as (prev: SortingState) => SortingState)(sorting));\n }\n : setInternalSorting;\n\n const handleGlobalFilterChange = opts.onGlobalFilterChange ?? setInternalGlobalFilter;\n\n const handleRowSelectionChange = opts.onRowSelectionChange\n ? (updater: RowSelectionState | ((prev: RowSelectionState) => RowSelectionState)) => {\n opts.onRowSelectionChange!(\n (updater as (prev: RowSelectionState) => RowSelectionState)(rowSelectionState),\n );\n }\n : setInternalRowSelection;\n\n const tanstackColumns = React.useMemo(\n () => buildTanstackColumns(opts.columns, opts.selectable),\n [opts.columns, opts.selectable],\n );\n\n const table = useReactTable({\n data: opts.data,\n columns: tanstackColumns,\n state: {\n sorting,\n globalFilter: isManualFiltering ? undefined : globalFilter,\n rowSelection: rowSelectionState,\n columnVisibility,\n },\n onSortingChange: handleSortingChange,\n onGlobalFilterChange: isManualFiltering ? undefined : setInternalGlobalFilter,\n onRowSelectionChange: handleRowSelectionChange,\n onColumnVisibilityChange: setColumnVisibility,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: isManualSorting ? undefined : getSortedRowModel(),\n getFilteredRowModel: isManualFiltering ? undefined : getFilteredRowModel(),\n manualSorting: isManualSorting,\n manualFiltering: isManualFiltering,\n manualPagination: opts.pagination !== undefined,\n enableRowSelection: opts.selectable,\n getRowId: opts.getRowId ? (row) => opts.getRowId!(row) : undefined,\n });\n\n const selectedRows = opts.selectable\n ? table.getSelectedRowModel().rows.map((r) => r.original)\n : [];\n\n return { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows };\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\nfunction DataTable<T>({\n columns,\n data,\n searchable = false,\n searchPlaceholder = \"Search...\",\n onRowClick,\n loading = false,\n emptyMessage = \"No results.\",\n toolbar,\n className,\n getRowId,\n pagination,\n globalFilter: externalGlobalFilter,\n onGlobalFilterChange,\n sortingState,\n onSortingChange,\n selectable = false,\n rowSelection,\n onRowSelectionChange,\n bulkActions,\n columnToggle = false,\n exportCsv = false,\n csvFilename = \"export\",\n}: DataTableProps<T>) {\n const { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows } =\n useDataTable({\n columns,\n data,\n selectable,\n getRowId,\n pagination,\n externalGlobalFilter,\n onGlobalFilterChange,\n externalSorting: sortingState,\n onSortingChange,\n externalRowSelection: rowSelection,\n onRowSelectionChange,\n });\n\n const showToolbar = searchable || toolbar || columnToggle || exportCsv || selectedRows.length > 0;\n\n return (\n <div className={cn(\"space-y-4\", className)}>\n {showToolbar && (\n <Toolbar\n searchable={searchable}\n searchPlaceholder={searchPlaceholder}\n globalFilter={globalFilter}\n onGlobalFilterChange={handleGlobalFilterChange}\n selectedRows={selectedRows}\n bulkActions={bulkActions}\n toolbar={toolbar}\n exportCsv={exportCsv}\n columns={columns}\n data={data}\n csvFilename={csvFilename}\n columnToggle={columnToggle}\n table={table}\n />\n )}\n <Table>\n <TableHeader className=\"bg-background sticky top-0 z-10\">\n {table.getHeaderGroups().map((hg) => (\n <TableRow key={hg.id}>\n {hg.headers.map((h) => (\n <HeaderCell key={h.id} header={h} />\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n <TableBodyContent\n loading={loading}\n colSpan={tanstackColumns.length}\n emptyMessage={emptyMessage}\n rows={table.getRowModel().rows}\n onRowClick={onRowClick}\n />\n </TableBody>\n </Table>\n <PaginationFooter pagination={pagination} />\n </div>\n );\n}\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\nexport type { SortingState, RowSelectionState, VisibilityState };\n"]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { SortingState, RowSelectionState } from '@tanstack/react-table';
|
|
4
|
+
export { RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
|
|
5
|
+
|
|
6
|
+
interface ColumnDef<T> {
|
|
7
|
+
key: keyof T & string;
|
|
8
|
+
header: string;
|
|
9
|
+
sortable?: boolean;
|
|
10
|
+
render?: (row: T) => React.ReactNode;
|
|
11
|
+
align?: "left" | "center" | "right";
|
|
12
|
+
hideable?: boolean;
|
|
13
|
+
}
|
|
14
|
+
interface DataTablePagination {
|
|
15
|
+
page: number;
|
|
16
|
+
totalPages: number;
|
|
17
|
+
getHref: (page: number) => string;
|
|
18
|
+
onPageChange?: (page: number) => void;
|
|
19
|
+
}
|
|
20
|
+
interface DataTableProps<T> {
|
|
21
|
+
columns: ColumnDef<T>[];
|
|
22
|
+
data: T[];
|
|
23
|
+
searchable?: boolean;
|
|
24
|
+
searchPlaceholder?: string;
|
|
25
|
+
onRowClick?: (row: T) => void;
|
|
26
|
+
loading?: boolean;
|
|
27
|
+
emptyMessage?: string;
|
|
28
|
+
toolbar?: React.ReactNode;
|
|
29
|
+
className?: string;
|
|
30
|
+
getRowId?: (row: T) => string;
|
|
31
|
+
pagination?: DataTablePagination;
|
|
32
|
+
globalFilter?: string;
|
|
33
|
+
onGlobalFilterChange?: (value: string) => void;
|
|
34
|
+
sortingState?: SortingState;
|
|
35
|
+
onSortingChange?: (state: SortingState) => void;
|
|
36
|
+
selectable?: boolean;
|
|
37
|
+
rowSelection?: RowSelectionState;
|
|
38
|
+
onRowSelectionChange?: (state: RowSelectionState) => void;
|
|
39
|
+
bulkActions?: (selectedRows: T[]) => React.ReactNode;
|
|
40
|
+
columnToggle?: boolean;
|
|
41
|
+
exportCsv?: boolean;
|
|
42
|
+
csvFilename?: string;
|
|
43
|
+
}
|
|
44
|
+
declare function DataTable<T>({ columns, data, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, toolbar, className, getRowId, pagination, globalFilter: externalGlobalFilter, onGlobalFilterChange, sortingState, onSortingChange, selectable, rowSelection, onRowSelectionChange, bulkActions, columnToggle, exportCsv, csvFilename, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
45
|
+
declare namespace DataTable {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { type ColumnDef, DataTable, type DataTablePagination, type DataTableProps };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { SortingState, RowSelectionState } from '@tanstack/react-table';
|
|
4
|
+
export { RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
|
|
5
|
+
|
|
6
|
+
interface ColumnDef<T> {
|
|
7
|
+
key: keyof T & string;
|
|
8
|
+
header: string;
|
|
9
|
+
sortable?: boolean;
|
|
10
|
+
render?: (row: T) => React.ReactNode;
|
|
11
|
+
align?: "left" | "center" | "right";
|
|
12
|
+
hideable?: boolean;
|
|
13
|
+
}
|
|
14
|
+
interface DataTablePagination {
|
|
15
|
+
page: number;
|
|
16
|
+
totalPages: number;
|
|
17
|
+
getHref: (page: number) => string;
|
|
18
|
+
onPageChange?: (page: number) => void;
|
|
19
|
+
}
|
|
20
|
+
interface DataTableProps<T> {
|
|
21
|
+
columns: ColumnDef<T>[];
|
|
22
|
+
data: T[];
|
|
23
|
+
searchable?: boolean;
|
|
24
|
+
searchPlaceholder?: string;
|
|
25
|
+
onRowClick?: (row: T) => void;
|
|
26
|
+
loading?: boolean;
|
|
27
|
+
emptyMessage?: string;
|
|
28
|
+
toolbar?: React.ReactNode;
|
|
29
|
+
className?: string;
|
|
30
|
+
getRowId?: (row: T) => string;
|
|
31
|
+
pagination?: DataTablePagination;
|
|
32
|
+
globalFilter?: string;
|
|
33
|
+
onGlobalFilterChange?: (value: string) => void;
|
|
34
|
+
sortingState?: SortingState;
|
|
35
|
+
onSortingChange?: (state: SortingState) => void;
|
|
36
|
+
selectable?: boolean;
|
|
37
|
+
rowSelection?: RowSelectionState;
|
|
38
|
+
onRowSelectionChange?: (state: RowSelectionState) => void;
|
|
39
|
+
bulkActions?: (selectedRows: T[]) => React.ReactNode;
|
|
40
|
+
columnToggle?: boolean;
|
|
41
|
+
exportCsv?: boolean;
|
|
42
|
+
csvFilename?: string;
|
|
43
|
+
}
|
|
44
|
+
declare function DataTable<T>({ columns, data, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, toolbar, className, getRowId, pagination, globalFilter: externalGlobalFilter, onGlobalFilterChange, sortingState, onSortingChange, selectable, rowSelection, onRowSelectionChange, bulkActions, columnToggle, exportCsv, csvFilename, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
45
|
+
declare namespace DataTable {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { type ColumnDef, DataTable, type DataTablePagination, type DataTableProps };
|