nillud-data-table 1.0.6 → 1.0.8
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/export/index.js +254 -0
- package/dist/index.d.ts +13 -12
- package/dist/index.js +10 -54
- package/package.json +7 -4
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
// utils/exportUtils/ExportHelpers.ts
|
|
2
|
+
function prepareExportRows(columns, data) {
|
|
3
|
+
return data.map(
|
|
4
|
+
(row) => columns.map((col) => {
|
|
5
|
+
const value = row[col.field];
|
|
6
|
+
return typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), row) : String(value != null ? value : "");
|
|
7
|
+
})
|
|
8
|
+
);
|
|
9
|
+
}
|
|
10
|
+
function prepareExportHeaders(columns) {
|
|
11
|
+
return columns.map((col) => col.title);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// components/export/WordExport.tsx
|
|
15
|
+
import {
|
|
16
|
+
AlignmentType,
|
|
17
|
+
Document,
|
|
18
|
+
Packer,
|
|
19
|
+
PageOrientation,
|
|
20
|
+
Paragraph,
|
|
21
|
+
Table,
|
|
22
|
+
TableCell,
|
|
23
|
+
TableRow,
|
|
24
|
+
TextRun,
|
|
25
|
+
VerticalAlign,
|
|
26
|
+
WidthType
|
|
27
|
+
} from "docx";
|
|
28
|
+
import { saveAs } from "file-saver";
|
|
29
|
+
import { jsx } from "react/jsx-runtime";
|
|
30
|
+
var WordExport = ({
|
|
31
|
+
wordData,
|
|
32
|
+
columns,
|
|
33
|
+
title,
|
|
34
|
+
options = {
|
|
35
|
+
fontSize: 20,
|
|
36
|
+
boldHeaders: false,
|
|
37
|
+
autoLandscape: false,
|
|
38
|
+
maxColumnsBeforeLandscape: 5
|
|
39
|
+
}
|
|
40
|
+
// exportCustomColumns
|
|
41
|
+
}) => {
|
|
42
|
+
const createNewWord = async () => {
|
|
43
|
+
const {
|
|
44
|
+
fontSize = 0,
|
|
45
|
+
boldHeaders = true,
|
|
46
|
+
autoLandscape = true,
|
|
47
|
+
maxColumnsBeforeLandscape = 5
|
|
48
|
+
} = options;
|
|
49
|
+
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
|
50
|
+
const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
|
|
51
|
+
children: [new Paragraph({
|
|
52
|
+
children: [new TextRun({
|
|
53
|
+
text: header,
|
|
54
|
+
size: fontSize,
|
|
55
|
+
bold: boldHeaders
|
|
56
|
+
})],
|
|
57
|
+
alignment: AlignmentType.CENTER
|
|
58
|
+
})],
|
|
59
|
+
verticalAlign: VerticalAlign.CENTER
|
|
60
|
+
}));
|
|
61
|
+
const tableHeaderRow = new TableRow({ children: headerCells });
|
|
62
|
+
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
|
63
|
+
const rowCells = cells.map(
|
|
64
|
+
(value) => new TableCell({
|
|
65
|
+
children: [new Paragraph({
|
|
66
|
+
children: [new TextRun({
|
|
67
|
+
text: value,
|
|
68
|
+
size: fontSize
|
|
69
|
+
})],
|
|
70
|
+
alignment: AlignmentType.CENTER
|
|
71
|
+
})],
|
|
72
|
+
verticalAlign: VerticalAlign.CENTER
|
|
73
|
+
})
|
|
74
|
+
);
|
|
75
|
+
return new TableRow({ children: rowCells });
|
|
76
|
+
});
|
|
77
|
+
const table = new Table({
|
|
78
|
+
rows: [tableHeaderRow, ...rows],
|
|
79
|
+
width: { size: 11e3, type: WidthType.DXA },
|
|
80
|
+
indent: { size: -1e3, type: WidthType.DXA }
|
|
81
|
+
});
|
|
82
|
+
const doc = new Document({
|
|
83
|
+
sections: [{
|
|
84
|
+
children: [table, new Paragraph({ text: "" })],
|
|
85
|
+
properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
|
|
86
|
+
}]
|
|
87
|
+
});
|
|
88
|
+
Packer.toBlob(doc).then((blob) => {
|
|
89
|
+
saveAs(blob, `${title}.docx`);
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
return /* @__PURE__ */ jsx("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
|
|
93
|
+
};
|
|
94
|
+
var WordExport_default = WordExport;
|
|
95
|
+
|
|
96
|
+
// utils/exportUtils/exportUtils.ts
|
|
97
|
+
var generateExcelColumns = (columns, exportCustomColumns) => {
|
|
98
|
+
let excelColumns = columns.map((column) => ({
|
|
99
|
+
header: column.title,
|
|
100
|
+
key: column.field,
|
|
101
|
+
width: 20
|
|
102
|
+
}));
|
|
103
|
+
if (exportCustomColumns) {
|
|
104
|
+
exportCustomColumns.forEach((custom) => {
|
|
105
|
+
excelColumns = excelColumns.map(
|
|
106
|
+
(col) => col.key === custom.key ? { ...col, ...custom } : col
|
|
107
|
+
);
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
return excelColumns;
|
|
111
|
+
};
|
|
112
|
+
var applyHeaderStyles = (row, columnCount) => {
|
|
113
|
+
row.height = 40;
|
|
114
|
+
row.font = { size: 12, bold: true };
|
|
115
|
+
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
116
|
+
for (let i = 1; i <= columnCount; i++) {
|
|
117
|
+
const cell = row.getCell(i);
|
|
118
|
+
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
119
|
+
cell.border = {
|
|
120
|
+
top: { style: "thin" },
|
|
121
|
+
left: { style: "thin" },
|
|
122
|
+
bottom: { style: "thin" },
|
|
123
|
+
right: { style: "thin" }
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
var applyRowStyles = (row, columnCount) => {
|
|
128
|
+
row.height = 40;
|
|
129
|
+
row.font = { size: 12 };
|
|
130
|
+
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
131
|
+
for (let i = 1; i <= columnCount; i++) {
|
|
132
|
+
const cell = row.getCell(i);
|
|
133
|
+
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
134
|
+
cell.border = {
|
|
135
|
+
top: { style: "thin" },
|
|
136
|
+
left: { style: "thin" },
|
|
137
|
+
bottom: { style: "thin" },
|
|
138
|
+
right: { style: "thin" }
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
var generateExcelDataRows = (columns, data) => {
|
|
143
|
+
return data.map((element) => {
|
|
144
|
+
const rowData = {};
|
|
145
|
+
columns.forEach((col) => {
|
|
146
|
+
const value = element[col.field];
|
|
147
|
+
rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
|
|
148
|
+
});
|
|
149
|
+
return rowData;
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
var setColumnAutoWidths = (sheet) => {
|
|
153
|
+
var _a;
|
|
154
|
+
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
|
155
|
+
var _a2;
|
|
156
|
+
let maxLength = 10;
|
|
157
|
+
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
|
158
|
+
const cellValue = cell.value ? String(cell.value) : "";
|
|
159
|
+
maxLength = Math.max(maxLength, cellValue.length + 5);
|
|
160
|
+
});
|
|
161
|
+
column.width = maxLength;
|
|
162
|
+
});
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
// components/export/ExportExcel.tsx
|
|
166
|
+
import ExcelJS from "exceljs";
|
|
167
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
168
|
+
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
|
169
|
+
const exportExcel = async () => {
|
|
170
|
+
const workbook = new ExcelJS.Workbook();
|
|
171
|
+
const sheet = workbook.addWorksheet(title, {
|
|
172
|
+
pageSetup: {
|
|
173
|
+
fitToPage: true,
|
|
174
|
+
fitToHeight: 2,
|
|
175
|
+
fitToWidth: 1,
|
|
176
|
+
orientation: "landscape"
|
|
177
|
+
},
|
|
178
|
+
headerFooter: {
|
|
179
|
+
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
|
180
|
+
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
|
184
|
+
sheet.columns = excelColumns;
|
|
185
|
+
const headerRow = sheet.getRow(1);
|
|
186
|
+
applyHeaderStyles(headerRow, sheet.columns.length);
|
|
187
|
+
const dataRows = generateExcelDataRows(columns, excelData);
|
|
188
|
+
dataRows.forEach((data) => {
|
|
189
|
+
const row = sheet.addRow(data);
|
|
190
|
+
applyRowStyles(row, sheet.columns.length);
|
|
191
|
+
});
|
|
192
|
+
setColumnAutoWidths(sheet);
|
|
193
|
+
if (excelData.length > 15) {
|
|
194
|
+
sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
|
|
195
|
+
} else {
|
|
196
|
+
sheet.pageSetup.fitToHeight = 1;
|
|
197
|
+
}
|
|
198
|
+
workbook.xlsx.writeBuffer().then((data) => {
|
|
199
|
+
const blob = new Blob([data], {
|
|
200
|
+
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
201
|
+
});
|
|
202
|
+
const url = window.URL.createObjectURL(blob);
|
|
203
|
+
const anchor = document.createElement("a");
|
|
204
|
+
anchor.href = url;
|
|
205
|
+
anchor.download = `${title}.xlsx`;
|
|
206
|
+
anchor.click();
|
|
207
|
+
window.URL.revokeObjectURL(url);
|
|
208
|
+
});
|
|
209
|
+
};
|
|
210
|
+
return /* @__PURE__ */ jsx2("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
|
211
|
+
};
|
|
212
|
+
var ExportExcel_default = ExportExcel;
|
|
213
|
+
|
|
214
|
+
// components/ExportSection.tsx
|
|
215
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
216
|
+
var ExportSection = ({
|
|
217
|
+
wordBtn,
|
|
218
|
+
excelBtn,
|
|
219
|
+
downloadSectionLeftSideContent,
|
|
220
|
+
tableData,
|
|
221
|
+
columns,
|
|
222
|
+
tableName,
|
|
223
|
+
exportCustomColumns,
|
|
224
|
+
wordOptions
|
|
225
|
+
}) => {
|
|
226
|
+
return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "ndt-download-section", children: [
|
|
227
|
+
/* @__PURE__ */ jsx3("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
|
|
228
|
+
/* @__PURE__ */ jsxs("div", { className: "ndt-download-buttons", children: [
|
|
229
|
+
wordBtn && /* @__PURE__ */ jsx3(
|
|
230
|
+
WordExport_default,
|
|
231
|
+
{
|
|
232
|
+
wordData: tableData,
|
|
233
|
+
columns,
|
|
234
|
+
title: tableName,
|
|
235
|
+
exportCustomColumns,
|
|
236
|
+
options: wordOptions
|
|
237
|
+
}
|
|
238
|
+
),
|
|
239
|
+
excelBtn && /* @__PURE__ */ jsx3(
|
|
240
|
+
ExportExcel_default,
|
|
241
|
+
{
|
|
242
|
+
excelData: tableData,
|
|
243
|
+
columns,
|
|
244
|
+
title: tableName,
|
|
245
|
+
exportCustomColumns
|
|
246
|
+
}
|
|
247
|
+
)
|
|
248
|
+
] })
|
|
249
|
+
] }) });
|
|
250
|
+
};
|
|
251
|
+
var ExportSection_default = ExportSection;
|
|
252
|
+
export {
|
|
253
|
+
ExportSection_default as ExportSection
|
|
254
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -46,18 +46,19 @@ type TableProps = {
|
|
|
46
46
|
groupBy?: string | null;
|
|
47
47
|
isTitles?: boolean;
|
|
48
48
|
wordOptions?: ExportOptions;
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
ExportSectionComponent?: React.ComponentType<{
|
|
50
|
+
wordBtn: boolean;
|
|
51
|
+
excelBtn: boolean;
|
|
52
|
+
downloadSectionLeftSideContent: React.ReactNode;
|
|
53
|
+
tableData: TableData;
|
|
51
54
|
columns: Array<Column>;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
title: string;
|
|
60
|
-
exportCustomColumns?: TableProps["exportCustomColumns"];
|
|
55
|
+
tableName: string;
|
|
56
|
+
exportCustomColumns?: Array<{
|
|
57
|
+
header: string;
|
|
58
|
+
key: string;
|
|
59
|
+
width: number;
|
|
60
|
+
}> | null;
|
|
61
|
+
wordOptions?: any;
|
|
61
62
|
}>;
|
|
62
63
|
};
|
|
63
64
|
type DataTableRef = {
|
|
@@ -67,4 +68,4 @@ type DataTableRef = {
|
|
|
67
68
|
|
|
68
69
|
declare const DataTable: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<DataTableRef>>;
|
|
69
70
|
|
|
70
|
-
export { type Column, DataTable, type TableElement, type TableProps };
|
|
71
|
+
export { type Column, DataTable, type DataTableRef, type TableElement, type TableProps };
|
package/dist/index.js
CHANGED
|
@@ -393,49 +393,8 @@ function useDebouncedEffect(callback, deps, delay) {
|
|
|
393
393
|
}, [...deps, delay]);
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
// components/ExportSection.tsx
|
|
397
|
-
import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
398
|
-
var ExportSection = ({
|
|
399
|
-
wordBtn,
|
|
400
|
-
excelBtn,
|
|
401
|
-
downloadSectionLeftSideContent,
|
|
402
|
-
tableData,
|
|
403
|
-
columns,
|
|
404
|
-
tableName,
|
|
405
|
-
exportCustomColumns,
|
|
406
|
-
wordOptions,
|
|
407
|
-
WordExportComponent,
|
|
408
|
-
ExportExcelComponent
|
|
409
|
-
}) => {
|
|
410
|
-
return /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsxs5("div", { className: "ndt-download-section", children: [
|
|
411
|
-
/* @__PURE__ */ jsx13("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
|
|
412
|
-
/* @__PURE__ */ jsxs5("div", { className: "ndt-download-buttons", children: [
|
|
413
|
-
wordBtn && WordExportComponent && /* @__PURE__ */ jsx13(
|
|
414
|
-
WordExportComponent,
|
|
415
|
-
{
|
|
416
|
-
wordData: tableData,
|
|
417
|
-
columns,
|
|
418
|
-
title: tableName,
|
|
419
|
-
exportCustomColumns,
|
|
420
|
-
options: wordOptions
|
|
421
|
-
}
|
|
422
|
-
),
|
|
423
|
-
excelBtn && ExportExcelComponent && /* @__PURE__ */ jsx13(
|
|
424
|
-
ExportExcelComponent,
|
|
425
|
-
{
|
|
426
|
-
excelData: tableData,
|
|
427
|
-
columns,
|
|
428
|
-
title: tableName,
|
|
429
|
-
exportCustomColumns
|
|
430
|
-
}
|
|
431
|
-
)
|
|
432
|
-
] })
|
|
433
|
-
] }) });
|
|
434
|
-
};
|
|
435
|
-
var ExportSection_default = ExportSection;
|
|
436
|
-
|
|
437
396
|
// components/DataTable.tsx
|
|
438
|
-
import { jsx as
|
|
397
|
+
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
439
398
|
var DataTable = forwardRef(({
|
|
440
399
|
tableData,
|
|
441
400
|
columns,
|
|
@@ -454,8 +413,7 @@ var DataTable = forwardRef(({
|
|
|
454
413
|
groupBy = null,
|
|
455
414
|
isTitles = false,
|
|
456
415
|
wordOptions,
|
|
457
|
-
|
|
458
|
-
ExportExcelComponent
|
|
416
|
+
ExportSectionComponent
|
|
459
417
|
}, ref) => {
|
|
460
418
|
const [filters, setFilters] = useState({});
|
|
461
419
|
const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
|
|
@@ -531,9 +489,9 @@ var DataTable = forwardRef(({
|
|
|
531
489
|
getData: () => processedData,
|
|
532
490
|
getCurrentData: () => displayData
|
|
533
491
|
}), [processedData, displayData]);
|
|
534
|
-
return /* @__PURE__ */
|
|
535
|
-
|
|
536
|
-
|
|
492
|
+
return /* @__PURE__ */ jsxs5("div", { className: "ndt-table-container", children: [
|
|
493
|
+
ExportSectionComponent && /* @__PURE__ */ jsx13(
|
|
494
|
+
ExportSectionComponent,
|
|
537
495
|
{
|
|
538
496
|
wordBtn,
|
|
539
497
|
excelBtn,
|
|
@@ -542,13 +500,11 @@ var DataTable = forwardRef(({
|
|
|
542
500
|
columns,
|
|
543
501
|
tableName,
|
|
544
502
|
exportCustomColumns,
|
|
545
|
-
wordOptions
|
|
546
|
-
WordExportComponent,
|
|
547
|
-
ExportExcelComponent
|
|
503
|
+
wordOptions
|
|
548
504
|
}
|
|
549
505
|
),
|
|
550
|
-
/* @__PURE__ */
|
|
551
|
-
/* @__PURE__ */
|
|
506
|
+
/* @__PURE__ */ jsxs5("div", { className: "ndt-table", children: [
|
|
507
|
+
/* @__PURE__ */ jsx13(
|
|
552
508
|
TableHeader_default,
|
|
553
509
|
{
|
|
554
510
|
columns,
|
|
@@ -560,7 +516,7 @@ var DataTable = forwardRef(({
|
|
|
560
516
|
headerGroup
|
|
561
517
|
}
|
|
562
518
|
),
|
|
563
|
-
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(
|
|
564
520
|
TableBody_default,
|
|
565
521
|
{
|
|
566
522
|
tableData: displayData,
|
|
@@ -574,7 +530,7 @@ var DataTable = forwardRef(({
|
|
|
574
530
|
isTitles
|
|
575
531
|
}
|
|
576
532
|
),
|
|
577
|
-
isFooter && /* @__PURE__ */
|
|
533
|
+
isFooter && /* @__PURE__ */ jsx13(
|
|
578
534
|
TableFooter_default,
|
|
579
535
|
{
|
|
580
536
|
paginationCounts,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nillud-data-table",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -11,10 +11,13 @@
|
|
|
11
11
|
],
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
|
-
"import": "./dist/index.js"
|
|
14
|
+
"import": "./dist/index.js",
|
|
15
|
+
"types": "./dist/index.d.ts"
|
|
16
|
+
},
|
|
17
|
+
"./export": {
|
|
18
|
+
"import": "./dist/export/index.js",
|
|
19
|
+
"types": "./dist/index.d.ts"
|
|
15
20
|
},
|
|
16
|
-
"./export/ExportExcel": "./dist/components/export/ExportExcel.js",
|
|
17
|
-
"./export/WordExport": "./dist/components/export/WordExport.js",
|
|
18
21
|
"./types": "./dist/index.d.ts",
|
|
19
22
|
"./styles.css": "./dist/styles.css"
|
|
20
23
|
},
|