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
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 { useImperativeHandle, useEffect as useEffect2, useState, useCallback, useMemo as useMemo2, forwardRef } 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
|
] })
|
@@ -421,8 +385,20 @@ var filterData = (data, filter, value) => {
|
|
421
385
|
};
|
422
386
|
|
423
387
|
// components/export/WordExport.tsx
|
424
|
-
|
425
|
-
|
388
|
+
import {
|
389
|
+
AlignmentType,
|
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";
|
426
402
|
|
427
403
|
// utils/exportUtils/ExportHelpers.ts
|
428
404
|
function prepareExportRows(columns, data) {
|
@@ -438,7 +414,7 @@ function prepareExportHeaders(columns) {
|
|
438
414
|
}
|
439
415
|
|
440
416
|
// components/export/WordExport.tsx
|
441
|
-
|
417
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
442
418
|
var WordExport = ({
|
443
419
|
wordData,
|
444
420
|
columns,
|
@@ -459,49 +435,49 @@ var WordExport = ({
|
|
459
435
|
maxColumnsBeforeLandscape = 5
|
460
436
|
} = options;
|
461
437
|
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
462
|
-
const headerCells = prepareExportHeaders(columns).map((header) => new
|
463
|
-
children: [new
|
464
|
-
children: [new
|
438
|
+
const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
|
439
|
+
children: [new Paragraph({
|
440
|
+
children: [new TextRun({
|
465
441
|
text: header,
|
466
442
|
size: fontSize,
|
467
443
|
bold: boldHeaders
|
468
444
|
})],
|
469
|
-
alignment:
|
445
|
+
alignment: AlignmentType.CENTER
|
470
446
|
})],
|
471
|
-
verticalAlign:
|
447
|
+
verticalAlign: VerticalAlign.CENTER
|
472
448
|
}));
|
473
|
-
const tableHeaderRow = new
|
449
|
+
const tableHeaderRow = new TableRow({ children: headerCells });
|
474
450
|
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
475
451
|
const rowCells = cells.map(
|
476
|
-
(value) => new
|
477
|
-
children: [new
|
478
|
-
children: [new
|
452
|
+
(value) => new TableCell({
|
453
|
+
children: [new Paragraph({
|
454
|
+
children: [new TextRun({
|
479
455
|
text: value,
|
480
456
|
size: fontSize
|
481
457
|
})],
|
482
|
-
alignment:
|
458
|
+
alignment: AlignmentType.CENTER
|
483
459
|
})],
|
484
|
-
verticalAlign:
|
460
|
+
verticalAlign: VerticalAlign.CENTER
|
485
461
|
})
|
486
462
|
);
|
487
|
-
return new
|
463
|
+
return new TableRow({ children: rowCells });
|
488
464
|
});
|
489
|
-
const table = new
|
465
|
+
const table = new Table({
|
490
466
|
rows: [tableHeaderRow, ...rows],
|
491
|
-
width: { size: 11e3, type:
|
492
|
-
indent: { size: -1e3, type:
|
467
|
+
width: { size: 11e3, type: WidthType.DXA },
|
468
|
+
indent: { size: -1e3, type: WidthType.DXA }
|
493
469
|
});
|
494
|
-
const doc = new
|
470
|
+
const doc = new Document({
|
495
471
|
sections: [{
|
496
|
-
children: [table, new
|
497
|
-
properties: isLandscape ? { page: { size: { orientation:
|
472
|
+
children: [table, new Paragraph({ text: "" })],
|
473
|
+
properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
|
498
474
|
}]
|
499
475
|
});
|
500
|
-
|
501
|
-
|
476
|
+
Packer.toBlob(doc).then((blob) => {
|
477
|
+
saveAs(blob, `${title}.docx`);
|
502
478
|
});
|
503
479
|
};
|
504
|
-
return /* @__PURE__ */ (
|
480
|
+
return /* @__PURE__ */ jsx13("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
|
505
481
|
};
|
506
482
|
var WordExport_default = WordExport;
|
507
483
|
|
@@ -575,11 +551,11 @@ var setColumnAutoWidths = (sheet) => {
|
|
575
551
|
};
|
576
552
|
|
577
553
|
// components/export/ExportExcel.tsx
|
578
|
-
|
579
|
-
|
554
|
+
import ExcelJS from "exceljs";
|
555
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
580
556
|
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
581
557
|
const exportExcel = () => {
|
582
|
-
const workbook = new
|
558
|
+
const workbook = new ExcelJS.Workbook();
|
583
559
|
const sheet = workbook.addWorksheet(title, {
|
584
560
|
pageSetup: {
|
585
561
|
fitToPage: true,
|
@@ -619,17 +595,17 @@ var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
|
619
595
|
window.URL.revokeObjectURL(url);
|
620
596
|
});
|
621
597
|
};
|
622
|
-
return /* @__PURE__ */ (
|
598
|
+
return /* @__PURE__ */ jsx14("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
623
599
|
};
|
624
600
|
var ExportExcel_default = ExportExcel;
|
625
601
|
|
626
602
|
// components/ExportSection.tsx
|
627
|
-
|
603
|
+
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
|
628
604
|
var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }) => {
|
629
|
-
return /* @__PURE__ */ (
|
630
|
-
/* @__PURE__ */ (
|
631
|
-
/* @__PURE__ */ (
|
632
|
-
wordBtn && /* @__PURE__ */ (
|
605
|
+
return /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsxs5("div", { className: "ndt-download-section", children: [
|
606
|
+
/* @__PURE__ */ jsx15("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
|
607
|
+
/* @__PURE__ */ jsxs5("div", { className: "ndt-download-buttons", children: [
|
608
|
+
wordBtn && /* @__PURE__ */ jsx15(
|
633
609
|
WordExport_default,
|
634
610
|
{
|
635
611
|
wordData: tableData,
|
@@ -639,7 +615,7 @@ var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableD
|
|
639
615
|
options: wordOptions
|
640
616
|
}
|
641
617
|
),
|
642
|
-
excelBtn && /* @__PURE__ */ (
|
618
|
+
excelBtn && /* @__PURE__ */ jsx15(
|
643
619
|
ExportExcel_default,
|
644
620
|
{
|
645
621
|
excelData: tableData,
|
@@ -654,17 +630,17 @@ var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableD
|
|
654
630
|
var ExportSection_default = ExportSection;
|
655
631
|
|
656
632
|
// utils/useDebouncedEffect.tsx
|
657
|
-
|
633
|
+
import { useEffect } from "react";
|
658
634
|
function useDebouncedEffect(callback, deps, delay) {
|
659
|
-
|
635
|
+
useEffect(() => {
|
660
636
|
const handler = setTimeout(() => callback(), delay);
|
661
637
|
return () => clearTimeout(handler);
|
662
638
|
}, [...deps, delay]);
|
663
639
|
}
|
664
640
|
|
665
641
|
// components/DataTable.tsx
|
666
|
-
|
667
|
-
var DataTable =
|
642
|
+
import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
|
643
|
+
var DataTable = forwardRef(({
|
668
644
|
tableData,
|
669
645
|
columns,
|
670
646
|
tableName = "table-data",
|
@@ -683,21 +659,21 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
683
659
|
isTitles = false,
|
684
660
|
wordOptions
|
685
661
|
}, ref) => {
|
686
|
-
const [filters, setFilters] =
|
687
|
-
const [sortBy, setSortBy] =
|
688
|
-
const [paginationSize, setPaginationSize] =
|
689
|
-
const [paginationPage, setPaginationPage] =
|
690
|
-
const [collapsedGroups, setCollapsedGroups] =
|
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({});
|
691
667
|
const toggleGroup = (groupKey) => {
|
692
668
|
setCollapsedGroups((prev) => ({
|
693
669
|
...prev,
|
694
670
|
[groupKey]: !prev[groupKey]
|
695
671
|
}));
|
696
672
|
};
|
697
|
-
const widths = (
|
673
|
+
const widths = useMemo2(() => {
|
698
674
|
return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
|
699
675
|
}, [columns]);
|
700
|
-
const loadFromLocalStorage =
|
676
|
+
const loadFromLocalStorage = useCallback(() => {
|
701
677
|
try {
|
702
678
|
const s = localStorage.getItem(`${tableName}-sort-by`);
|
703
679
|
const f = localStorage.getItem(`${tableName}-filters`);
|
@@ -715,10 +691,10 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
715
691
|
setPaginationPage(0);
|
716
692
|
}
|
717
693
|
}, [tableName, paginationCounts]);
|
718
|
-
(
|
694
|
+
useEffect2(() => {
|
719
695
|
loadFromLocalStorage();
|
720
696
|
}, [loadFromLocalStorage]);
|
721
|
-
const processedData = (
|
697
|
+
const processedData = useMemo2(() => {
|
722
698
|
let result = [...tableData];
|
723
699
|
const columnMap = new Map(columns.map((col) => [col.field, col]));
|
724
700
|
for (const field in filters) {
|
@@ -733,12 +709,12 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
733
709
|
}
|
734
710
|
return result;
|
735
711
|
}, [tableData, filters, sortBy, columns]);
|
736
|
-
const displayData = (
|
712
|
+
const displayData = useMemo2(() => {
|
737
713
|
if (paginationSize === 0) return processedData;
|
738
714
|
const start = paginationPage * paginationSize;
|
739
715
|
return processedData.slice(start, start + paginationSize);
|
740
716
|
}, [processedData, paginationPage, paginationSize]);
|
741
|
-
(
|
717
|
+
useEffect2(() => {
|
742
718
|
setPaginationPage(0);
|
743
719
|
}, [filters, sortBy]);
|
744
720
|
useDebouncedEffect(() => {
|
@@ -747,18 +723,18 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
747
723
|
useDebouncedEffect(() => {
|
748
724
|
localStorage.setItem(`${tableName}-sort-by`, JSON.stringify(sortBy));
|
749
725
|
}, [sortBy, tableName], 500);
|
750
|
-
(
|
726
|
+
useEffect2(() => {
|
751
727
|
localStorage.setItem(`${tableName}-counts`, paginationSize === 0 ? "all" : paginationSize.toString());
|
752
728
|
}, [paginationSize, tableName]);
|
753
|
-
(
|
729
|
+
useEffect2(() => {
|
754
730
|
localStorage.setItem(`${tableName}-page`, paginationPage.toString());
|
755
731
|
}, [paginationPage, tableName]);
|
756
|
-
|
732
|
+
useImperativeHandle(ref, () => ({
|
757
733
|
getData: () => processedData,
|
758
734
|
getCurrentData: () => displayData
|
759
735
|
}), [processedData, displayData]);
|
760
|
-
return /* @__PURE__ */ (
|
761
|
-
(wordBtn || excelBtn) && /* @__PURE__ */ (
|
736
|
+
return /* @__PURE__ */ jsxs6("div", { className: "ndt-table-container", children: [
|
737
|
+
(wordBtn || excelBtn) && /* @__PURE__ */ jsx16(
|
762
738
|
ExportSection_default,
|
763
739
|
{
|
764
740
|
wordBtn,
|
@@ -771,8 +747,8 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
771
747
|
wordOptions
|
772
748
|
}
|
773
749
|
),
|
774
|
-
/* @__PURE__ */ (
|
775
|
-
/* @__PURE__ */ (
|
750
|
+
/* @__PURE__ */ jsxs6("div", { className: "ndt-table", children: [
|
751
|
+
/* @__PURE__ */ jsx16(
|
776
752
|
TableHeader_default,
|
777
753
|
{
|
778
754
|
columns,
|
@@ -784,7 +760,7 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
784
760
|
headerGroup
|
785
761
|
}
|
786
762
|
),
|
787
|
-
loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ (
|
763
|
+
loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ jsx16("span", { style: { marginLeft: 10, fontWeight: "bold" }, children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) : /* @__PURE__ */ jsx16(
|
788
764
|
TableBody_default,
|
789
765
|
{
|
790
766
|
tableData: displayData,
|
@@ -798,7 +774,7 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
798
774
|
isTitles
|
799
775
|
}
|
800
776
|
),
|
801
|
-
isFooter && /* @__PURE__ */ (
|
777
|
+
isFooter && /* @__PURE__ */ jsx16(
|
802
778
|
TableFooter_default,
|
803
779
|
{
|
804
780
|
paginationCounts,
|
@@ -814,8 +790,7 @@ var DataTable = (0, import_react5.forwardRef)(({
|
|
814
790
|
});
|
815
791
|
DataTable.displayName = "DataTable";
|
816
792
|
var DataTable_default = DataTable;
|
817
|
-
|
818
|
-
|
819
|
-
|
820
|
-
});
|
793
|
+
export {
|
794
|
+
DataTable_default as DataTable
|
795
|
+
};
|
821
796
|
//# sourceMappingURL=index.js.map
|