nillud-data-table 1.2.5 → 1.2.7
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/export-excel/index.d.ts +35 -0
- package/dist/export/export-excel/index.js +120 -0
- package/dist/export/export-word/index.d.ts +34 -0
- package/dist/export/export-word/index.js +96 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -2
- package/package.json +10 -6
- package/dist/export/index.d.ts +0 -61
- package/dist/export/index.js +0 -254
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactElement } from 'react';
|
|
3
|
+
|
|
4
|
+
type TableElement = {
|
|
5
|
+
[key: string]: string | number;
|
|
6
|
+
};
|
|
7
|
+
type TableData = Array<TableElement>;
|
|
8
|
+
type Column = {
|
|
9
|
+
field: string;
|
|
10
|
+
title: string;
|
|
11
|
+
width?: number;
|
|
12
|
+
autoinc?: boolean;
|
|
13
|
+
formatter?: (cell: string, row: TableElement) => ReactElement;
|
|
14
|
+
exportCustomCell?: (cell: string, row: TableElement) => string;
|
|
15
|
+
headerFilter?: (headerValue: string, rowValue: string) => string;
|
|
16
|
+
sortable?: boolean;
|
|
17
|
+
filterable?: boolean;
|
|
18
|
+
};
|
|
19
|
+
type CustomColumn = {
|
|
20
|
+
header: string;
|
|
21
|
+
key: string;
|
|
22
|
+
width?: number;
|
|
23
|
+
[key: string]: any;
|
|
24
|
+
};
|
|
25
|
+
type CustomColumns = Array<CustomColumn> | null;
|
|
26
|
+
type ExcelExportTypes = {
|
|
27
|
+
columns: Array<Column>;
|
|
28
|
+
excelData: TableData;
|
|
29
|
+
title: string;
|
|
30
|
+
exportCustomColumns?: CustomColumns;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
declare const ExportExcel: ({ columns, excelData, title, exportCustomColumns }: ExcelExportTypes) => react_jsx_runtime.JSX.Element;
|
|
34
|
+
|
|
35
|
+
export { type ExcelExportTypes, ExportExcel };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
// components/export/export-excel/exportUtils.ts
|
|
2
|
+
var generateExcelColumns = (columns, exportCustomColumns) => {
|
|
3
|
+
let excelColumns = columns.map((column) => ({
|
|
4
|
+
header: column.title,
|
|
5
|
+
key: column.field,
|
|
6
|
+
width: 20
|
|
7
|
+
}));
|
|
8
|
+
if (exportCustomColumns) {
|
|
9
|
+
exportCustomColumns.forEach((custom) => {
|
|
10
|
+
excelColumns = excelColumns.map(
|
|
11
|
+
(col) => col.key === custom.key ? { ...col, ...custom } : col
|
|
12
|
+
);
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
return excelColumns;
|
|
16
|
+
};
|
|
17
|
+
var applyHeaderStyles = (row, columnCount) => {
|
|
18
|
+
row.height = 40;
|
|
19
|
+
row.font = { size: 12, bold: true };
|
|
20
|
+
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
21
|
+
for (let i = 1; i <= columnCount; i++) {
|
|
22
|
+
const cell = row.getCell(i);
|
|
23
|
+
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
24
|
+
cell.border = {
|
|
25
|
+
top: { style: "thin" },
|
|
26
|
+
left: { style: "thin" },
|
|
27
|
+
bottom: { style: "thin" },
|
|
28
|
+
right: { style: "thin" }
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
var applyRowStyles = (row, columnCount) => {
|
|
33
|
+
row.height = 40;
|
|
34
|
+
row.font = { size: 12 };
|
|
35
|
+
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
36
|
+
for (let i = 1; i <= columnCount; i++) {
|
|
37
|
+
const cell = row.getCell(i);
|
|
38
|
+
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
39
|
+
cell.border = {
|
|
40
|
+
top: { style: "thin" },
|
|
41
|
+
left: { style: "thin" },
|
|
42
|
+
bottom: { style: "thin" },
|
|
43
|
+
right: { style: "thin" }
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
var generateExcelDataRows = (columns, data) => {
|
|
48
|
+
return data.map((element) => {
|
|
49
|
+
const rowData = {};
|
|
50
|
+
columns.forEach((col) => {
|
|
51
|
+
const value = element[col.field];
|
|
52
|
+
rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
|
|
53
|
+
});
|
|
54
|
+
return rowData;
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
var setColumnAutoWidths = (sheet) => {
|
|
58
|
+
var _a;
|
|
59
|
+
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
|
60
|
+
var _a2;
|
|
61
|
+
let maxLength = 10;
|
|
62
|
+
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
|
63
|
+
const cellValue = cell.value ? String(cell.value) : "";
|
|
64
|
+
maxLength = Math.max(maxLength, cellValue.length + 5);
|
|
65
|
+
});
|
|
66
|
+
column.width = maxLength;
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// components/export/export-excel/ExportExcel.tsx
|
|
71
|
+
import ExcelJS from "exceljs";
|
|
72
|
+
import { jsx } from "react/jsx-runtime";
|
|
73
|
+
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
|
74
|
+
const exportExcel = async () => {
|
|
75
|
+
const workbook = new ExcelJS.Workbook();
|
|
76
|
+
const sheet = workbook.addWorksheet(title, {
|
|
77
|
+
pageSetup: {
|
|
78
|
+
fitToPage: true,
|
|
79
|
+
fitToHeight: 2,
|
|
80
|
+
fitToWidth: 1,
|
|
81
|
+
orientation: "landscape"
|
|
82
|
+
},
|
|
83
|
+
headerFooter: {
|
|
84
|
+
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
|
85
|
+
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
|
89
|
+
sheet.columns = excelColumns;
|
|
90
|
+
const headerRow = sheet.getRow(1);
|
|
91
|
+
applyHeaderStyles(headerRow, sheet.columns.length);
|
|
92
|
+
const dataRows = generateExcelDataRows(columns, excelData);
|
|
93
|
+
dataRows.forEach((data) => {
|
|
94
|
+
const row = sheet.addRow(data);
|
|
95
|
+
applyRowStyles(row, sheet.columns.length);
|
|
96
|
+
});
|
|
97
|
+
setColumnAutoWidths(sheet);
|
|
98
|
+
if (excelData.length > 15) {
|
|
99
|
+
sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
|
|
100
|
+
} else {
|
|
101
|
+
sheet.pageSetup.fitToHeight = 1;
|
|
102
|
+
}
|
|
103
|
+
workbook.xlsx.writeBuffer().then((data) => {
|
|
104
|
+
const blob = new Blob([data], {
|
|
105
|
+
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
106
|
+
});
|
|
107
|
+
const url = window.URL.createObjectURL(blob);
|
|
108
|
+
const anchor = document.createElement("a");
|
|
109
|
+
anchor.href = url;
|
|
110
|
+
anchor.download = `${title}.xlsx`;
|
|
111
|
+
anchor.click();
|
|
112
|
+
window.URL.revokeObjectURL(url);
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
return /* @__PURE__ */ jsx("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
|
116
|
+
};
|
|
117
|
+
var ExportExcel_default = ExportExcel;
|
|
118
|
+
export {
|
|
119
|
+
ExportExcel_default as ExportExcel
|
|
120
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactElement } from 'react';
|
|
3
|
+
|
|
4
|
+
type TableElement = {
|
|
5
|
+
[key: string]: string | number;
|
|
6
|
+
};
|
|
7
|
+
type TableData = Array<TableElement>;
|
|
8
|
+
type Column = {
|
|
9
|
+
field: string;
|
|
10
|
+
title: string;
|
|
11
|
+
width?: number;
|
|
12
|
+
autoinc?: boolean;
|
|
13
|
+
formatter?: (cell: string, row: TableElement) => ReactElement;
|
|
14
|
+
exportCustomCell?: (cell: string, row: TableElement) => string;
|
|
15
|
+
headerFilter?: (headerValue: string, rowValue: string) => string;
|
|
16
|
+
sortable?: boolean;
|
|
17
|
+
filterable?: boolean;
|
|
18
|
+
};
|
|
19
|
+
type ExportOptions = {
|
|
20
|
+
fontSize?: number;
|
|
21
|
+
boldHeaders?: boolean;
|
|
22
|
+
autoLandscape?: boolean;
|
|
23
|
+
maxColumnsBeforeLandscape?: number;
|
|
24
|
+
};
|
|
25
|
+
type ExportWordTypes = {
|
|
26
|
+
wordData: TableData;
|
|
27
|
+
columns: Array<Column>;
|
|
28
|
+
title: string;
|
|
29
|
+
options?: ExportOptions;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
declare const WordExport: ({ wordData, columns, title, options }: ExportWordTypes) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
export { type ExportWordTypes, WordExport };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
// components/export/export-word/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/export-word/ExportWord.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
|
+
}) => {
|
|
41
|
+
const createNewWord = async () => {
|
|
42
|
+
const {
|
|
43
|
+
fontSize = 0,
|
|
44
|
+
boldHeaders = true,
|
|
45
|
+
autoLandscape = true,
|
|
46
|
+
maxColumnsBeforeLandscape = 5
|
|
47
|
+
} = options;
|
|
48
|
+
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
|
49
|
+
const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
|
|
50
|
+
children: [new Paragraph({
|
|
51
|
+
children: [new TextRun({
|
|
52
|
+
text: header,
|
|
53
|
+
size: fontSize,
|
|
54
|
+
bold: boldHeaders
|
|
55
|
+
})],
|
|
56
|
+
alignment: AlignmentType.CENTER
|
|
57
|
+
})],
|
|
58
|
+
verticalAlign: VerticalAlign.CENTER
|
|
59
|
+
}));
|
|
60
|
+
const tableHeaderRow = new TableRow({ children: headerCells });
|
|
61
|
+
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
|
62
|
+
const rowCells = cells.map(
|
|
63
|
+
(value) => new TableCell({
|
|
64
|
+
children: [new Paragraph({
|
|
65
|
+
children: [new TextRun({
|
|
66
|
+
text: value,
|
|
67
|
+
size: fontSize
|
|
68
|
+
})],
|
|
69
|
+
alignment: AlignmentType.CENTER
|
|
70
|
+
})],
|
|
71
|
+
verticalAlign: VerticalAlign.CENTER
|
|
72
|
+
})
|
|
73
|
+
);
|
|
74
|
+
return new TableRow({ children: rowCells });
|
|
75
|
+
});
|
|
76
|
+
const table = new Table({
|
|
77
|
+
rows: [tableHeaderRow, ...rows],
|
|
78
|
+
width: { size: 11e3, type: WidthType.DXA },
|
|
79
|
+
indent: { size: -1e3, type: WidthType.DXA }
|
|
80
|
+
});
|
|
81
|
+
const doc = new Document({
|
|
82
|
+
sections: [{
|
|
83
|
+
children: [table, new Paragraph({ text: "" })],
|
|
84
|
+
properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
|
|
85
|
+
}]
|
|
86
|
+
});
|
|
87
|
+
Packer.toBlob(doc).then((blob) => {
|
|
88
|
+
saveAs(blob, `${title}.docx`);
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
return /* @__PURE__ */ jsx("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
|
|
92
|
+
};
|
|
93
|
+
var ExportWord_default = WordExport;
|
|
94
|
+
export {
|
|
95
|
+
ExportWord_default as WordExport
|
|
96
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -9,8 +9,9 @@ type Column = {
|
|
|
9
9
|
title: string;
|
|
10
10
|
width?: number;
|
|
11
11
|
autoinc?: boolean;
|
|
12
|
-
formatter?: (cell: string, row
|
|
13
|
-
|
|
12
|
+
formatter?: (cell: string, row?: TableElement, column?: Column) => ReactElement;
|
|
13
|
+
headerFormatter?: (column: string) => ReactElement;
|
|
14
|
+
exportCustomCell?: (title: string, row: TableElement) => string;
|
|
14
15
|
headerFilter?: (headerValue: string, rowValue: string) => boolean;
|
|
15
16
|
sortable?: boolean;
|
|
16
17
|
filterable?: boolean;
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,7 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
|
37
37
|
};
|
|
38
38
|
return /* @__PURE__ */ jsxs("div", { className: "ndt-column", children: [
|
|
39
39
|
/* @__PURE__ */ jsxs("div", { className: "ndt-column-head", children: [
|
|
40
|
-
/* @__PURE__ */ jsx3("span", { children: column.title }),
|
|
40
|
+
column.headerFormatter ? column.headerFormatter(column.title) : /* @__PURE__ */ jsx3("span", { children: column.title }),
|
|
41
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, {}) : /* @__PURE__ */ jsx3(SortDown_default, {}) })
|
|
42
42
|
] }),
|
|
43
43
|
/* @__PURE__ */ jsx3("div", { className: "ndt-column-footer", children: typeof column.autoinc === "undefined" && (typeof column.filterable === "undefined" || column.filterable) && /* @__PURE__ */ jsx3(
|
|
@@ -88,7 +88,7 @@ var Cell = ({
|
|
|
88
88
|
}) => {
|
|
89
89
|
const rawValue = row[column.field];
|
|
90
90
|
const stringValue = typeof rawValue !== "undefined" && rawValue !== null ? String(rawValue) : "";
|
|
91
|
-
const content = column.formatter ? column.formatter(stringValue, row) : typeof column.autoinc !== "undefined" ? /* @__PURE__ */ jsx5("span", { children: rowId + 1 }) : /* @__PURE__ */ jsx5("span", { children: stringValue });
|
|
91
|
+
const content = column.formatter ? column.formatter(stringValue, row, column) : typeof column.autoinc !== "undefined" ? /* @__PURE__ */ jsx5("span", { children: rowId + 1 }) : /* @__PURE__ */ jsx5("span", { children: stringValue });
|
|
92
92
|
return /* @__PURE__ */ jsx5(
|
|
93
93
|
"div",
|
|
94
94
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nillud-data-table",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -14,12 +14,16 @@
|
|
|
14
14
|
"import": "./dist/index.js",
|
|
15
15
|
"types": "./dist/index.d.ts"
|
|
16
16
|
},
|
|
17
|
-
"./export": {
|
|
18
|
-
"import": "./dist/export/index.js",
|
|
19
|
-
"types": "./dist/export.index.d.ts"
|
|
20
|
-
},
|
|
21
17
|
"./types": "./dist/index.d.ts",
|
|
22
|
-
"./styles.css": "./dist/styles.css"
|
|
18
|
+
"./styles.css": "./dist/styles.css",
|
|
19
|
+
"./export-excel": {
|
|
20
|
+
"import": "./dist/export/export-excel/index.js",
|
|
21
|
+
"types": "./dist/export/export-excel/index.d.ts"
|
|
22
|
+
},
|
|
23
|
+
"./export-word": {
|
|
24
|
+
"import": "./dist/export/export-word/index.js",
|
|
25
|
+
"types": "./dist/export/export-word/index.d.ts"
|
|
26
|
+
}
|
|
23
27
|
},
|
|
24
28
|
"peerDependencies": {
|
|
25
29
|
"docx": "^8.1.2",
|
package/dist/export/index.d.ts
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactElement } from 'react';
|
|
3
|
-
|
|
4
|
-
type TableElement = {
|
|
5
|
-
[key: string]: string | number;
|
|
6
|
-
};
|
|
7
|
-
type TableData = Array<TableElement>;
|
|
8
|
-
type Column = {
|
|
9
|
-
field: string;
|
|
10
|
-
title: string;
|
|
11
|
-
width?: number;
|
|
12
|
-
autoinc?: boolean;
|
|
13
|
-
formatter?: (cell: string, row: TableElement) => ReactElement;
|
|
14
|
-
exportCustomCell?: (cell: string, row: TableElement) => string;
|
|
15
|
-
headerFilter?: (headerValue: string, rowValue: string) => string;
|
|
16
|
-
sortable?: boolean;
|
|
17
|
-
filterable?: boolean;
|
|
18
|
-
};
|
|
19
|
-
type ExportOptions = {
|
|
20
|
-
fontSize?: number;
|
|
21
|
-
boldHeaders?: boolean;
|
|
22
|
-
autoLandscape?: boolean;
|
|
23
|
-
maxColumnsBeforeLandscape?: number;
|
|
24
|
-
};
|
|
25
|
-
type CustomColumn = {
|
|
26
|
-
header: string;
|
|
27
|
-
key: string;
|
|
28
|
-
width?: number;
|
|
29
|
-
[key: string]: any;
|
|
30
|
-
};
|
|
31
|
-
type CustomColumns = Array<CustomColumn> | null;
|
|
32
|
-
type ExportSectionTypes = {
|
|
33
|
-
wordBtn: boolean;
|
|
34
|
-
excelBtn: boolean;
|
|
35
|
-
downloadSectionLeftSideContent: ReactElement | null;
|
|
36
|
-
tableData: TableData;
|
|
37
|
-
columns: Array<Column>;
|
|
38
|
-
tableName: string;
|
|
39
|
-
exportCustomColumns?: CustomColumns;
|
|
40
|
-
wordOptions?: ExportOptions;
|
|
41
|
-
};
|
|
42
|
-
type ExcelExportTypes = {
|
|
43
|
-
columns: Array<Column>;
|
|
44
|
-
excelData: TableData;
|
|
45
|
-
title: string;
|
|
46
|
-
exportCustomColumns?: ExportSectionTypes["exportCustomColumns"];
|
|
47
|
-
};
|
|
48
|
-
type ExportWordTypes = {
|
|
49
|
-
wordData: TableData;
|
|
50
|
-
columns: Array<Column>;
|
|
51
|
-
title: string;
|
|
52
|
-
options?: ExportOptions;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
declare const ExportExcel: ({ columns, excelData, title, exportCustomColumns }: ExcelExportTypes) => react_jsx_runtime.JSX.Element;
|
|
56
|
-
|
|
57
|
-
declare const WordExport: ({ wordData, columns, title, options }: ExportWordTypes) => react_jsx_runtime.JSX.Element;
|
|
58
|
-
|
|
59
|
-
declare const ExportSection: ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }: ExportSectionTypes) => react_jsx_runtime.JSX.Element;
|
|
60
|
-
|
|
61
|
-
export { type ExcelExportTypes, ExportExcel, ExportSection, type ExportSectionTypes, type ExportWordTypes, WordExport };
|
package/dist/export/index.js
DELETED
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
// components/export/exportUtils/exportUtils.ts
|
|
2
|
-
var generateExcelColumns = (columns, exportCustomColumns) => {
|
|
3
|
-
let excelColumns = columns.map((column) => ({
|
|
4
|
-
header: column.title,
|
|
5
|
-
key: column.field,
|
|
6
|
-
width: 20
|
|
7
|
-
}));
|
|
8
|
-
if (exportCustomColumns) {
|
|
9
|
-
exportCustomColumns.forEach((custom) => {
|
|
10
|
-
excelColumns = excelColumns.map(
|
|
11
|
-
(col) => col.key === custom.key ? { ...col, ...custom } : col
|
|
12
|
-
);
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
return excelColumns;
|
|
16
|
-
};
|
|
17
|
-
var applyHeaderStyles = (row, columnCount) => {
|
|
18
|
-
row.height = 40;
|
|
19
|
-
row.font = { size: 12, bold: true };
|
|
20
|
-
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
21
|
-
for (let i = 1; i <= columnCount; i++) {
|
|
22
|
-
const cell = row.getCell(i);
|
|
23
|
-
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
24
|
-
cell.border = {
|
|
25
|
-
top: { style: "thin" },
|
|
26
|
-
left: { style: "thin" },
|
|
27
|
-
bottom: { style: "thin" },
|
|
28
|
-
right: { style: "thin" }
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
var applyRowStyles = (row, columnCount) => {
|
|
33
|
-
row.height = 40;
|
|
34
|
-
row.font = { size: 12 };
|
|
35
|
-
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
36
|
-
for (let i = 1; i <= columnCount; i++) {
|
|
37
|
-
const cell = row.getCell(i);
|
|
38
|
-
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
39
|
-
cell.border = {
|
|
40
|
-
top: { style: "thin" },
|
|
41
|
-
left: { style: "thin" },
|
|
42
|
-
bottom: { style: "thin" },
|
|
43
|
-
right: { style: "thin" }
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
var generateExcelDataRows = (columns, data) => {
|
|
48
|
-
return data.map((element) => {
|
|
49
|
-
const rowData = {};
|
|
50
|
-
columns.forEach((col) => {
|
|
51
|
-
const value = element[col.field];
|
|
52
|
-
rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
|
|
53
|
-
});
|
|
54
|
-
return rowData;
|
|
55
|
-
});
|
|
56
|
-
};
|
|
57
|
-
var setColumnAutoWidths = (sheet) => {
|
|
58
|
-
var _a;
|
|
59
|
-
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
|
60
|
-
var _a2;
|
|
61
|
-
let maxLength = 10;
|
|
62
|
-
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
|
63
|
-
const cellValue = cell.value ? String(cell.value) : "";
|
|
64
|
-
maxLength = Math.max(maxLength, cellValue.length + 5);
|
|
65
|
-
});
|
|
66
|
-
column.width = maxLength;
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
// components/export/ExportExcel.tsx
|
|
71
|
-
import ExcelJS from "exceljs";
|
|
72
|
-
import { jsx } from "react/jsx-runtime";
|
|
73
|
-
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
|
74
|
-
const exportExcel = async () => {
|
|
75
|
-
const workbook = new ExcelJS.Workbook();
|
|
76
|
-
const sheet = workbook.addWorksheet(title, {
|
|
77
|
-
pageSetup: {
|
|
78
|
-
fitToPage: true,
|
|
79
|
-
fitToHeight: 2,
|
|
80
|
-
fitToWidth: 1,
|
|
81
|
-
orientation: "landscape"
|
|
82
|
-
},
|
|
83
|
-
headerFooter: {
|
|
84
|
-
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
|
85
|
-
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
|
89
|
-
sheet.columns = excelColumns;
|
|
90
|
-
const headerRow = sheet.getRow(1);
|
|
91
|
-
applyHeaderStyles(headerRow, sheet.columns.length);
|
|
92
|
-
const dataRows = generateExcelDataRows(columns, excelData);
|
|
93
|
-
dataRows.forEach((data) => {
|
|
94
|
-
const row = sheet.addRow(data);
|
|
95
|
-
applyRowStyles(row, sheet.columns.length);
|
|
96
|
-
});
|
|
97
|
-
setColumnAutoWidths(sheet);
|
|
98
|
-
if (excelData.length > 15) {
|
|
99
|
-
sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
|
|
100
|
-
} else {
|
|
101
|
-
sheet.pageSetup.fitToHeight = 1;
|
|
102
|
-
}
|
|
103
|
-
workbook.xlsx.writeBuffer().then((data) => {
|
|
104
|
-
const blob = new Blob([data], {
|
|
105
|
-
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
106
|
-
});
|
|
107
|
-
const url = window.URL.createObjectURL(blob);
|
|
108
|
-
const anchor = document.createElement("a");
|
|
109
|
-
anchor.href = url;
|
|
110
|
-
anchor.download = `${title}.xlsx`;
|
|
111
|
-
anchor.click();
|
|
112
|
-
window.URL.revokeObjectURL(url);
|
|
113
|
-
});
|
|
114
|
-
};
|
|
115
|
-
return /* @__PURE__ */ jsx("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
|
116
|
-
};
|
|
117
|
-
var ExportExcel_default = ExportExcel;
|
|
118
|
-
|
|
119
|
-
// components/export/exportUtils/ExportHelpers.ts
|
|
120
|
-
function prepareExportRows(columns, data) {
|
|
121
|
-
return data.map(
|
|
122
|
-
(row) => columns.map((col) => {
|
|
123
|
-
const value = row[col.field];
|
|
124
|
-
return typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), row) : String(value != null ? value : "");
|
|
125
|
-
})
|
|
126
|
-
);
|
|
127
|
-
}
|
|
128
|
-
function prepareExportHeaders(columns) {
|
|
129
|
-
return columns.map((col) => col.title);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
// components/export/ExportWord.tsx
|
|
133
|
-
import {
|
|
134
|
-
AlignmentType,
|
|
135
|
-
Document,
|
|
136
|
-
Packer,
|
|
137
|
-
PageOrientation,
|
|
138
|
-
Paragraph,
|
|
139
|
-
Table,
|
|
140
|
-
TableCell,
|
|
141
|
-
TableRow,
|
|
142
|
-
TextRun,
|
|
143
|
-
VerticalAlign,
|
|
144
|
-
WidthType
|
|
145
|
-
} from "docx";
|
|
146
|
-
import { saveAs } from "file-saver";
|
|
147
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
148
|
-
var WordExport = ({
|
|
149
|
-
wordData,
|
|
150
|
-
columns,
|
|
151
|
-
title,
|
|
152
|
-
options = {
|
|
153
|
-
fontSize: 20,
|
|
154
|
-
boldHeaders: false,
|
|
155
|
-
autoLandscape: false,
|
|
156
|
-
maxColumnsBeforeLandscape: 5
|
|
157
|
-
}
|
|
158
|
-
}) => {
|
|
159
|
-
const createNewWord = async () => {
|
|
160
|
-
const {
|
|
161
|
-
fontSize = 0,
|
|
162
|
-
boldHeaders = true,
|
|
163
|
-
autoLandscape = true,
|
|
164
|
-
maxColumnsBeforeLandscape = 5
|
|
165
|
-
} = options;
|
|
166
|
-
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
|
167
|
-
const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
|
|
168
|
-
children: [new Paragraph({
|
|
169
|
-
children: [new TextRun({
|
|
170
|
-
text: header,
|
|
171
|
-
size: fontSize,
|
|
172
|
-
bold: boldHeaders
|
|
173
|
-
})],
|
|
174
|
-
alignment: AlignmentType.CENTER
|
|
175
|
-
})],
|
|
176
|
-
verticalAlign: VerticalAlign.CENTER
|
|
177
|
-
}));
|
|
178
|
-
const tableHeaderRow = new TableRow({ children: headerCells });
|
|
179
|
-
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
|
180
|
-
const rowCells = cells.map(
|
|
181
|
-
(value) => new TableCell({
|
|
182
|
-
children: [new Paragraph({
|
|
183
|
-
children: [new TextRun({
|
|
184
|
-
text: value,
|
|
185
|
-
size: fontSize
|
|
186
|
-
})],
|
|
187
|
-
alignment: AlignmentType.CENTER
|
|
188
|
-
})],
|
|
189
|
-
verticalAlign: VerticalAlign.CENTER
|
|
190
|
-
})
|
|
191
|
-
);
|
|
192
|
-
return new TableRow({ children: rowCells });
|
|
193
|
-
});
|
|
194
|
-
const table = new Table({
|
|
195
|
-
rows: [tableHeaderRow, ...rows],
|
|
196
|
-
width: { size: 11e3, type: WidthType.DXA },
|
|
197
|
-
indent: { size: -1e3, type: WidthType.DXA }
|
|
198
|
-
});
|
|
199
|
-
const doc = new Document({
|
|
200
|
-
sections: [{
|
|
201
|
-
children: [table, new Paragraph({ text: "" })],
|
|
202
|
-
properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
|
|
203
|
-
}]
|
|
204
|
-
});
|
|
205
|
-
Packer.toBlob(doc).then((blob) => {
|
|
206
|
-
saveAs(blob, `${title}.docx`);
|
|
207
|
-
});
|
|
208
|
-
};
|
|
209
|
-
return /* @__PURE__ */ jsx2("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
|
|
210
|
-
};
|
|
211
|
-
var ExportWord_default = WordExport;
|
|
212
|
-
|
|
213
|
-
// components/export/ExportSection.tsx
|
|
214
|
-
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
215
|
-
var ExportSection = ({
|
|
216
|
-
wordBtn,
|
|
217
|
-
excelBtn,
|
|
218
|
-
downloadSectionLeftSideContent,
|
|
219
|
-
tableData,
|
|
220
|
-
columns,
|
|
221
|
-
tableName,
|
|
222
|
-
exportCustomColumns,
|
|
223
|
-
wordOptions
|
|
224
|
-
}) => {
|
|
225
|
-
return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "ndt-download-section", children: [
|
|
226
|
-
/* @__PURE__ */ jsx3("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
|
|
227
|
-
/* @__PURE__ */ jsxs("div", { className: "ndt-download-buttons", children: [
|
|
228
|
-
wordBtn && /* @__PURE__ */ jsx3(
|
|
229
|
-
ExportWord_default,
|
|
230
|
-
{
|
|
231
|
-
wordData: tableData,
|
|
232
|
-
columns,
|
|
233
|
-
title: tableName,
|
|
234
|
-
options: wordOptions
|
|
235
|
-
}
|
|
236
|
-
),
|
|
237
|
-
excelBtn && /* @__PURE__ */ jsx3(
|
|
238
|
-
ExportExcel_default,
|
|
239
|
-
{
|
|
240
|
-
excelData: tableData,
|
|
241
|
-
columns,
|
|
242
|
-
title: tableName,
|
|
243
|
-
exportCustomColumns
|
|
244
|
-
}
|
|
245
|
-
)
|
|
246
|
-
] })
|
|
247
|
-
] }) });
|
|
248
|
-
};
|
|
249
|
-
var ExportSection_default = ExportSection;
|
|
250
|
-
export {
|
|
251
|
-
ExportExcel_default as ExportExcel,
|
|
252
|
-
ExportSection_default as ExportSection,
|
|
253
|
-
ExportWord_default as WordExport
|
|
254
|
-
};
|