nillud-data-table 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/dist/{index.mjs → index.cjs} +166 -141
- package/dist/index.cjs.map +1 -0
- package/dist/index.js +140 -165
- package/dist/index.js.map +1 -1
- package/dist/styles.css +203 -1
- package/dist/styles.css.map +1 -0
- package/package.json +12 -10
- package/dist/index.mjs.map +0 -1
- /package/dist/{index.d.mts → index.d.cts} +0 -0
@@ -1,31 +1,67 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
|
30
|
+
// index.ts
|
31
|
+
var index_exports = {};
|
32
|
+
__export(index_exports, {
|
33
|
+
DataTable: () => DataTable_default
|
34
|
+
});
|
35
|
+
module.exports = __toCommonJS(index_exports);
|
36
|
+
|
1
37
|
// components/DataTable.tsx
|
2
|
-
|
38
|
+
var import_react5 = require("react");
|
3
39
|
|
4
40
|
// components/TableHeader.tsx
|
5
|
-
|
41
|
+
var import_react2 = __toESM(require("react"), 1);
|
6
42
|
|
7
43
|
// components/Column.tsx
|
8
|
-
|
44
|
+
var import_react = require("react");
|
9
45
|
|
10
46
|
// components/img/SortDown.tsx
|
11
|
-
|
47
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
12
48
|
var SortDown = () => {
|
13
|
-
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-caret-down-fill", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx("path", { d: "M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" }) });
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-caret-down-fill", viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" }) });
|
14
50
|
};
|
15
51
|
var SortDown_default = SortDown;
|
16
52
|
|
17
53
|
// components/img/SortUp.tsx
|
18
|
-
|
54
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
19
55
|
var SortUp = () => {
|
20
|
-
return /* @__PURE__ */
|
56
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-caret-up-fill", viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z" }) });
|
21
57
|
};
|
22
58
|
var SortUp_default = SortUp;
|
23
59
|
|
24
60
|
// components/Column.tsx
|
25
|
-
|
61
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
26
62
|
var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
27
63
|
var _a;
|
28
|
-
const currentSort = useMemo(() => {
|
64
|
+
const currentSort = (0, import_react.useMemo)(() => {
|
29
65
|
return sortBy.col === column.field ? sortBy.type : null;
|
30
66
|
}, [sortBy, column.field]);
|
31
67
|
const toggleSort = () => {
|
@@ -35,12 +71,12 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
35
71
|
const onFilterChange = (e) => {
|
36
72
|
getFilters({ ...filters, [column.field]: e.target.value });
|
37
73
|
};
|
38
|
-
return /* @__PURE__ */ jsxs("div", { className: "ndt-column", children: [
|
39
|
-
/* @__PURE__ */ jsxs("div", { className: "ndt-column-head", children: [
|
40
|
-
/* @__PURE__ */
|
41
|
-
typeof column.autoinc === "undefined" && (typeof column.sortable === "undefined" || column.sortable) && /* @__PURE__ */
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ndt-column", children: [
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ndt-column-head", children: [
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: column.title }),
|
77
|
+
typeof column.autoinc === "undefined" && (typeof column.sortable === "undefined" || column.sortable) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ndt-sorter", onClick: toggleSort, children: currentSort === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SortDown_default, {}) : currentSort === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SortUp_default, {}) : null })
|
42
78
|
] }),
|
43
|
-
/* @__PURE__ */
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ndt-column-footer", children: typeof column.autoinc === "undefined" && (typeof column.filterable === "undefined" || column.filterable) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
44
80
|
"input",
|
45
81
|
{
|
46
82
|
type: "text",
|
@@ -54,10 +90,10 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
54
90
|
var Column_default = Column;
|
55
91
|
|
56
92
|
// components/TableHeader.tsx
|
57
|
-
|
93
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
58
94
|
var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, headerGroup }) => {
|
59
|
-
const renderHeaderGroup = () => headerGroup && /* @__PURE__ */
|
60
|
-
const renderColumns = () => columns && columns.length > 0 ? columns.map((column, id) => /* @__PURE__ */
|
95
|
+
const renderHeaderGroup = () => headerGroup && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: headerGroup.map((col, id) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "ndt-column", style: { gridColumn: `span ${col.cols || 1}` }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "ndt-column-head", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: col.title }) }) }, `header-group-${id}`)) });
|
96
|
+
const renderColumns = () => columns && columns.length > 0 ? columns.map((column, id) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
61
97
|
Column_default,
|
62
98
|
{
|
63
99
|
column,
|
@@ -67,19 +103,19 @@ var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, head
|
|
67
103
|
filters
|
68
104
|
},
|
69
105
|
`column-${id}`
|
70
|
-
)) : /* @__PURE__ */
|
71
|
-
return /* @__PURE__ */
|
106
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "ndt-data-error", children: "\u041E\u0448\u0438\u0431\u043A\u0430: columns is undefined" });
|
107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
72
108
|
renderHeaderGroup(),
|
73
|
-
/* @__PURE__ */
|
109
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: renderColumns() })
|
74
110
|
] });
|
75
111
|
};
|
76
|
-
var TableHeader_default =
|
112
|
+
var TableHeader_default = import_react2.default.memo(Header);
|
77
113
|
|
78
114
|
// components/TableBody.tsx
|
79
|
-
|
115
|
+
var import_react3 = __toESM(require("react"), 1);
|
80
116
|
|
81
117
|
// components/Cell.tsx
|
82
|
-
|
118
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
83
119
|
var Cell = ({
|
84
120
|
row,
|
85
121
|
column,
|
@@ -88,8 +124,8 @@ var Cell = ({
|
|
88
124
|
}) => {
|
89
125
|
const rawValue = row[column.field];
|
90
126
|
const stringValue = typeof rawValue !== "undefined" && rawValue !== null ? String(rawValue) : "";
|
91
|
-
const content = column.formatter ? column.formatter(stringValue, row) : typeof column.autoinc !== "undefined" ? /* @__PURE__ */
|
92
|
-
return /* @__PURE__ */
|
127
|
+
const content = column.formatter ? column.formatter(stringValue, row) : typeof column.autoinc !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: rowId + 1 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: stringValue });
|
128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
93
129
|
"div",
|
94
130
|
{
|
95
131
|
className: "ndt-cell",
|
@@ -101,8 +137,8 @@ var Cell = ({
|
|
101
137
|
var Cell_default = Cell;
|
102
138
|
|
103
139
|
// components/Row.tsx
|
104
|
-
|
105
|
-
var Row = ({ rowId, columns, row, widths, isTitles }) => /* @__PURE__ */
|
140
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
141
|
+
var Row = ({ rowId, columns, row, widths, isTitles }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ndt-table-row", style: { gridTemplateColumns: widths }, children: columns.map((column, id) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
106
142
|
Cell_default,
|
107
143
|
{
|
108
144
|
row,
|
@@ -128,7 +164,7 @@ var groupDataBy = (data, key) => {
|
|
128
164
|
};
|
129
165
|
|
130
166
|
// components/TableBody.tsx
|
131
|
-
|
167
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
132
168
|
var TableBody = ({
|
133
169
|
columns,
|
134
170
|
tableData,
|
@@ -142,16 +178,16 @@ var TableBody = ({
|
|
142
178
|
}) => {
|
143
179
|
const grouped = groupBy ? groupDataBy(tableData, groupBy) : [];
|
144
180
|
if (!tableData || tableData.length === 0) {
|
145
|
-
return /* @__PURE__ */
|
181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `ndt-table-body${scrollable ? " ndt-table-body-scrollable" : ""}`, style: scrollable ? { height: scrollHeight } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ndt-table-row", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ndt-row-item", style: { margin: "auto", padding: 20, fontWeight: "bold" }, children: "\u0414\u0430\u043D\u043D\u044B\u0445 \u043D\u0435\u0442" }) }) });
|
146
182
|
}
|
147
|
-
const renderGroupedRows = () => grouped.map((group, id) => /* @__PURE__ */
|
148
|
-
/* @__PURE__ */
|
183
|
+
const renderGroupedRows = () => grouped.map((group, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react3.default.Fragment, { children: [
|
184
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
149
185
|
"div",
|
150
186
|
{
|
151
187
|
className: "ndt-group-header",
|
152
188
|
onClick: () => toggleGroup == null ? void 0 : toggleGroup(group.key),
|
153
189
|
children: [
|
154
|
-
/* @__PURE__ */
|
190
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { marginRight: 8 }, children: collapsedGroups[group.key] ? "\u25B6" : "\u25BC" }),
|
155
191
|
group.key,
|
156
192
|
" (",
|
157
193
|
group.items.length,
|
@@ -159,7 +195,7 @@ var TableBody = ({
|
|
159
195
|
]
|
160
196
|
}
|
161
197
|
),
|
162
|
-
!collapsedGroups[group.key] && group.items.map((element, id2) => /* @__PURE__ */
|
198
|
+
!collapsedGroups[group.key] && group.items.map((element, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
163
199
|
Row_default,
|
164
200
|
{
|
165
201
|
rowId: id2,
|
@@ -171,7 +207,7 @@ var TableBody = ({
|
|
171
207
|
`row-${group.key}-${id2}`
|
172
208
|
))
|
173
209
|
] }, `row-${group.key}-${id}`));
|
174
|
-
const renderFlatRows = () => tableData.map((element, id) => /* @__PURE__ */
|
210
|
+
const renderFlatRows = () => tableData.map((element, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
175
211
|
Row_default,
|
176
212
|
{
|
177
213
|
rowId: id,
|
@@ -181,40 +217,40 @@ var TableBody = ({
|
|
181
217
|
},
|
182
218
|
`row-${id}`
|
183
219
|
));
|
184
|
-
return /* @__PURE__ */
|
220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `ndt-table-body${scrollable ? " ndt-table-body-scrollable" : ""}`, style: scrollable ? { height: scrollHeight } : {}, children: groupBy ? renderGroupedRows() : renderFlatRows() });
|
185
221
|
};
|
186
222
|
var TableBody_default = TableBody;
|
187
223
|
|
188
224
|
// components/img/NextIcon.tsx
|
189
|
-
|
225
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
190
226
|
var NextIcon = () => {
|
191
|
-
return /* @__PURE__ */
|
227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "41", height: "65", viewBox: "0 0 41 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0.674316 57.2669L25.3872 32.5L0.674316 7.73312L8.28244 0.125L40.6574 32.5L8.28244 64.875L0.674316 57.2669Z", fill: "#666666" }) });
|
192
228
|
};
|
193
229
|
var NextIcon_default = NextIcon;
|
194
230
|
|
195
231
|
// components/img/LastIcon.tsx
|
196
|
-
|
232
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
197
233
|
var LastIcon = () => {
|
198
|
-
return /* @__PURE__ */
|
234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "68", height: "65", viewBox: "0 0 68 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0.185059 7.73312L24.9519 32.5L0.185059 57.2669L7.79318 64.875L40.1682 32.5L7.79318 0.125L0.185059 7.73312ZM56.3557 0.125H67.1474V64.875H56.3557V0.125Z", fill: "#666666" }) });
|
199
235
|
};
|
200
236
|
var LastIcon_default = LastIcon;
|
201
237
|
|
202
238
|
// components/img/PrevIcon.tsx
|
203
|
-
|
239
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
204
240
|
var PrevIcon = () => {
|
205
|
-
return /* @__PURE__ */
|
241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "41", height: "65", viewBox: "0 0 41 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M40.6574 57.2669L15.9445 32.5L40.6574 7.73312L33.0493 0.125L0.674316 32.5L33.0493 64.875L40.6574 57.2669Z", fill: "#666666" }) });
|
206
242
|
};
|
207
243
|
var PrevIcon_default = PrevIcon;
|
208
244
|
|
209
245
|
// components/img/FirstIcon.tsx
|
210
|
-
|
246
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
211
247
|
var FirstIcon = () => {
|
212
|
-
return /* @__PURE__ */
|
248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "68", height: "65", viewBox: "0 0 68 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M67.1474 57.2669L42.3805 32.5L67.1474 7.73312L59.5392 0.125L27.1642 32.5L59.5392 64.875L67.1474 57.2669ZM0.185059 0.125H10.9767V64.875H0.185059V0.125Z", fill: "#666666" }) });
|
213
249
|
};
|
214
250
|
var FirstIcon_default = FirstIcon;
|
215
251
|
|
216
252
|
// components/TableFooter.tsx
|
217
|
-
|
253
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
218
254
|
var TableFooter = ({
|
219
255
|
tableData,
|
220
256
|
paginationCounts,
|
@@ -245,15 +281,15 @@ var TableFooter = ({
|
|
245
281
|
}
|
246
282
|
if (start > 0) {
|
247
283
|
pages.push(
|
248
|
-
/* @__PURE__ */
|
284
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => handlePageChange(0), children: "1" }, "page-0")
|
249
285
|
);
|
250
286
|
if (start > 1) {
|
251
|
-
pages.push(/* @__PURE__ */
|
287
|
+
pages.push(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "..." }, "ellipsis-start"));
|
252
288
|
}
|
253
289
|
}
|
254
290
|
for (let i = start; i <= end; i++) {
|
255
291
|
pages.push(
|
256
|
-
/* @__PURE__ */
|
292
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
257
293
|
"button",
|
258
294
|
{
|
259
295
|
className: i === paginationPage ? "btn-active" : "",
|
@@ -267,71 +303,71 @@ var TableFooter = ({
|
|
267
303
|
}
|
268
304
|
if (end < totalPages - 1) {
|
269
305
|
if (end < totalPages - 2) {
|
270
|
-
pages.push(/* @__PURE__ */
|
306
|
+
pages.push(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "..." }, "ellipsis-end"));
|
271
307
|
}
|
272
308
|
pages.push(
|
273
|
-
/* @__PURE__ */
|
309
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => handlePageChange(totalPages - 1), children: totalPages }, `page-${totalPages - 1}`)
|
274
310
|
);
|
275
311
|
}
|
276
312
|
return pages;
|
277
313
|
};
|
278
314
|
const firstItem = paginationSize === 0 ? 1 : paginationPage * paginationSize + 1;
|
279
315
|
const lastItem = paginationSize === 0 ? totalItems : Math.min((paginationPage + 1) * paginationSize, totalItems);
|
280
|
-
return /* @__PURE__ */
|
281
|
-
/* @__PURE__ */
|
282
|
-
/* @__PURE__ */
|
316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ndt-table-footer", children: [
|
317
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ndt-footer-count", children: [
|
318
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
|
283
319
|
"\u041F\u043E\u043A\u0430\u0437\u0430\u043D\u044B \u0441\u0442\u0440\u043E\u043A\u0438 \u0441 ",
|
284
320
|
firstItem,
|
285
321
|
" \u043F\u043E ",
|
286
322
|
lastItem,
|
287
323
|
", "
|
288
324
|
] }),
|
289
|
-
/* @__PURE__ */
|
325
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
|
290
326
|
"\u0412\u0441\u0435\u0433\u043E: ",
|
291
327
|
totalItems
|
292
328
|
] })
|
293
329
|
] }),
|
294
|
-
paginationCounts && /* @__PURE__ */
|
295
|
-
/* @__PURE__ */
|
296
|
-
/* @__PURE__ */
|
297
|
-
/* @__PURE__ */
|
330
|
+
paginationCounts && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ndt-footer-pagination", children: [
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ndt-pagination-counts", children: [
|
332
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A: " }),
|
333
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { value: paginationSize, onChange: handleCountChange, children: paginationCounts.map((count) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: count, children: count === 0 ? "\u0412\u0441\u0435" : count }, `count-${count}`)) })
|
298
334
|
] }),
|
299
|
-
/* @__PURE__ */
|
300
|
-
/* @__PURE__ */
|
335
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ndt-pagination-buttons", children: [
|
336
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
301
337
|
"button",
|
302
338
|
{
|
303
339
|
disabled: paginationPage === 0,
|
304
340
|
onClick: () => handlePageChange(0),
|
305
341
|
"aria-label": "\u041F\u0435\u0440\u0432\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
306
|
-
children: /* @__PURE__ */
|
342
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FirstIcon_default, {})
|
307
343
|
}
|
308
344
|
),
|
309
|
-
/* @__PURE__ */
|
345
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
310
346
|
"button",
|
311
347
|
{
|
312
348
|
disabled: paginationPage === 0,
|
313
349
|
onClick: () => handlePageChange(paginationPage - 1),
|
314
350
|
"aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
315
|
-
children: /* @__PURE__ */
|
351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PrevIcon_default, {})
|
316
352
|
}
|
317
353
|
),
|
318
|
-
/* @__PURE__ */
|
319
|
-
/* @__PURE__ */
|
354
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ndt-buttons-num", children: renderPageNumbers() }),
|
355
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
320
356
|
"button",
|
321
357
|
{
|
322
358
|
disabled: paginationPage >= totalPages - 1,
|
323
359
|
onClick: () => handlePageChange(paginationPage + 1),
|
324
360
|
"aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
325
|
-
children: /* @__PURE__ */
|
361
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NextIcon_default, {})
|
326
362
|
}
|
327
363
|
),
|
328
|
-
/* @__PURE__ */
|
364
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
329
365
|
"button",
|
330
366
|
{
|
331
367
|
disabled: paginationPage >= totalPages - 1,
|
332
368
|
onClick: () => handlePageChange(totalPages - 1),
|
333
369
|
"aria-label": "\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u044F\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
334
|
-
children: /* @__PURE__ */
|
370
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LastIcon_default, {})
|
335
371
|
}
|
336
372
|
)
|
337
373
|
] })
|
@@ -385,20 +421,8 @@ var filterData = (data, filter, value) => {
|
|
385
421
|
};
|
386
422
|
|
387
423
|
// components/export/WordExport.tsx
|
388
|
-
|
389
|
-
|
390
|
-
Document,
|
391
|
-
Packer,
|
392
|
-
PageOrientation,
|
393
|
-
Paragraph,
|
394
|
-
Table,
|
395
|
-
TableCell,
|
396
|
-
TableRow,
|
397
|
-
TextRun,
|
398
|
-
VerticalAlign,
|
399
|
-
WidthType
|
400
|
-
} from "docx";
|
401
|
-
import { saveAs } from "file-saver";
|
424
|
+
var import_docx = require("docx");
|
425
|
+
var import_file_saver = __toESM(require("file-saver"), 1);
|
402
426
|
|
403
427
|
// utils/exportUtils/ExportHelpers.ts
|
404
428
|
function prepareExportRows(columns, data) {
|
@@ -414,7 +438,7 @@ function prepareExportHeaders(columns) {
|
|
414
438
|
}
|
415
439
|
|
416
440
|
// components/export/WordExport.tsx
|
417
|
-
|
441
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
418
442
|
var WordExport = ({
|
419
443
|
wordData,
|
420
444
|
columns,
|
@@ -435,49 +459,49 @@ var WordExport = ({
|
|
435
459
|
maxColumnsBeforeLandscape = 5
|
436
460
|
} = options;
|
437
461
|
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
438
|
-
const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
|
439
|
-
children: [new Paragraph({
|
440
|
-
children: [new TextRun({
|
462
|
+
const headerCells = prepareExportHeaders(columns).map((header) => new import_docx.TableCell({
|
463
|
+
children: [new import_docx.Paragraph({
|
464
|
+
children: [new import_docx.TextRun({
|
441
465
|
text: header,
|
442
466
|
size: fontSize,
|
443
467
|
bold: boldHeaders
|
444
468
|
})],
|
445
|
-
alignment: AlignmentType.CENTER
|
469
|
+
alignment: import_docx.AlignmentType.CENTER
|
446
470
|
})],
|
447
|
-
verticalAlign: VerticalAlign.CENTER
|
471
|
+
verticalAlign: import_docx.VerticalAlign.CENTER
|
448
472
|
}));
|
449
|
-
const tableHeaderRow = new TableRow({ children: headerCells });
|
473
|
+
const tableHeaderRow = new import_docx.TableRow({ children: headerCells });
|
450
474
|
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
451
475
|
const rowCells = cells.map(
|
452
|
-
(value) => new TableCell({
|
453
|
-
children: [new Paragraph({
|
454
|
-
children: [new TextRun({
|
476
|
+
(value) => new import_docx.TableCell({
|
477
|
+
children: [new import_docx.Paragraph({
|
478
|
+
children: [new import_docx.TextRun({
|
455
479
|
text: value,
|
456
480
|
size: fontSize
|
457
481
|
})],
|
458
|
-
alignment: AlignmentType.CENTER
|
482
|
+
alignment: import_docx.AlignmentType.CENTER
|
459
483
|
})],
|
460
|
-
verticalAlign: VerticalAlign.CENTER
|
484
|
+
verticalAlign: import_docx.VerticalAlign.CENTER
|
461
485
|
})
|
462
486
|
);
|
463
|
-
return new TableRow({ children: rowCells });
|
487
|
+
return new import_docx.TableRow({ children: rowCells });
|
464
488
|
});
|
465
|
-
const table = new Table({
|
489
|
+
const table = new import_docx.Table({
|
466
490
|
rows: [tableHeaderRow, ...rows],
|
467
|
-
width: { size: 11e3, type: WidthType.DXA },
|
468
|
-
indent: { size: -1e3, type: WidthType.DXA }
|
491
|
+
width: { size: 11e3, type: import_docx.WidthType.DXA },
|
492
|
+
indent: { size: -1e3, type: import_docx.WidthType.DXA }
|
469
493
|
});
|
470
|
-
const doc = new Document({
|
494
|
+
const doc = new import_docx.Document({
|
471
495
|
sections: [{
|
472
|
-
children: [table, new Paragraph({ text: "" })],
|
473
|
-
properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
|
496
|
+
children: [table, new import_docx.Paragraph({ text: "" })],
|
497
|
+
properties: isLandscape ? { page: { size: { orientation: import_docx.PageOrientation.LANDSCAPE } } } : {}
|
474
498
|
}]
|
475
499
|
});
|
476
|
-
Packer.toBlob(doc).then((blob) => {
|
477
|
-
|
500
|
+
import_docx.Packer.toBlob(doc).then((blob) => {
|
501
|
+
(0, import_file_saver.default)(blob, `${title}.docx`);
|
478
502
|
});
|
479
503
|
};
|
480
|
-
return /* @__PURE__ */
|
504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
|
481
505
|
};
|
482
506
|
var WordExport_default = WordExport;
|
483
507
|
|
@@ -551,11 +575,11 @@ var setColumnAutoWidths = (sheet) => {
|
|
551
575
|
};
|
552
576
|
|
553
577
|
// components/export/ExportExcel.tsx
|
554
|
-
|
555
|
-
|
578
|
+
var import_exceljs = __toESM(require("exceljs"), 1);
|
579
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
556
580
|
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
557
581
|
const exportExcel = () => {
|
558
|
-
const workbook = new
|
582
|
+
const workbook = new import_exceljs.default.Workbook();
|
559
583
|
const sheet = workbook.addWorksheet(title, {
|
560
584
|
pageSetup: {
|
561
585
|
fitToPage: true,
|
@@ -595,17 +619,17 @@ var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
|
595
619
|
window.URL.revokeObjectURL(url);
|
596
620
|
});
|
597
621
|
};
|
598
|
-
return /* @__PURE__ */
|
622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
599
623
|
};
|
600
624
|
var ExportExcel_default = ExportExcel;
|
601
625
|
|
602
626
|
// components/ExportSection.tsx
|
603
|
-
|
627
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
604
628
|
var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }) => {
|
605
|
-
return /* @__PURE__ */
|
606
|
-
/* @__PURE__ */
|
607
|
-
/* @__PURE__ */
|
608
|
-
wordBtn && /* @__PURE__ */
|
629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ndt-download-section", children: [
|
630
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
|
631
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ndt-download-buttons", children: [
|
632
|
+
wordBtn && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
609
633
|
WordExport_default,
|
610
634
|
{
|
611
635
|
wordData: tableData,
|
@@ -615,7 +639,7 @@ var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableD
|
|
615
639
|
options: wordOptions
|
616
640
|
}
|
617
641
|
),
|
618
|
-
excelBtn && /* @__PURE__ */
|
642
|
+
excelBtn && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
619
643
|
ExportExcel_default,
|
620
644
|
{
|
621
645
|
excelData: tableData,
|
@@ -630,17 +654,17 @@ var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableD
|
|
630
654
|
var ExportSection_default = ExportSection;
|
631
655
|
|
632
656
|
// utils/useDebouncedEffect.tsx
|
633
|
-
|
657
|
+
var import_react4 = require("react");
|
634
658
|
function useDebouncedEffect(callback, deps, delay) {
|
635
|
-
useEffect(() => {
|
659
|
+
(0, import_react4.useEffect)(() => {
|
636
660
|
const handler = setTimeout(() => callback(), delay);
|
637
661
|
return () => clearTimeout(handler);
|
638
662
|
}, [...deps, delay]);
|
639
663
|
}
|
640
664
|
|
641
665
|
// components/DataTable.tsx
|
642
|
-
|
643
|
-
var DataTable = forwardRef(({
|
666
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
667
|
+
var DataTable = (0, import_react5.forwardRef)(({
|
644
668
|
tableData,
|
645
669
|
columns,
|
646
670
|
tableName = "table-data",
|
@@ -659,21 +683,21 @@ var DataTable = forwardRef(({
|
|
659
683
|
isTitles = false,
|
660
684
|
wordOptions
|
661
685
|
}, ref) => {
|
662
|
-
const [filters, setFilters] = useState({});
|
663
|
-
const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
|
664
|
-
const [paginationSize, setPaginationSize] = useState((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
|
665
|
-
const [paginationPage, setPaginationPage] = useState(0);
|
666
|
-
const [collapsedGroups, setCollapsedGroups] = useState({});
|
686
|
+
const [filters, setFilters] = (0, import_react5.useState)({});
|
687
|
+
const [sortBy, setSortBy] = (0, import_react5.useState)({ col: "", type: "asc" });
|
688
|
+
const [paginationSize, setPaginationSize] = (0, import_react5.useState)((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
|
689
|
+
const [paginationPage, setPaginationPage] = (0, import_react5.useState)(0);
|
690
|
+
const [collapsedGroups, setCollapsedGroups] = (0, import_react5.useState)({});
|
667
691
|
const toggleGroup = (groupKey) => {
|
668
692
|
setCollapsedGroups((prev) => ({
|
669
693
|
...prev,
|
670
694
|
[groupKey]: !prev[groupKey]
|
671
695
|
}));
|
672
696
|
};
|
673
|
-
const widths =
|
697
|
+
const widths = (0, import_react5.useMemo)(() => {
|
674
698
|
return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
|
675
699
|
}, [columns]);
|
676
|
-
const loadFromLocalStorage = useCallback(() => {
|
700
|
+
const loadFromLocalStorage = (0, import_react5.useCallback)(() => {
|
677
701
|
try {
|
678
702
|
const s = localStorage.getItem(`${tableName}-sort-by`);
|
679
703
|
const f = localStorage.getItem(`${tableName}-filters`);
|
@@ -691,10 +715,10 @@ var DataTable = forwardRef(({
|
|
691
715
|
setPaginationPage(0);
|
692
716
|
}
|
693
717
|
}, [tableName, paginationCounts]);
|
694
|
-
|
718
|
+
(0, import_react5.useEffect)(() => {
|
695
719
|
loadFromLocalStorage();
|
696
720
|
}, [loadFromLocalStorage]);
|
697
|
-
const processedData =
|
721
|
+
const processedData = (0, import_react5.useMemo)(() => {
|
698
722
|
let result = [...tableData];
|
699
723
|
const columnMap = new Map(columns.map((col) => [col.field, col]));
|
700
724
|
for (const field in filters) {
|
@@ -709,12 +733,12 @@ var DataTable = forwardRef(({
|
|
709
733
|
}
|
710
734
|
return result;
|
711
735
|
}, [tableData, filters, sortBy, columns]);
|
712
|
-
const displayData =
|
736
|
+
const displayData = (0, import_react5.useMemo)(() => {
|
713
737
|
if (paginationSize === 0) return processedData;
|
714
738
|
const start = paginationPage * paginationSize;
|
715
739
|
return processedData.slice(start, start + paginationSize);
|
716
740
|
}, [processedData, paginationPage, paginationSize]);
|
717
|
-
|
741
|
+
(0, import_react5.useEffect)(() => {
|
718
742
|
setPaginationPage(0);
|
719
743
|
}, [filters, sortBy]);
|
720
744
|
useDebouncedEffect(() => {
|
@@ -723,18 +747,18 @@ var DataTable = forwardRef(({
|
|
723
747
|
useDebouncedEffect(() => {
|
724
748
|
localStorage.setItem(`${tableName}-sort-by`, JSON.stringify(sortBy));
|
725
749
|
}, [sortBy, tableName], 500);
|
726
|
-
|
750
|
+
(0, import_react5.useEffect)(() => {
|
727
751
|
localStorage.setItem(`${tableName}-counts`, paginationSize === 0 ? "all" : paginationSize.toString());
|
728
752
|
}, [paginationSize, tableName]);
|
729
|
-
|
753
|
+
(0, import_react5.useEffect)(() => {
|
730
754
|
localStorage.setItem(`${tableName}-page`, paginationPage.toString());
|
731
755
|
}, [paginationPage, tableName]);
|
732
|
-
useImperativeHandle(ref, () => ({
|
756
|
+
(0, import_react5.useImperativeHandle)(ref, () => ({
|
733
757
|
getData: () => processedData,
|
734
758
|
getCurrentData: () => displayData
|
735
759
|
}), [processedData, displayData]);
|
736
|
-
return /* @__PURE__ */
|
737
|
-
(wordBtn || excelBtn) && /* @__PURE__ */
|
760
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ndt-table-container", children: [
|
761
|
+
(wordBtn || excelBtn) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
738
762
|
ExportSection_default,
|
739
763
|
{
|
740
764
|
wordBtn,
|
@@ -747,8 +771,8 @@ var DataTable = forwardRef(({
|
|
747
771
|
wordOptions
|
748
772
|
}
|
749
773
|
),
|
750
|
-
/* @__PURE__ */
|
751
|
-
/* @__PURE__ */
|
774
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ndt-table", children: [
|
775
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
752
776
|
TableHeader_default,
|
753
777
|
{
|
754
778
|
columns,
|
@@ -760,7 +784,7 @@ var DataTable = forwardRef(({
|
|
760
784
|
headerGroup
|
761
785
|
}
|
762
786
|
),
|
763
|
-
loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */
|
787
|
+
loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { marginLeft: 10, fontWeight: "bold" }, children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
764
788
|
TableBody_default,
|
765
789
|
{
|
766
790
|
tableData: displayData,
|
@@ -774,7 +798,7 @@ var DataTable = forwardRef(({
|
|
774
798
|
isTitles
|
775
799
|
}
|
776
800
|
),
|
777
|
-
isFooter && /* @__PURE__ */
|
801
|
+
isFooter && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
778
802
|
TableFooter_default,
|
779
803
|
{
|
780
804
|
paginationCounts,
|
@@ -790,7 +814,8 @@ var DataTable = forwardRef(({
|
|
790
814
|
});
|
791
815
|
DataTable.displayName = "DataTable";
|
792
816
|
var DataTable_default = DataTable;
|
793
|
-
export
|
794
|
-
|
795
|
-
|
796
|
-
|
817
|
+
// Annotate the CommonJS export names for ESM import in node:
|
818
|
+
0 && (module.exports = {
|
819
|
+
DataTable
|
820
|
+
});
|
821
|
+
//# sourceMappingURL=index.cjs.map
|