nillud-data-table 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs DELETED
@@ -1,821 +0,0 @@
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
- // components/DataTable.tsx
38
- var import_react5 = require("react");
39
-
40
- // components/TableHeader.tsx
41
- var import_react2 = __toESM(require("react"), 1);
42
-
43
- // components/Column.tsx
44
- var import_react = require("react");
45
-
46
- // components/img/SortDown.tsx
47
- var import_jsx_runtime = require("react/jsx-runtime");
48
- var SortDown = () => {
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" }) });
50
- };
51
- var SortDown_default = SortDown;
52
-
53
- // components/img/SortUp.tsx
54
- var import_jsx_runtime2 = require("react/jsx-runtime");
55
- var SortUp = () => {
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" }) });
57
- };
58
- var SortUp_default = SortUp;
59
-
60
- // components/Column.tsx
61
- var import_jsx_runtime3 = require("react/jsx-runtime");
62
- var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
63
- var _a;
64
- const currentSort = (0, import_react.useMemo)(() => {
65
- return sortBy.col === column.field ? sortBy.type : null;
66
- }, [sortBy, column.field]);
67
- const toggleSort = () => {
68
- const nextType = currentSort === "asc" ? "desc" : "asc";
69
- getSortField({ col: column.field, type: nextType });
70
- };
71
- const onFilterChange = (e) => {
72
- getFilters({ ...filters, [column.field]: e.target.value });
73
- };
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 })
78
- ] }),
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)(
80
- "input",
81
- {
82
- type: "text",
83
- value: (_a = filters[column.field]) != null ? _a : "",
84
- onChange: onFilterChange,
85
- placeholder: "\u0424\u0438\u043B\u044C\u0442\u0440..."
86
- }
87
- ) })
88
- ] });
89
- };
90
- var Column_default = Column;
91
-
92
- // components/TableHeader.tsx
93
- var import_jsx_runtime4 = require("react/jsx-runtime");
94
- var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, headerGroup }) => {
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)(
97
- Column_default,
98
- {
99
- column,
100
- getSortField,
101
- sortBy,
102
- getFilters,
103
- filters
104
- },
105
- `column-${id}`
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: [
108
- renderHeaderGroup(),
109
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: renderColumns() })
110
- ] });
111
- };
112
- var TableHeader_default = import_react2.default.memo(Header);
113
-
114
- // components/TableBody.tsx
115
- var import_react3 = __toESM(require("react"), 1);
116
-
117
- // components/Cell.tsx
118
- var import_jsx_runtime5 = require("react/jsx-runtime");
119
- var Cell = ({
120
- row,
121
- column,
122
- rowId,
123
- isTitles
124
- }) => {
125
- const rawValue = row[column.field];
126
- const stringValue = typeof rawValue !== "undefined" && rawValue !== null ? String(rawValue) : "";
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)(
129
- "div",
130
- {
131
- className: "ndt-cell",
132
- title: isTitles && stringValue ? stringValue : "",
133
- children: content
134
- }
135
- );
136
- };
137
- var Cell_default = Cell;
138
-
139
- // components/Row.tsx
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)(
142
- Cell_default,
143
- {
144
- row,
145
- column,
146
- rowId,
147
- isTitles
148
- },
149
- `cell-${rowId}-${id}`
150
- )) });
151
- var Row_default = Row;
152
-
153
- // utils/groupDataBy.ts
154
- var groupDataBy = (data, key) => {
155
- const groups = /* @__PURE__ */ new Map();
156
- data.forEach((item) => {
157
- const groupKey = item[key] || "\u2014";
158
- if (!groups.has(String(groupKey))) {
159
- groups.set(String(groupKey), []);
160
- }
161
- groups.get(String(groupKey)).push(item);
162
- });
163
- return Array.from(groups.entries()).map(([key2, items]) => ({ key: key2, items }));
164
- };
165
-
166
- // components/TableBody.tsx
167
- var import_jsx_runtime7 = require("react/jsx-runtime");
168
- var TableBody = ({
169
- columns,
170
- tableData,
171
- scrollable,
172
- scrollHeight,
173
- widths,
174
- groupBy,
175
- collapsedGroups = {},
176
- toggleGroup,
177
- isTitles
178
- }) => {
179
- const grouped = groupBy ? groupDataBy(tableData, groupBy) : [];
180
- if (!tableData || tableData.length === 0) {
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" }) }) });
182
- }
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)(
185
- "div",
186
- {
187
- className: "ndt-group-header",
188
- onClick: () => toggleGroup == null ? void 0 : toggleGroup(group.key),
189
- children: [
190
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { marginRight: 8 }, children: collapsedGroups[group.key] ? "\u25B6" : "\u25BC" }),
191
- group.key,
192
- " (",
193
- group.items.length,
194
- ")"
195
- ]
196
- }
197
- ),
198
- !collapsedGroups[group.key] && group.items.map((element, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
199
- Row_default,
200
- {
201
- rowId: id2,
202
- row: element,
203
- columns,
204
- widths,
205
- isTitles
206
- },
207
- `row-${group.key}-${id2}`
208
- ))
209
- ] }, `row-${group.key}-${id}`));
210
- const renderFlatRows = () => tableData.map((element, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
211
- Row_default,
212
- {
213
- rowId: id,
214
- row: element,
215
- columns,
216
- widths
217
- },
218
- `row-${id}`
219
- ));
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() });
221
- };
222
- var TableBody_default = TableBody;
223
-
224
- // components/img/NextIcon.tsx
225
- var import_jsx_runtime8 = require("react/jsx-runtime");
226
- var NextIcon = () => {
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" }) });
228
- };
229
- var NextIcon_default = NextIcon;
230
-
231
- // components/img/LastIcon.tsx
232
- var import_jsx_runtime9 = require("react/jsx-runtime");
233
- var LastIcon = () => {
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" }) });
235
- };
236
- var LastIcon_default = LastIcon;
237
-
238
- // components/img/PrevIcon.tsx
239
- var import_jsx_runtime10 = require("react/jsx-runtime");
240
- var PrevIcon = () => {
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" }) });
242
- };
243
- var PrevIcon_default = PrevIcon;
244
-
245
- // components/img/FirstIcon.tsx
246
- var import_jsx_runtime11 = require("react/jsx-runtime");
247
- var FirstIcon = () => {
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" }) });
249
- };
250
- var FirstIcon_default = FirstIcon;
251
-
252
- // components/TableFooter.tsx
253
- var import_jsx_runtime12 = require("react/jsx-runtime");
254
- var TableFooter = ({
255
- tableData,
256
- paginationCounts,
257
- paginationSize,
258
- getPaginationSize,
259
- paginationPage,
260
- getPaginationPage
261
- }) => {
262
- const totalItems = tableData.length;
263
- const totalPages = paginationSize === 0 ? 1 : Math.ceil(totalItems / paginationSize);
264
- if (totalItems === 0) return null;
265
- const handleCountChange = (e) => {
266
- getPaginationSize(Number(e.target.value));
267
- };
268
- const handlePageChange = (newPage) => {
269
- if (newPage >= 0 && newPage < totalPages) {
270
- getPaginationPage(newPage);
271
- }
272
- };
273
- const renderPageNumbers = () => {
274
- if (totalPages <= 1) return null;
275
- const pages = [];
276
- const maxVisible = 5;
277
- let start = Math.max(0, paginationPage - Math.floor(maxVisible / 2));
278
- const end = Math.min(totalPages - 1, start + maxVisible - 1);
279
- if (end - start + 1 < maxVisible) {
280
- start = Math.max(0, end - maxVisible + 1);
281
- }
282
- if (start > 0) {
283
- pages.push(
284
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => handlePageChange(0), children: "1" }, "page-0")
285
- );
286
- if (start > 1) {
287
- pages.push(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "..." }, "ellipsis-start"));
288
- }
289
- }
290
- for (let i = start; i <= end; i++) {
291
- pages.push(
292
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
293
- "button",
294
- {
295
- className: i === paginationPage ? "btn-active" : "",
296
- onClick: () => handlePageChange(i),
297
- disabled: i === paginationPage,
298
- children: i + 1
299
- },
300
- `page-${i}`
301
- )
302
- );
303
- }
304
- if (end < totalPages - 1) {
305
- if (end < totalPages - 2) {
306
- pages.push(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "..." }, "ellipsis-end"));
307
- }
308
- pages.push(
309
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => handlePageChange(totalPages - 1), children: totalPages }, `page-${totalPages - 1}`)
310
- );
311
- }
312
- return pages;
313
- };
314
- const firstItem = paginationSize === 0 ? 1 : paginationPage * paginationSize + 1;
315
- const lastItem = paginationSize === 0 ? totalItems : Math.min((paginationPage + 1) * paginationSize, totalItems);
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: [
319
- "\u041F\u043E\u043A\u0430\u0437\u0430\u043D\u044B \u0441\u0442\u0440\u043E\u043A\u0438 \u0441 ",
320
- firstItem,
321
- " \u043F\u043E ",
322
- lastItem,
323
- ", "
324
- ] }),
325
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
326
- "\u0412\u0441\u0435\u0433\u043E: ",
327
- totalItems
328
- ] })
329
- ] }),
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}`)) })
334
- ] }),
335
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ndt-pagination-buttons", children: [
336
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
337
- "button",
338
- {
339
- disabled: paginationPage === 0,
340
- onClick: () => handlePageChange(0),
341
- "aria-label": "\u041F\u0435\u0440\u0432\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
342
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FirstIcon_default, {})
343
- }
344
- ),
345
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
346
- "button",
347
- {
348
- disabled: paginationPage === 0,
349
- onClick: () => handlePageChange(paginationPage - 1),
350
- "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
351
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PrevIcon_default, {})
352
- }
353
- ),
354
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ndt-buttons-num", children: renderPageNumbers() }),
355
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
356
- "button",
357
- {
358
- disabled: paginationPage >= totalPages - 1,
359
- onClick: () => handlePageChange(paginationPage + 1),
360
- "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
361
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NextIcon_default, {})
362
- }
363
- ),
364
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
365
- "button",
366
- {
367
- disabled: paginationPage >= totalPages - 1,
368
- onClick: () => handlePageChange(totalPages - 1),
369
- "aria-label": "\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u044F\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
370
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LastIcon_default, {})
371
- }
372
- )
373
- ] })
374
- ] })
375
- ] });
376
- };
377
- var TableFooter_default = TableFooter;
378
-
379
- // components/functions/sort-data.ts
380
- var sortByAsc = (data, column) => {
381
- const sortedData = data.sort((a, b) => {
382
- if (!isNaN(+a[column]) && !isNaN(+b[column])) {
383
- return +a[column] - +b[column];
384
- }
385
- if (`${a[column]}`.toLowerCase() < `${b[column]}`.toLowerCase()) {
386
- return -1;
387
- }
388
- if (`${a[column]}`.toLowerCase() > `${b[column]}`.toLowerCase()) {
389
- return 1;
390
- }
391
- return 0;
392
- });
393
- return sortedData;
394
- };
395
- var sortByDesc = (data, column) => {
396
- const sortedData = data.sort((a, b) => {
397
- if (!isNaN(+a[column]) && !isNaN(+b[column])) {
398
- return +b[column] - +a[column];
399
- }
400
- if (`${a[column]}`.toLowerCase() > `${b[column]}`.toLowerCase()) {
401
- return -1;
402
- }
403
- if (`${a[column]}`.toLowerCase() < `${b[column]}`.toLowerCase()) {
404
- return 1;
405
- }
406
- return 0;
407
- });
408
- return sortedData;
409
- };
410
- var sortData = (data, col, type) => {
411
- if (type === "asc") {
412
- return sortByAsc(data, col);
413
- } else {
414
- return sortByDesc(data, col);
415
- }
416
- };
417
- var filterData = (data, filter, value) => {
418
- if (value == "") return data;
419
- const filteredData = data.filter((element) => `${element[filter]}`.toLowerCase().includes(value.toLowerCase()));
420
- return filteredData;
421
- };
422
-
423
- // components/export/WordExport.tsx
424
- var import_docx = require("docx");
425
- var import_file_saver = __toESM(require("file-saver"), 1);
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.default)(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"), 1);
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
- // utils/useDebouncedEffect.tsx
657
- var import_react4 = require("react");
658
- function useDebouncedEffect(callback, deps, delay) {
659
- (0, import_react4.useEffect)(() => {
660
- const handler = setTimeout(() => callback(), delay);
661
- return () => clearTimeout(handler);
662
- }, [...deps, delay]);
663
- }
664
-
665
- // components/DataTable.tsx
666
- var import_jsx_runtime16 = require("react/jsx-runtime");
667
- var DataTable = (0, import_react5.forwardRef)(({
668
- tableData,
669
- columns,
670
- tableName = "table-data",
671
- loading = false,
672
- loadingElement = null,
673
- isFooter = false,
674
- paginationCounts = null,
675
- scrollable = false,
676
- scrollHeight = 300,
677
- exportCustomColumns = null,
678
- excelBtn = false,
679
- wordBtn = false,
680
- downloadSectionLeftSideContent = null,
681
- headerGroup = null,
682
- groupBy = null,
683
- isTitles = false,
684
- wordOptions
685
- }, ref) => {
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)({});
691
- const toggleGroup = (groupKey) => {
692
- setCollapsedGroups((prev) => ({
693
- ...prev,
694
- [groupKey]: !prev[groupKey]
695
- }));
696
- };
697
- const widths = (0, import_react5.useMemo)(() => {
698
- return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
699
- }, [columns]);
700
- const loadFromLocalStorage = (0, import_react5.useCallback)(() => {
701
- try {
702
- const s = localStorage.getItem(`${tableName}-sort-by`);
703
- const f = localStorage.getItem(`${tableName}-filters`);
704
- const c = localStorage.getItem(`${tableName}-counts`);
705
- const p = localStorage.getItem(`${tableName}-page`);
706
- if (s) setSortBy(JSON.parse(s));
707
- if (f) setFilters(JSON.parse(f));
708
- if (c) setPaginationSize(c === "all" ? 0 : Number(c));
709
- if (p) setPaginationPage(Number(p));
710
- } catch (e) {
711
- console.error("Error parsing localStorage data:", e);
712
- setSortBy({ col: "", type: "asc" });
713
- setFilters({});
714
- setPaginationSize((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
715
- setPaginationPage(0);
716
- }
717
- }, [tableName, paginationCounts]);
718
- (0, import_react5.useEffect)(() => {
719
- loadFromLocalStorage();
720
- }, [loadFromLocalStorage]);
721
- const processedData = (0, import_react5.useMemo)(() => {
722
- let result = [...tableData];
723
- const columnMap = new Map(columns.map((col) => [col.field, col]));
724
- for (const field in filters) {
725
- const filterValue = String(filters[field]);
726
- if (filterValue === "") continue;
727
- const column = columnMap.get(field);
728
- if (!column) continue;
729
- result = column.headerFilter ? result.filter((e) => column.headerFilter(filterValue, String(e[field]))) : filterData(result, field, filterValue);
730
- }
731
- if (sortBy.col) {
732
- result = sortData(result, sortBy.col, sortBy.type);
733
- }
734
- return result;
735
- }, [tableData, filters, sortBy, columns]);
736
- const displayData = (0, import_react5.useMemo)(() => {
737
- if (paginationSize === 0) return processedData;
738
- const start = paginationPage * paginationSize;
739
- return processedData.slice(start, start + paginationSize);
740
- }, [processedData, paginationPage, paginationSize]);
741
- (0, import_react5.useEffect)(() => {
742
- setPaginationPage(0);
743
- }, [filters, sortBy]);
744
- useDebouncedEffect(() => {
745
- localStorage.setItem(`${tableName}-filters`, JSON.stringify(filters));
746
- }, [filters, tableName], 500);
747
- useDebouncedEffect(() => {
748
- localStorage.setItem(`${tableName}-sort-by`, JSON.stringify(sortBy));
749
- }, [sortBy, tableName], 500);
750
- (0, import_react5.useEffect)(() => {
751
- localStorage.setItem(`${tableName}-counts`, paginationSize === 0 ? "all" : paginationSize.toString());
752
- }, [paginationSize, tableName]);
753
- (0, import_react5.useEffect)(() => {
754
- localStorage.setItem(`${tableName}-page`, paginationPage.toString());
755
- }, [paginationPage, tableName]);
756
- (0, import_react5.useImperativeHandle)(ref, () => ({
757
- getData: () => processedData,
758
- getCurrentData: () => displayData
759
- }), [processedData, displayData]);
760
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ndt-table-container", children: [
761
- (wordBtn || excelBtn) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
762
- ExportSection_default,
763
- {
764
- wordBtn,
765
- excelBtn,
766
- downloadSectionLeftSideContent,
767
- tableData: displayData,
768
- columns,
769
- tableName,
770
- exportCustomColumns,
771
- wordOptions
772
- }
773
- ),
774
- /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ndt-table", children: [
775
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
776
- TableHeader_default,
777
- {
778
- columns,
779
- sortBy,
780
- getSortField: setSortBy,
781
- filters,
782
- getFilters: setFilters,
783
- widths,
784
- headerGroup
785
- }
786
- ),
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)(
788
- TableBody_default,
789
- {
790
- tableData: displayData,
791
- columns,
792
- scrollable,
793
- scrollHeight,
794
- widths,
795
- groupBy,
796
- collapsedGroups,
797
- toggleGroup,
798
- isTitles
799
- }
800
- ),
801
- isFooter && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
802
- TableFooter_default,
803
- {
804
- paginationCounts,
805
- tableData: processedData,
806
- paginationSize,
807
- getPaginationSize: setPaginationSize,
808
- paginationPage,
809
- getPaginationPage: setPaginationPage
810
- }
811
- )
812
- ] })
813
- ] });
814
- });
815
- DataTable.displayName = "DataTable";
816
- var DataTable_default = DataTable;
817
- // Annotate the CommonJS export names for ESM import in node:
818
- 0 && (module.exports = {
819
- DataTable
820
- });
821
- //# sourceMappingURL=index.cjs.map