nillud-data-table 1.0.0 → 1.0.2
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 +32 -12
- package/dist/ExportSection-ZYOK6KMB.js +247 -0
- package/dist/index.d.ts +2 -3
- package/dist/index.js +97 -367
- package/dist/styles.css +203 -1
- package/dist/styles.css.map +1 -0
- package/package.json +17 -10
- package/dist/index.d.mts +0 -58
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -796
- package/dist/index.mjs.map +0 -1
package/dist/index.js
CHANGED
@@ -1,67 +1,31 @@
|
|
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
|
-
|
37
1
|
// components/DataTable.tsx
|
38
|
-
|
2
|
+
import React3, { useImperativeHandle, useEffect as useEffect2, useState, useCallback, useMemo as useMemo2, forwardRef, Suspense } from "react";
|
39
3
|
|
40
4
|
// components/TableHeader.tsx
|
41
|
-
|
5
|
+
import React from "react";
|
42
6
|
|
43
7
|
// components/Column.tsx
|
44
|
-
|
8
|
+
import { useMemo } from "react";
|
45
9
|
|
46
10
|
// components/img/SortDown.tsx
|
47
|
-
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
48
12
|
var SortDown = () => {
|
49
|
-
return /* @__PURE__ */
|
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" }) });
|
50
14
|
};
|
51
15
|
var SortDown_default = SortDown;
|
52
16
|
|
53
17
|
// components/img/SortUp.tsx
|
54
|
-
|
18
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
55
19
|
var SortUp = () => {
|
56
|
-
return /* @__PURE__ */ (
|
20
|
+
return /* @__PURE__ */ jsx2("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__ */ jsx2("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" }) });
|
57
21
|
};
|
58
22
|
var SortUp_default = SortUp;
|
59
23
|
|
60
24
|
// components/Column.tsx
|
61
|
-
|
25
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
62
26
|
var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
63
27
|
var _a;
|
64
|
-
const currentSort =
|
28
|
+
const currentSort = useMemo(() => {
|
65
29
|
return sortBy.col === column.field ? sortBy.type : null;
|
66
30
|
}, [sortBy, column.field]);
|
67
31
|
const toggleSort = () => {
|
@@ -71,12 +35,12 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
71
35
|
const onFilterChange = (e) => {
|
72
36
|
getFilters({ ...filters, [column.field]: e.target.value });
|
73
37
|
};
|
74
|
-
return /* @__PURE__ */
|
75
|
-
/* @__PURE__ */
|
76
|
-
/* @__PURE__ */ (
|
77
|
-
typeof column.autoinc === "undefined" && (typeof column.sortable === "undefined" || column.sortable) && /* @__PURE__ */ (
|
38
|
+
return /* @__PURE__ */ jsxs("div", { className: "ndt-column", children: [
|
39
|
+
/* @__PURE__ */ jsxs("div", { className: "ndt-column-head", children: [
|
40
|
+
/* @__PURE__ */ jsx3("span", { children: column.title }),
|
41
|
+
typeof column.autoinc === "undefined" && (typeof column.sortable === "undefined" || column.sortable) && /* @__PURE__ */ jsx3("div", { className: "ndt-sorter", onClick: toggleSort, children: currentSort === "asc" ? /* @__PURE__ */ jsx3(SortDown_default, {}) : currentSort === "desc" ? /* @__PURE__ */ jsx3(SortUp_default, {}) : null })
|
78
42
|
] }),
|
79
|
-
/* @__PURE__ */ (
|
43
|
+
/* @__PURE__ */ jsx3("div", { className: "ndt-column-footer", children: typeof column.autoinc === "undefined" && (typeof column.filterable === "undefined" || column.filterable) && /* @__PURE__ */ jsx3(
|
80
44
|
"input",
|
81
45
|
{
|
82
46
|
type: "text",
|
@@ -90,10 +54,10 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
90
54
|
var Column_default = Column;
|
91
55
|
|
92
56
|
// components/TableHeader.tsx
|
93
|
-
|
57
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
94
58
|
var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, headerGroup }) => {
|
95
|
-
const renderHeaderGroup = () => headerGroup && /* @__PURE__ */ (
|
96
|
-
const renderColumns = () => columns && columns.length > 0 ? columns.map((column, id) => /* @__PURE__ */ (
|
59
|
+
const renderHeaderGroup = () => headerGroup && /* @__PURE__ */ jsx4("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: headerGroup.map((col, id) => /* @__PURE__ */ jsx4("div", { className: "ndt-column", style: { gridColumn: `span ${col.cols || 1}` }, children: /* @__PURE__ */ jsx4("div", { className: "ndt-column-head", children: /* @__PURE__ */ jsx4("span", { children: col.title }) }) }, `header-group-${id}`)) });
|
60
|
+
const renderColumns = () => columns && columns.length > 0 ? columns.map((column, id) => /* @__PURE__ */ jsx4(
|
97
61
|
Column_default,
|
98
62
|
{
|
99
63
|
column,
|
@@ -103,19 +67,19 @@ var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, head
|
|
103
67
|
filters
|
104
68
|
},
|
105
69
|
`column-${id}`
|
106
|
-
)) : /* @__PURE__ */ (
|
107
|
-
return /* @__PURE__ */ (
|
70
|
+
)) : /* @__PURE__ */ jsx4("div", { className: "ndt-data-error", children: "\u041E\u0448\u0438\u0431\u043A\u0430: columns is undefined" });
|
71
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
108
72
|
renderHeaderGroup(),
|
109
|
-
/* @__PURE__ */ (
|
73
|
+
/* @__PURE__ */ jsx4("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: renderColumns() })
|
110
74
|
] });
|
111
75
|
};
|
112
|
-
var TableHeader_default =
|
76
|
+
var TableHeader_default = React.memo(Header);
|
113
77
|
|
114
78
|
// components/TableBody.tsx
|
115
|
-
|
79
|
+
import React2 from "react";
|
116
80
|
|
117
81
|
// components/Cell.tsx
|
118
|
-
|
82
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
119
83
|
var Cell = ({
|
120
84
|
row,
|
121
85
|
column,
|
@@ -124,8 +88,8 @@ var Cell = ({
|
|
124
88
|
}) => {
|
125
89
|
const rawValue = row[column.field];
|
126
90
|
const stringValue = typeof rawValue !== "undefined" && rawValue !== null ? String(rawValue) : "";
|
127
|
-
const content = column.formatter ? column.formatter(stringValue, row) : typeof column.autoinc !== "undefined" ? /* @__PURE__ */ (
|
128
|
-
return /* @__PURE__ */ (
|
91
|
+
const content = column.formatter ? column.formatter(stringValue, row) : typeof column.autoinc !== "undefined" ? /* @__PURE__ */ jsx5("span", { children: rowId + 1 }) : /* @__PURE__ */ jsx5("span", { children: stringValue });
|
92
|
+
return /* @__PURE__ */ jsx5(
|
129
93
|
"div",
|
130
94
|
{
|
131
95
|
className: "ndt-cell",
|
@@ -137,8 +101,8 @@ var Cell = ({
|
|
137
101
|
var Cell_default = Cell;
|
138
102
|
|
139
103
|
// components/Row.tsx
|
140
|
-
|
141
|
-
var Row = ({ rowId, columns, row, widths, isTitles }) => /* @__PURE__ */ (
|
104
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
105
|
+
var Row = ({ rowId, columns, row, widths, isTitles }) => /* @__PURE__ */ jsx6("div", { className: "ndt-table-row", style: { gridTemplateColumns: widths }, children: columns.map((column, id) => /* @__PURE__ */ jsx6(
|
142
106
|
Cell_default,
|
143
107
|
{
|
144
108
|
row,
|
@@ -164,7 +128,7 @@ var groupDataBy = (data, key) => {
|
|
164
128
|
};
|
165
129
|
|
166
130
|
// components/TableBody.tsx
|
167
|
-
|
131
|
+
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
168
132
|
var TableBody = ({
|
169
133
|
columns,
|
170
134
|
tableData,
|
@@ -178,16 +142,16 @@ var TableBody = ({
|
|
178
142
|
}) => {
|
179
143
|
const grouped = groupBy ? groupDataBy(tableData, groupBy) : [];
|
180
144
|
if (!tableData || tableData.length === 0) {
|
181
|
-
return /* @__PURE__ */ (
|
145
|
+
return /* @__PURE__ */ jsx7("div", { className: `ndt-table-body${scrollable ? " ndt-table-body-scrollable" : ""}`, style: scrollable ? { height: scrollHeight } : {}, children: /* @__PURE__ */ jsx7("div", { className: "ndt-table-row", style: { height: "100%" }, children: /* @__PURE__ */ jsx7("div", { className: "ndt-row-item", style: { margin: "auto", padding: 20, fontWeight: "bold" }, children: "\u0414\u0430\u043D\u043D\u044B\u0445 \u043D\u0435\u0442" }) }) });
|
182
146
|
}
|
183
|
-
const renderGroupedRows = () => grouped.map((group, id) => /* @__PURE__ */ (
|
184
|
-
/* @__PURE__ */ (
|
147
|
+
const renderGroupedRows = () => grouped.map((group, id) => /* @__PURE__ */ jsxs3(React2.Fragment, { children: [
|
148
|
+
/* @__PURE__ */ jsxs3(
|
185
149
|
"div",
|
186
150
|
{
|
187
151
|
className: "ndt-group-header",
|
188
152
|
onClick: () => toggleGroup == null ? void 0 : toggleGroup(group.key),
|
189
153
|
children: [
|
190
|
-
/* @__PURE__ */ (
|
154
|
+
/* @__PURE__ */ jsx7("span", { style: { marginRight: 8 }, children: collapsedGroups[group.key] ? "\u25B6" : "\u25BC" }),
|
191
155
|
group.key,
|
192
156
|
" (",
|
193
157
|
group.items.length,
|
@@ -195,7 +159,7 @@ var TableBody = ({
|
|
195
159
|
]
|
196
160
|
}
|
197
161
|
),
|
198
|
-
!collapsedGroups[group.key] && group.items.map((element, id2) => /* @__PURE__ */ (
|
162
|
+
!collapsedGroups[group.key] && group.items.map((element, id2) => /* @__PURE__ */ jsx7(
|
199
163
|
Row_default,
|
200
164
|
{
|
201
165
|
rowId: id2,
|
@@ -207,7 +171,7 @@ var TableBody = ({
|
|
207
171
|
`row-${group.key}-${id2}`
|
208
172
|
))
|
209
173
|
] }, `row-${group.key}-${id}`));
|
210
|
-
const renderFlatRows = () => tableData.map((element, id) => /* @__PURE__ */ (
|
174
|
+
const renderFlatRows = () => tableData.map((element, id) => /* @__PURE__ */ jsx7(
|
211
175
|
Row_default,
|
212
176
|
{
|
213
177
|
rowId: id,
|
@@ -217,40 +181,40 @@ var TableBody = ({
|
|
217
181
|
},
|
218
182
|
`row-${id}`
|
219
183
|
));
|
220
|
-
return /* @__PURE__ */ (
|
184
|
+
return /* @__PURE__ */ jsx7("div", { className: `ndt-table-body${scrollable ? " ndt-table-body-scrollable" : ""}`, style: scrollable ? { height: scrollHeight } : {}, children: groupBy ? renderGroupedRows() : renderFlatRows() });
|
221
185
|
};
|
222
186
|
var TableBody_default = TableBody;
|
223
187
|
|
224
188
|
// components/img/NextIcon.tsx
|
225
|
-
|
189
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
226
190
|
var NextIcon = () => {
|
227
|
-
return /* @__PURE__ */ (
|
191
|
+
return /* @__PURE__ */ jsx8("svg", { width: "41", height: "65", viewBox: "0 0 41 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("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" }) });
|
228
192
|
};
|
229
193
|
var NextIcon_default = NextIcon;
|
230
194
|
|
231
195
|
// components/img/LastIcon.tsx
|
232
|
-
|
196
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
233
197
|
var LastIcon = () => {
|
234
|
-
return /* @__PURE__ */ (
|
198
|
+
return /* @__PURE__ */ jsx9("svg", { width: "68", height: "65", viewBox: "0 0 68 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx9("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" }) });
|
235
199
|
};
|
236
200
|
var LastIcon_default = LastIcon;
|
237
201
|
|
238
202
|
// components/img/PrevIcon.tsx
|
239
|
-
|
203
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
240
204
|
var PrevIcon = () => {
|
241
|
-
return /* @__PURE__ */ (
|
205
|
+
return /* @__PURE__ */ jsx10("svg", { width: "41", height: "65", viewBox: "0 0 41 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("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" }) });
|
242
206
|
};
|
243
207
|
var PrevIcon_default = PrevIcon;
|
244
208
|
|
245
209
|
// components/img/FirstIcon.tsx
|
246
|
-
|
210
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
247
211
|
var FirstIcon = () => {
|
248
|
-
return /* @__PURE__ */ (
|
212
|
+
return /* @__PURE__ */ jsx11("svg", { width: "68", height: "65", viewBox: "0 0 68 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx11("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" }) });
|
249
213
|
};
|
250
214
|
var FirstIcon_default = FirstIcon;
|
251
215
|
|
252
216
|
// components/TableFooter.tsx
|
253
|
-
|
217
|
+
import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
|
254
218
|
var TableFooter = ({
|
255
219
|
tableData,
|
256
220
|
paginationCounts,
|
@@ -281,15 +245,15 @@ var TableFooter = ({
|
|
281
245
|
}
|
282
246
|
if (start > 0) {
|
283
247
|
pages.push(
|
284
|
-
/* @__PURE__ */ (
|
248
|
+
/* @__PURE__ */ jsx12("button", { onClick: () => handlePageChange(0), children: "1" }, "page-0")
|
285
249
|
);
|
286
250
|
if (start > 1) {
|
287
|
-
pages.push(/* @__PURE__ */ (
|
251
|
+
pages.push(/* @__PURE__ */ jsx12("span", { children: "..." }, "ellipsis-start"));
|
288
252
|
}
|
289
253
|
}
|
290
254
|
for (let i = start; i <= end; i++) {
|
291
255
|
pages.push(
|
292
|
-
/* @__PURE__ */ (
|
256
|
+
/* @__PURE__ */ jsx12(
|
293
257
|
"button",
|
294
258
|
{
|
295
259
|
className: i === paginationPage ? "btn-active" : "",
|
@@ -303,71 +267,71 @@ var TableFooter = ({
|
|
303
267
|
}
|
304
268
|
if (end < totalPages - 1) {
|
305
269
|
if (end < totalPages - 2) {
|
306
|
-
pages.push(/* @__PURE__ */ (
|
270
|
+
pages.push(/* @__PURE__ */ jsx12("span", { children: "..." }, "ellipsis-end"));
|
307
271
|
}
|
308
272
|
pages.push(
|
309
|
-
/* @__PURE__ */ (
|
273
|
+
/* @__PURE__ */ jsx12("button", { onClick: () => handlePageChange(totalPages - 1), children: totalPages }, `page-${totalPages - 1}`)
|
310
274
|
);
|
311
275
|
}
|
312
276
|
return pages;
|
313
277
|
};
|
314
278
|
const firstItem = paginationSize === 0 ? 1 : paginationPage * paginationSize + 1;
|
315
279
|
const lastItem = paginationSize === 0 ? totalItems : Math.min((paginationPage + 1) * paginationSize, totalItems);
|
316
|
-
return /* @__PURE__ */ (
|
317
|
-
/* @__PURE__ */ (
|
318
|
-
/* @__PURE__ */ (
|
280
|
+
return /* @__PURE__ */ jsxs4("div", { className: "ndt-table-footer", children: [
|
281
|
+
/* @__PURE__ */ jsxs4("div", { className: "ndt-footer-count", children: [
|
282
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
319
283
|
"\u041F\u043E\u043A\u0430\u0437\u0430\u043D\u044B \u0441\u0442\u0440\u043E\u043A\u0438 \u0441 ",
|
320
284
|
firstItem,
|
321
285
|
" \u043F\u043E ",
|
322
286
|
lastItem,
|
323
287
|
", "
|
324
288
|
] }),
|
325
|
-
/* @__PURE__ */ (
|
289
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
326
290
|
"\u0412\u0441\u0435\u0433\u043E: ",
|
327
291
|
totalItems
|
328
292
|
] })
|
329
293
|
] }),
|
330
|
-
paginationCounts && /* @__PURE__ */ (
|
331
|
-
/* @__PURE__ */ (
|
332
|
-
/* @__PURE__ */ (
|
333
|
-
/* @__PURE__ */ (
|
294
|
+
paginationCounts && /* @__PURE__ */ jsxs4("div", { className: "ndt-footer-pagination", children: [
|
295
|
+
/* @__PURE__ */ jsxs4("div", { className: "ndt-pagination-counts", children: [
|
296
|
+
/* @__PURE__ */ jsx12("span", { children: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A: " }),
|
297
|
+
/* @__PURE__ */ jsx12("select", { value: paginationSize, onChange: handleCountChange, children: paginationCounts.map((count) => /* @__PURE__ */ jsx12("option", { value: count, children: count === 0 ? "\u0412\u0441\u0435" : count }, `count-${count}`)) })
|
334
298
|
] }),
|
335
|
-
/* @__PURE__ */ (
|
336
|
-
/* @__PURE__ */ (
|
299
|
+
/* @__PURE__ */ jsxs4("div", { className: "ndt-pagination-buttons", children: [
|
300
|
+
/* @__PURE__ */ jsx12(
|
337
301
|
"button",
|
338
302
|
{
|
339
303
|
disabled: paginationPage === 0,
|
340
304
|
onClick: () => handlePageChange(0),
|
341
305
|
"aria-label": "\u041F\u0435\u0440\u0432\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
342
|
-
children: /* @__PURE__ */ (
|
306
|
+
children: /* @__PURE__ */ jsx12(FirstIcon_default, {})
|
343
307
|
}
|
344
308
|
),
|
345
|
-
/* @__PURE__ */ (
|
309
|
+
/* @__PURE__ */ jsx12(
|
346
310
|
"button",
|
347
311
|
{
|
348
312
|
disabled: paginationPage === 0,
|
349
313
|
onClick: () => handlePageChange(paginationPage - 1),
|
350
314
|
"aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
351
|
-
children: /* @__PURE__ */ (
|
315
|
+
children: /* @__PURE__ */ jsx12(PrevIcon_default, {})
|
352
316
|
}
|
353
317
|
),
|
354
|
-
/* @__PURE__ */ (
|
355
|
-
/* @__PURE__ */ (
|
318
|
+
/* @__PURE__ */ jsx12("div", { className: "ndt-buttons-num", children: renderPageNumbers() }),
|
319
|
+
/* @__PURE__ */ jsx12(
|
356
320
|
"button",
|
357
321
|
{
|
358
322
|
disabled: paginationPage >= totalPages - 1,
|
359
323
|
onClick: () => handlePageChange(paginationPage + 1),
|
360
324
|
"aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
361
|
-
children: /* @__PURE__ */ (
|
325
|
+
children: /* @__PURE__ */ jsx12(NextIcon_default, {})
|
362
326
|
}
|
363
327
|
),
|
364
|
-
/* @__PURE__ */ (
|
328
|
+
/* @__PURE__ */ jsx12(
|
365
329
|
"button",
|
366
330
|
{
|
367
331
|
disabled: paginationPage >= totalPages - 1,
|
368
332
|
onClick: () => handlePageChange(totalPages - 1),
|
369
333
|
"aria-label": "\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u044F\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
|
370
|
-
children: /* @__PURE__ */ (
|
334
|
+
children: /* @__PURE__ */ jsx12(LastIcon_default, {})
|
371
335
|
}
|
372
336
|
)
|
373
337
|
] })
|
@@ -420,251 +384,19 @@ var filterData = (data, filter, value) => {
|
|
420
384
|
return filteredData;
|
421
385
|
};
|
422
386
|
|
423
|
-
// components/export/WordExport.tsx
|
424
|
-
var import_docx = require("docx");
|
425
|
-
var import_file_saver = require("file-saver");
|
426
|
-
|
427
|
-
// utils/exportUtils/ExportHelpers.ts
|
428
|
-
function prepareExportRows(columns, data) {
|
429
|
-
return data.map(
|
430
|
-
(row) => columns.map((col) => {
|
431
|
-
const value = row[col.field];
|
432
|
-
return typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), row) : String(value != null ? value : "");
|
433
|
-
})
|
434
|
-
);
|
435
|
-
}
|
436
|
-
function prepareExportHeaders(columns) {
|
437
|
-
return columns.map((col) => col.title);
|
438
|
-
}
|
439
|
-
|
440
|
-
// components/export/WordExport.tsx
|
441
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
442
|
-
var WordExport = ({
|
443
|
-
wordData,
|
444
|
-
columns,
|
445
|
-
title,
|
446
|
-
options = {
|
447
|
-
fontSize: 20,
|
448
|
-
boldHeaders: false,
|
449
|
-
autoLandscape: false,
|
450
|
-
maxColumnsBeforeLandscape: 5
|
451
|
-
}
|
452
|
-
// exportCustomColumns
|
453
|
-
}) => {
|
454
|
-
const createNewWord = async () => {
|
455
|
-
const {
|
456
|
-
fontSize = 0,
|
457
|
-
boldHeaders = true,
|
458
|
-
autoLandscape = true,
|
459
|
-
maxColumnsBeforeLandscape = 5
|
460
|
-
} = options;
|
461
|
-
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
462
|
-
const headerCells = prepareExportHeaders(columns).map((header) => new import_docx.TableCell({
|
463
|
-
children: [new import_docx.Paragraph({
|
464
|
-
children: [new import_docx.TextRun({
|
465
|
-
text: header,
|
466
|
-
size: fontSize,
|
467
|
-
bold: boldHeaders
|
468
|
-
})],
|
469
|
-
alignment: import_docx.AlignmentType.CENTER
|
470
|
-
})],
|
471
|
-
verticalAlign: import_docx.VerticalAlign.CENTER
|
472
|
-
}));
|
473
|
-
const tableHeaderRow = new import_docx.TableRow({ children: headerCells });
|
474
|
-
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
475
|
-
const rowCells = cells.map(
|
476
|
-
(value) => new import_docx.TableCell({
|
477
|
-
children: [new import_docx.Paragraph({
|
478
|
-
children: [new import_docx.TextRun({
|
479
|
-
text: value,
|
480
|
-
size: fontSize
|
481
|
-
})],
|
482
|
-
alignment: import_docx.AlignmentType.CENTER
|
483
|
-
})],
|
484
|
-
verticalAlign: import_docx.VerticalAlign.CENTER
|
485
|
-
})
|
486
|
-
);
|
487
|
-
return new import_docx.TableRow({ children: rowCells });
|
488
|
-
});
|
489
|
-
const table = new import_docx.Table({
|
490
|
-
rows: [tableHeaderRow, ...rows],
|
491
|
-
width: { size: 11e3, type: import_docx.WidthType.DXA },
|
492
|
-
indent: { size: -1e3, type: import_docx.WidthType.DXA }
|
493
|
-
});
|
494
|
-
const doc = new import_docx.Document({
|
495
|
-
sections: [{
|
496
|
-
children: [table, new import_docx.Paragraph({ text: "" })],
|
497
|
-
properties: isLandscape ? { page: { size: { orientation: import_docx.PageOrientation.LANDSCAPE } } } : {}
|
498
|
-
}]
|
499
|
-
});
|
500
|
-
import_docx.Packer.toBlob(doc).then((blob) => {
|
501
|
-
(0, import_file_saver.saveAs)(blob, `${title}.docx`);
|
502
|
-
});
|
503
|
-
};
|
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" });
|
505
|
-
};
|
506
|
-
var WordExport_default = WordExport;
|
507
|
-
|
508
|
-
// utils/exportUtils/exportUtils.ts
|
509
|
-
var generateExcelColumns = (columns, exportCustomColumns) => {
|
510
|
-
let excelColumns = columns.map((column) => ({
|
511
|
-
header: column.title,
|
512
|
-
key: column.field,
|
513
|
-
width: 20
|
514
|
-
}));
|
515
|
-
if (exportCustomColumns) {
|
516
|
-
exportCustomColumns.forEach((custom) => {
|
517
|
-
excelColumns = excelColumns.map(
|
518
|
-
(col) => col.key === custom.key ? { ...col, ...custom } : col
|
519
|
-
);
|
520
|
-
});
|
521
|
-
}
|
522
|
-
return excelColumns;
|
523
|
-
};
|
524
|
-
var applyHeaderStyles = (row, columnCount) => {
|
525
|
-
row.height = 40;
|
526
|
-
row.font = { size: 12, bold: true };
|
527
|
-
row.alignment = { vertical: "middle", horizontal: "center" };
|
528
|
-
for (let i = 1; i <= columnCount; i++) {
|
529
|
-
const cell = row.getCell(i);
|
530
|
-
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
531
|
-
cell.border = {
|
532
|
-
top: { style: "thin" },
|
533
|
-
left: { style: "thin" },
|
534
|
-
bottom: { style: "thin" },
|
535
|
-
right: { style: "thin" }
|
536
|
-
};
|
537
|
-
}
|
538
|
-
};
|
539
|
-
var applyRowStyles = (row, columnCount) => {
|
540
|
-
row.height = 40;
|
541
|
-
row.font = { size: 12 };
|
542
|
-
row.alignment = { vertical: "middle", horizontal: "center" };
|
543
|
-
for (let i = 1; i <= columnCount; i++) {
|
544
|
-
const cell = row.getCell(i);
|
545
|
-
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
546
|
-
cell.border = {
|
547
|
-
top: { style: "thin" },
|
548
|
-
left: { style: "thin" },
|
549
|
-
bottom: { style: "thin" },
|
550
|
-
right: { style: "thin" }
|
551
|
-
};
|
552
|
-
}
|
553
|
-
};
|
554
|
-
var generateExcelDataRows = (columns, data) => {
|
555
|
-
return data.map((element) => {
|
556
|
-
const rowData = {};
|
557
|
-
columns.forEach((col) => {
|
558
|
-
const value = element[col.field];
|
559
|
-
rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
|
560
|
-
});
|
561
|
-
return rowData;
|
562
|
-
});
|
563
|
-
};
|
564
|
-
var setColumnAutoWidths = (sheet) => {
|
565
|
-
var _a;
|
566
|
-
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
567
|
-
var _a2;
|
568
|
-
let maxLength = 10;
|
569
|
-
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
570
|
-
const cellValue = cell.value ? String(cell.value) : "";
|
571
|
-
maxLength = Math.max(maxLength, cellValue.length + 5);
|
572
|
-
});
|
573
|
-
column.width = maxLength;
|
574
|
-
});
|
575
|
-
};
|
576
|
-
|
577
|
-
// components/export/ExportExcel.tsx
|
578
|
-
var import_exceljs = __toESM(require("exceljs"));
|
579
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
580
|
-
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
581
|
-
const exportExcel = () => {
|
582
|
-
const workbook = new import_exceljs.default.Workbook();
|
583
|
-
const sheet = workbook.addWorksheet(title, {
|
584
|
-
pageSetup: {
|
585
|
-
fitToPage: true,
|
586
|
-
fitToHeight: 2,
|
587
|
-
fitToWidth: 1,
|
588
|
-
orientation: "landscape"
|
589
|
-
},
|
590
|
-
headerFooter: {
|
591
|
-
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
592
|
-
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
593
|
-
}
|
594
|
-
});
|
595
|
-
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
596
|
-
sheet.columns = excelColumns;
|
597
|
-
const headerRow = sheet.getRow(1);
|
598
|
-
applyHeaderStyles(headerRow, sheet.columns.length);
|
599
|
-
const dataRows = generateExcelDataRows(columns, excelData);
|
600
|
-
dataRows.forEach((data) => {
|
601
|
-
const row = sheet.addRow(data);
|
602
|
-
applyRowStyles(row, sheet.columns.length);
|
603
|
-
});
|
604
|
-
setColumnAutoWidths(sheet);
|
605
|
-
if (excelData.length > 15) {
|
606
|
-
sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
|
607
|
-
} else {
|
608
|
-
sheet.pageSetup.fitToHeight = 1;
|
609
|
-
}
|
610
|
-
workbook.xlsx.writeBuffer().then((data) => {
|
611
|
-
const blob = new Blob([data], {
|
612
|
-
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
613
|
-
});
|
614
|
-
const url = window.URL.createObjectURL(blob);
|
615
|
-
const anchor = document.createElement("a");
|
616
|
-
anchor.href = url;
|
617
|
-
anchor.download = `${title}.xlsx`;
|
618
|
-
anchor.click();
|
619
|
-
window.URL.revokeObjectURL(url);
|
620
|
-
});
|
621
|
-
};
|
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" });
|
623
|
-
};
|
624
|
-
var ExportExcel_default = ExportExcel;
|
625
|
-
|
626
|
-
// components/ExportSection.tsx
|
627
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
628
|
-
var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }) => {
|
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)(
|
633
|
-
WordExport_default,
|
634
|
-
{
|
635
|
-
wordData: tableData,
|
636
|
-
columns,
|
637
|
-
title: tableName,
|
638
|
-
exportCustomColumns,
|
639
|
-
options: wordOptions
|
640
|
-
}
|
641
|
-
),
|
642
|
-
excelBtn && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
643
|
-
ExportExcel_default,
|
644
|
-
{
|
645
|
-
excelData: tableData,
|
646
|
-
columns,
|
647
|
-
title: tableName,
|
648
|
-
exportCustomColumns
|
649
|
-
}
|
650
|
-
)
|
651
|
-
] })
|
652
|
-
] }) });
|
653
|
-
};
|
654
|
-
var ExportSection_default = ExportSection;
|
655
|
-
|
656
387
|
// utils/useDebouncedEffect.tsx
|
657
|
-
|
388
|
+
import { useEffect } from "react";
|
658
389
|
function useDebouncedEffect(callback, deps, delay) {
|
659
|
-
|
390
|
+
useEffect(() => {
|
660
391
|
const handler = setTimeout(() => callback(), delay);
|
661
392
|
return () => clearTimeout(handler);
|
662
393
|
}, [...deps, delay]);
|
663
394
|
}
|
664
395
|
|
665
396
|
// components/DataTable.tsx
|
666
|
-
|
667
|
-
var
|
397
|
+
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
398
|
+
var ExportSection = React3.lazy(() => import("./ExportSection-ZYOK6KMB.js"));
|
399
|
+
var DataTable = forwardRef(({
|
668
400
|
tableData,
|
669
401
|
columns,
|
670
402
|
tableName = "table-data",
|
@@ -683,21 +415,21 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
683
415
|
isTitles = false,
|
684
416
|
wordOptions
|
685
417
|
}, ref) => {
|
686
|
-
const [filters, setFilters] =
|
687
|
-
const [sortBy, setSortBy] =
|
688
|
-
const [paginationSize, setPaginationSize] =
|
689
|
-
const [paginationPage, setPaginationPage] =
|
690
|
-
const [collapsedGroups, setCollapsedGroups] =
|
418
|
+
const [filters, setFilters] = useState({});
|
419
|
+
const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
|
420
|
+
const [paginationSize, setPaginationSize] = useState((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
|
421
|
+
const [paginationPage, setPaginationPage] = useState(0);
|
422
|
+
const [collapsedGroups, setCollapsedGroups] = useState({});
|
691
423
|
const toggleGroup = (groupKey) => {
|
692
424
|
setCollapsedGroups((prev) => ({
|
693
425
|
...prev,
|
694
426
|
[groupKey]: !prev[groupKey]
|
695
427
|
}));
|
696
428
|
};
|
697
|
-
const widths = (
|
429
|
+
const widths = useMemo2(() => {
|
698
430
|
return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
|
699
431
|
}, [columns]);
|
700
|
-
const loadFromLocalStorage =
|
432
|
+
const loadFromLocalStorage = useCallback(() => {
|
701
433
|
try {
|
702
434
|
const s = localStorage.getItem(`${tableName}-sort-by`);
|
703
435
|
const f = localStorage.getItem(`${tableName}-filters`);
|
@@ -715,10 +447,10 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
715
447
|
setPaginationPage(0);
|
716
448
|
}
|
717
449
|
}, [tableName, paginationCounts]);
|
718
|
-
(
|
450
|
+
useEffect2(() => {
|
719
451
|
loadFromLocalStorage();
|
720
452
|
}, [loadFromLocalStorage]);
|
721
|
-
const processedData = (
|
453
|
+
const processedData = useMemo2(() => {
|
722
454
|
let result = [...tableData];
|
723
455
|
const columnMap = new Map(columns.map((col) => [col.field, col]));
|
724
456
|
for (const field in filters) {
|
@@ -733,12 +465,12 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
733
465
|
}
|
734
466
|
return result;
|
735
467
|
}, [tableData, filters, sortBy, columns]);
|
736
|
-
const displayData = (
|
468
|
+
const displayData = useMemo2(() => {
|
737
469
|
if (paginationSize === 0) return processedData;
|
738
470
|
const start = paginationPage * paginationSize;
|
739
471
|
return processedData.slice(start, start + paginationSize);
|
740
472
|
}, [processedData, paginationPage, paginationSize]);
|
741
|
-
(
|
473
|
+
useEffect2(() => {
|
742
474
|
setPaginationPage(0);
|
743
475
|
}, [filters, sortBy]);
|
744
476
|
useDebouncedEffect(() => {
|
@@ -747,19 +479,19 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
747
479
|
useDebouncedEffect(() => {
|
748
480
|
localStorage.setItem(`${tableName}-sort-by`, JSON.stringify(sortBy));
|
749
481
|
}, [sortBy, tableName], 500);
|
750
|
-
(
|
482
|
+
useEffect2(() => {
|
751
483
|
localStorage.setItem(`${tableName}-counts`, paginationSize === 0 ? "all" : paginationSize.toString());
|
752
484
|
}, [paginationSize, tableName]);
|
753
|
-
(
|
485
|
+
useEffect2(() => {
|
754
486
|
localStorage.setItem(`${tableName}-page`, paginationPage.toString());
|
755
487
|
}, [paginationPage, tableName]);
|
756
|
-
|
488
|
+
useImperativeHandle(ref, () => ({
|
757
489
|
getData: () => processedData,
|
758
490
|
getCurrentData: () => displayData
|
759
491
|
}), [processedData, displayData]);
|
760
|
-
return /* @__PURE__ */ (
|
761
|
-
(wordBtn || excelBtn) && /* @__PURE__ */ (
|
762
|
-
|
492
|
+
return /* @__PURE__ */ jsxs5("div", { className: "ndt-table-container", children: [
|
493
|
+
/* @__PURE__ */ jsx13(Suspense, { fallback: /* @__PURE__ */ jsx13("div", { children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430..." }), children: (wordBtn || excelBtn) && /* @__PURE__ */ jsx13(
|
494
|
+
ExportSection,
|
763
495
|
{
|
764
496
|
wordBtn,
|
765
497
|
excelBtn,
|
@@ -770,9 +502,9 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
770
502
|
exportCustomColumns,
|
771
503
|
wordOptions
|
772
504
|
}
|
773
|
-
),
|
774
|
-
/* @__PURE__ */ (
|
775
|
-
/* @__PURE__ */ (
|
505
|
+
) }),
|
506
|
+
/* @__PURE__ */ jsxs5("div", { className: "ndt-table", children: [
|
507
|
+
/* @__PURE__ */ jsx13(
|
776
508
|
TableHeader_default,
|
777
509
|
{
|
778
510
|
columns,
|
@@ -784,7 +516,7 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
784
516
|
headerGroup
|
785
517
|
}
|
786
518
|
),
|
787
|
-
loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ (
|
519
|
+
loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ jsx13("span", { style: { marginLeft: 10, fontWeight: "bold" }, children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) : /* @__PURE__ */ jsx13(
|
788
520
|
TableBody_default,
|
789
521
|
{
|
790
522
|
tableData: displayData,
|
@@ -798,7 +530,7 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
798
530
|
isTitles
|
799
531
|
}
|
800
532
|
),
|
801
|
-
isFooter && /* @__PURE__ */ (
|
533
|
+
isFooter && /* @__PURE__ */ jsx13(
|
802
534
|
TableFooter_default,
|
803
535
|
{
|
804
536
|
paginationCounts,
|
@@ -814,8 +546,6 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
814
546
|
});
|
815
547
|
DataTable.displayName = "DataTable";
|
816
548
|
var DataTable_default = DataTable;
|
817
|
-
|
818
|
-
|
819
|
-
|
820
|
-
});
|
821
|
-
//# sourceMappingURL=index.js.map
|
549
|
+
export {
|
550
|
+
DataTable_default as DataTable
|
551
|
+
};
|