nillud-data-table 1.4.1 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-MLSI37NJ.js +97 -0
- package/dist/chunk-YP52DDKU.js +157 -0
- package/dist/export/export-excel/index.js +3 -153
- package/dist/export/export-word/index.js +2 -92
- package/dist/index.d.ts +4 -0
- package/dist/index.js +63 -59
- package/package.json +4 -1
|
@@ -0,0 +1,97 @@
|
|
|
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
|
+
|
|
95
|
+
export {
|
|
96
|
+
ExportWord_default
|
|
97
|
+
};
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
// components/export/export-excel/exportUtils.ts
|
|
2
|
+
var generateExcelColumns = (columns, exportCustomColumns) => {
|
|
3
|
+
let excelColumns = columns.filter((column) => column.title !== "").map((column) => ({
|
|
4
|
+
title: 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, height = 40, columns) => {
|
|
33
|
+
row.height = height;
|
|
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
|
+
const column = columns[i - 1];
|
|
39
|
+
cell.alignment = {
|
|
40
|
+
wrapText: true,
|
|
41
|
+
vertical: column.cellAlignment ? column.cellAlignment.vertical : "middle",
|
|
42
|
+
horizontal: column.cellAlignment ? column.cellAlignment.horizontal : "center"
|
|
43
|
+
};
|
|
44
|
+
cell.border = {
|
|
45
|
+
top: { style: "thin" },
|
|
46
|
+
left: { style: "thin" },
|
|
47
|
+
bottom: { style: "thin" },
|
|
48
|
+
right: { style: "thin" }
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
var generateExcelDataRows = (columns, data, exportCustomColumns) => {
|
|
53
|
+
return data.map((element, rowIndex) => {
|
|
54
|
+
return columns.map((col, colIndex) => {
|
|
55
|
+
const isAutoinc = col.autoinc;
|
|
56
|
+
if (isAutoinc) return rowIndex + 1;
|
|
57
|
+
const value = element[col.field];
|
|
58
|
+
const customCol = exportCustomColumns == null ? void 0 : exportCustomColumns.find((custom) => custom.key === col.field);
|
|
59
|
+
if (customCol == null ? void 0 : customCol.exportCustomCell) {
|
|
60
|
+
return customCol.exportCustomCell(String(value != null ? value : ""), element);
|
|
61
|
+
}
|
|
62
|
+
if (typeof col.exportCustomCell !== "undefined") {
|
|
63
|
+
return col.exportCustomCell(String(value != null ? value : ""), element);
|
|
64
|
+
}
|
|
65
|
+
return value != null ? value : "";
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
var setColumnAutoWidths = (sheet) => {
|
|
70
|
+
var _a;
|
|
71
|
+
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
|
72
|
+
var _a2;
|
|
73
|
+
let maxLength = 10;
|
|
74
|
+
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
|
75
|
+
const cellValue = cell.value ? String(cell.value) : "";
|
|
76
|
+
maxLength = Math.max(maxLength, cellValue.length + 5);
|
|
77
|
+
});
|
|
78
|
+
column.width = maxLength;
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// components/export/export-excel/ExportExcel.tsx
|
|
83
|
+
import ExcelJS from "exceljs";
|
|
84
|
+
import { jsx } from "react/jsx-runtime";
|
|
85
|
+
var ExportExcel = ({ columns, excelData, tableRef, titleFile, title, text, exportCustomColumns, customHeight }) => {
|
|
86
|
+
const exportExcel = async () => {
|
|
87
|
+
const tableData = excelData || tableRef.current.getData();
|
|
88
|
+
const workbook = new ExcelJS.Workbook();
|
|
89
|
+
const sheet = workbook.addWorksheet(titleFile, {
|
|
90
|
+
pageSetup: {
|
|
91
|
+
fitToPage: true,
|
|
92
|
+
fitToHeight: 2,
|
|
93
|
+
fitToWidth: 1,
|
|
94
|
+
orientation: "landscape"
|
|
95
|
+
},
|
|
96
|
+
headerFooter: {
|
|
97
|
+
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
|
98
|
+
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
sheet.properties.defaultRowHeight = 20;
|
|
102
|
+
let tableHeaderRow = 1;
|
|
103
|
+
if (title) {
|
|
104
|
+
sheet.getCell("A1").value = title;
|
|
105
|
+
sheet.getRow(1).height = 25;
|
|
106
|
+
sheet.getRow(1).alignment = { vertical: "middle" };
|
|
107
|
+
sheet.getCell("A1").font = {
|
|
108
|
+
size: 18,
|
|
109
|
+
bold: true
|
|
110
|
+
};
|
|
111
|
+
tableHeaderRow++;
|
|
112
|
+
}
|
|
113
|
+
if (text) {
|
|
114
|
+
sheet.getCell("A2").value = text;
|
|
115
|
+
sheet.getRow(2).height = 15;
|
|
116
|
+
sheet.getRow(2).alignment = { vertical: "middle" };
|
|
117
|
+
sheet.getCell("A2").font = {
|
|
118
|
+
size: 12
|
|
119
|
+
};
|
|
120
|
+
tableHeaderRow++;
|
|
121
|
+
}
|
|
122
|
+
if (title || text) tableHeaderRow++;
|
|
123
|
+
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
|
124
|
+
sheet.columns = excelColumns;
|
|
125
|
+
const headerRow = sheet.getRow(tableHeaderRow);
|
|
126
|
+
headerRow.values = excelColumns.map((col) => col.title);
|
|
127
|
+
applyHeaderStyles(headerRow, sheet.columns.length);
|
|
128
|
+
const dataRows = generateExcelDataRows(columns, tableData);
|
|
129
|
+
dataRows.forEach((data) => {
|
|
130
|
+
const row = sheet.addRow(data);
|
|
131
|
+
applyRowStyles(row, sheet.columns.length, customHeight, columns);
|
|
132
|
+
});
|
|
133
|
+
setColumnAutoWidths(sheet);
|
|
134
|
+
if (tableData.length > 15) {
|
|
135
|
+
sheet.pageSetup.fitToHeight = Math.floor(tableData.length / 15);
|
|
136
|
+
} else {
|
|
137
|
+
sheet.pageSetup.fitToHeight = 1;
|
|
138
|
+
}
|
|
139
|
+
workbook.xlsx.writeBuffer().then((data) => {
|
|
140
|
+
const blob = new Blob([data], {
|
|
141
|
+
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
142
|
+
});
|
|
143
|
+
const url = window.URL.createObjectURL(blob);
|
|
144
|
+
const anchor = document.createElement("a");
|
|
145
|
+
anchor.href = url;
|
|
146
|
+
anchor.download = `${titleFile}.xlsx`;
|
|
147
|
+
anchor.click();
|
|
148
|
+
window.URL.revokeObjectURL(url);
|
|
149
|
+
});
|
|
150
|
+
};
|
|
151
|
+
return /* @__PURE__ */ jsx("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
|
152
|
+
};
|
|
153
|
+
var ExportExcel_default = ExportExcel;
|
|
154
|
+
|
|
155
|
+
export {
|
|
156
|
+
ExportExcel_default
|
|
157
|
+
};
|
|
@@ -1,156 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
title: 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, height = 40, columns) => {
|
|
33
|
-
row.height = height;
|
|
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
|
-
const column = columns[i - 1];
|
|
39
|
-
cell.alignment = {
|
|
40
|
-
wrapText: true,
|
|
41
|
-
vertical: column.cellAlignment ? column.cellAlignment.vertical : "middle",
|
|
42
|
-
horizontal: column.cellAlignment ? column.cellAlignment.horizontal : "center"
|
|
43
|
-
};
|
|
44
|
-
cell.border = {
|
|
45
|
-
top: { style: "thin" },
|
|
46
|
-
left: { style: "thin" },
|
|
47
|
-
bottom: { style: "thin" },
|
|
48
|
-
right: { style: "thin" }
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
var generateExcelDataRows = (columns, data, exportCustomColumns) => {
|
|
53
|
-
return data.map((element, rowIndex) => {
|
|
54
|
-
return columns.map((col, colIndex) => {
|
|
55
|
-
const isAutoinc = col.autoinc;
|
|
56
|
-
if (isAutoinc) return rowIndex + 1;
|
|
57
|
-
const value = element[col.field];
|
|
58
|
-
const customCol = exportCustomColumns == null ? void 0 : exportCustomColumns.find((custom) => custom.key === col.field);
|
|
59
|
-
if (customCol == null ? void 0 : customCol.exportCustomCell) {
|
|
60
|
-
return customCol.exportCustomCell(String(value != null ? value : ""), element);
|
|
61
|
-
}
|
|
62
|
-
if (typeof col.exportCustomCell !== "undefined") {
|
|
63
|
-
return col.exportCustomCell(String(value != null ? value : ""), element);
|
|
64
|
-
}
|
|
65
|
-
return value != null ? value : "";
|
|
66
|
-
});
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
var setColumnAutoWidths = (sheet) => {
|
|
70
|
-
var _a;
|
|
71
|
-
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
|
72
|
-
var _a2;
|
|
73
|
-
let maxLength = 10;
|
|
74
|
-
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
|
75
|
-
const cellValue = cell.value ? String(cell.value) : "";
|
|
76
|
-
maxLength = Math.max(maxLength, cellValue.length + 5);
|
|
77
|
-
});
|
|
78
|
-
column.width = maxLength;
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
// components/export/export-excel/ExportExcel.tsx
|
|
83
|
-
import ExcelJS from "exceljs";
|
|
84
|
-
import { jsx } from "react/jsx-runtime";
|
|
85
|
-
var ExportExcel = ({ columns, excelData, tableRef, titleFile, title, text, exportCustomColumns, customHeight }) => {
|
|
86
|
-
const exportExcel = async () => {
|
|
87
|
-
const tableData = excelData || tableRef.current.getData();
|
|
88
|
-
const workbook = new ExcelJS.Workbook();
|
|
89
|
-
const sheet = workbook.addWorksheet(titleFile, {
|
|
90
|
-
pageSetup: {
|
|
91
|
-
fitToPage: true,
|
|
92
|
-
fitToHeight: 2,
|
|
93
|
-
fitToWidth: 1,
|
|
94
|
-
orientation: "landscape"
|
|
95
|
-
},
|
|
96
|
-
headerFooter: {
|
|
97
|
-
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
|
98
|
-
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
sheet.properties.defaultRowHeight = 20;
|
|
102
|
-
let tableHeaderRow = 1;
|
|
103
|
-
if (title) {
|
|
104
|
-
sheet.getCell("A1").value = title;
|
|
105
|
-
sheet.getRow(1).height = 25;
|
|
106
|
-
sheet.getRow(1).alignment = { vertical: "middle" };
|
|
107
|
-
sheet.getCell("A1").font = {
|
|
108
|
-
size: 18,
|
|
109
|
-
bold: true
|
|
110
|
-
};
|
|
111
|
-
tableHeaderRow++;
|
|
112
|
-
}
|
|
113
|
-
if (text) {
|
|
114
|
-
sheet.getCell("A2").value = text;
|
|
115
|
-
sheet.getRow(2).height = 15;
|
|
116
|
-
sheet.getRow(2).alignment = { vertical: "middle" };
|
|
117
|
-
sheet.getCell("A2").font = {
|
|
118
|
-
size: 12
|
|
119
|
-
};
|
|
120
|
-
tableHeaderRow++;
|
|
121
|
-
}
|
|
122
|
-
if (title || text) tableHeaderRow++;
|
|
123
|
-
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
|
124
|
-
sheet.columns = excelColumns;
|
|
125
|
-
const headerRow = sheet.getRow(tableHeaderRow);
|
|
126
|
-
headerRow.values = excelColumns.map((col) => col.title);
|
|
127
|
-
applyHeaderStyles(headerRow, sheet.columns.length);
|
|
128
|
-
const dataRows = generateExcelDataRows(columns, tableData);
|
|
129
|
-
dataRows.forEach((data) => {
|
|
130
|
-
const row = sheet.addRow(data);
|
|
131
|
-
applyRowStyles(row, sheet.columns.length, customHeight, columns);
|
|
132
|
-
});
|
|
133
|
-
setColumnAutoWidths(sheet);
|
|
134
|
-
if (tableData.length > 15) {
|
|
135
|
-
sheet.pageSetup.fitToHeight = Math.floor(tableData.length / 15);
|
|
136
|
-
} else {
|
|
137
|
-
sheet.pageSetup.fitToHeight = 1;
|
|
138
|
-
}
|
|
139
|
-
workbook.xlsx.writeBuffer().then((data) => {
|
|
140
|
-
const blob = new Blob([data], {
|
|
141
|
-
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
142
|
-
});
|
|
143
|
-
const url = window.URL.createObjectURL(blob);
|
|
144
|
-
const anchor = document.createElement("a");
|
|
145
|
-
anchor.href = url;
|
|
146
|
-
anchor.download = `${titleFile}.xlsx`;
|
|
147
|
-
anchor.click();
|
|
148
|
-
window.URL.revokeObjectURL(url);
|
|
149
|
-
});
|
|
150
|
-
};
|
|
151
|
-
return /* @__PURE__ */ jsx("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
|
152
|
-
};
|
|
153
|
-
var ExportExcel_default = ExportExcel;
|
|
1
|
+
import {
|
|
2
|
+
ExportExcel_default
|
|
3
|
+
} from "../../chunk-YP52DDKU.js";
|
|
154
4
|
export {
|
|
155
5
|
ExportExcel_default as ExportExcel
|
|
156
6
|
};
|
|
@@ -1,96 +1,6 @@
|
|
|
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
1
|
import {
|
|
16
|
-
|
|
17
|
-
|
|
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;
|
|
2
|
+
ExportWord_default
|
|
3
|
+
} from "../../chunk-MLSI37NJ.js";
|
|
94
4
|
export {
|
|
95
5
|
ExportWord_default as WordExport
|
|
96
6
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import React, { ReactElement } from 'react';
|
|
2
|
+
export { WordExport } from './export/export-word/index.js';
|
|
3
|
+
export { ExportExcel } from './export/export-excel/index.js';
|
|
4
|
+
import 'react/jsx-runtime';
|
|
5
|
+
import 'exceljs';
|
|
2
6
|
|
|
3
7
|
type TableElement = {
|
|
4
8
|
[key: string]: string | number;
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import {
|
|
2
|
+
ExportExcel_default
|
|
3
|
+
} from "./chunk-YP52DDKU.js";
|
|
4
|
+
import {
|
|
5
|
+
ExportWord_default
|
|
6
|
+
} from "./chunk-MLSI37NJ.js";
|
|
3
7
|
|
|
4
|
-
// components/data-table/
|
|
5
|
-
import
|
|
8
|
+
// components/data-table/DataTable.tsx
|
|
9
|
+
import { useImperativeHandle, useEffect as useEffect2, useState, useCallback, useMemo as useMemo4, forwardRef } from "react";
|
|
6
10
|
|
|
7
11
|
// components/data-table/Column.tsx
|
|
8
|
-
import { useMemo } from "react";
|
|
12
|
+
import { memo, useMemo } from "react";
|
|
9
13
|
|
|
10
14
|
// components/data-table/img/SortDown.tsx
|
|
11
15
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -49,11 +53,11 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters, selectedRows,
|
|
|
49
53
|
if (column.headerFormatter) {
|
|
50
54
|
return column.headerFormatter(column.title);
|
|
51
55
|
}
|
|
52
|
-
return /* @__PURE__ */ jsx3("span", { children: column.title });
|
|
56
|
+
return /* @__PURE__ */ jsx3("span", { title: `${column.title}`, children: column.title });
|
|
53
57
|
};
|
|
54
58
|
const renderColumnSort = () => {
|
|
55
59
|
if (typeof column.autoinc === "undefined" && (typeof column.sortable === "undefined" || column.sortable)) {
|
|
56
|
-
return /* @__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, {}) });
|
|
60
|
+
return /* @__PURE__ */ jsx3("div", { className: "ndt-sorter", role: "button", tabIndex: 1, onClick: toggleSort, children: currentSort === "asc" ? /* @__PURE__ */ jsx3(SortDown_default, {}) : currentSort === "desc" ? /* @__PURE__ */ jsx3(SortUp_default, {}) : /* @__PURE__ */ jsx3(SortDown_default, {}) });
|
|
57
61
|
}
|
|
58
62
|
return /* @__PURE__ */ jsx3(Fragment, {});
|
|
59
63
|
};
|
|
@@ -73,12 +77,13 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters, selectedRows,
|
|
|
73
77
|
) })
|
|
74
78
|
] }) });
|
|
75
79
|
};
|
|
76
|
-
var Column_default = Column;
|
|
80
|
+
var Column_default = memo(Column);
|
|
77
81
|
|
|
78
82
|
// components/data-table/TableHeader.tsx
|
|
83
|
+
import { memo as memo2 } from "react";
|
|
79
84
|
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
80
85
|
var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, headerGroup, selectedRows, toggleAllSelection, displayData }) => {
|
|
81
|
-
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}`)) });
|
|
86
|
+
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", { title: col.title, children: col.title }) }) }, `header-group-${id}`)) });
|
|
82
87
|
const renderColumns = () => columns && columns.length > 0 ? columns.map((column, id) => /* @__PURE__ */ jsx4(
|
|
83
88
|
Column_default,
|
|
84
89
|
{
|
|
@@ -98,12 +103,13 @@ var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, head
|
|
|
98
103
|
/* @__PURE__ */ jsx4("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: renderColumns() })
|
|
99
104
|
] });
|
|
100
105
|
};
|
|
101
|
-
var TableHeader_default =
|
|
106
|
+
var TableHeader_default = memo2(Header);
|
|
102
107
|
|
|
103
108
|
// components/data-table/TableBody.tsx
|
|
104
|
-
import
|
|
109
|
+
import React, { memo as memo5, useMemo as useMemo3 } from "react";
|
|
105
110
|
|
|
106
111
|
// components/data-table/Cell.tsx
|
|
112
|
+
import { memo as memo3, useMemo as useMemo2 } from "react";
|
|
107
113
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
108
114
|
var Cell = ({
|
|
109
115
|
row,
|
|
@@ -121,7 +127,10 @@ var Cell = ({
|
|
|
121
127
|
const isFormatted = typeof column.formatter !== "undefined";
|
|
122
128
|
const isEditable = !!column.editable;
|
|
123
129
|
const isColumnSelectable = !!column.selectable;
|
|
124
|
-
const formattedContent =
|
|
130
|
+
const formattedContent = useMemo2(() => {
|
|
131
|
+
var _a;
|
|
132
|
+
return (_a = column.formatter) == null ? void 0 : _a.call(column, stringValue, row, column);
|
|
133
|
+
}, [column.formatter, stringValue, row, column]);
|
|
125
134
|
const CellWithData = ({ children }) => /* @__PURE__ */ jsx5(
|
|
126
135
|
"div",
|
|
127
136
|
{
|
|
@@ -144,22 +153,16 @@ var Cell = ({
|
|
|
144
153
|
);
|
|
145
154
|
const SelectableCell = () => /* @__PURE__ */ jsx5("div", { className: "ndt-cell ndt-checkbox-cell", onClick: onRowSelect, children: /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: !!isRowSelected, onChange: () => {
|
|
146
155
|
} }) });
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
case isEditable:
|
|
153
|
-
return /* @__PURE__ */ jsx5(EditableCell, {});
|
|
154
|
-
case isColumnSelectable:
|
|
155
|
-
return /* @__PURE__ */ jsx5(SelectableCell, {});
|
|
156
|
-
default:
|
|
157
|
-
return /* @__PURE__ */ jsx5(CellWithData, { children: stringValue });
|
|
158
|
-
}
|
|
156
|
+
if (isAutoinc) return /* @__PURE__ */ jsx5(CellWithData, { children: displayId + 1 });
|
|
157
|
+
if (isFormatted) return /* @__PURE__ */ jsx5(CellWithData, { children: formattedContent });
|
|
158
|
+
if (isEditable) return /* @__PURE__ */ jsx5(EditableCell, {});
|
|
159
|
+
if (isColumnSelectable) return /* @__PURE__ */ jsx5(SelectableCell, {});
|
|
160
|
+
return /* @__PURE__ */ jsx5(CellWithData, { children: stringValue });
|
|
159
161
|
};
|
|
160
|
-
var Cell_default = Cell;
|
|
162
|
+
var Cell_default = memo3(Cell);
|
|
161
163
|
|
|
162
164
|
// components/data-table/Row.tsx
|
|
165
|
+
import { memo as memo4 } from "react";
|
|
163
166
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
164
167
|
var Row = ({
|
|
165
168
|
rowId,
|
|
@@ -193,7 +196,7 @@ var Row = ({
|
|
|
193
196
|
}
|
|
194
197
|
);
|
|
195
198
|
};
|
|
196
|
-
var Row_default = Row;
|
|
199
|
+
var Row_default = memo4(Row);
|
|
197
200
|
|
|
198
201
|
// components/data-table/utils/groupDataBy.ts
|
|
199
202
|
var groupDataBy = (data, key) => {
|
|
@@ -227,7 +230,7 @@ var TableBody = ({
|
|
|
227
230
|
paginationSize,
|
|
228
231
|
paginationPage
|
|
229
232
|
}) => {
|
|
230
|
-
const grouped = groupBy ? groupDataBy(tableData, groupBy) : [];
|
|
233
|
+
const grouped = useMemo3(() => groupBy ? groupDataBy(tableData, groupBy) : [], [tableData, groupBy]);
|
|
231
234
|
if (!tableData || tableData.length === 0) {
|
|
232
235
|
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" }) }) });
|
|
233
236
|
}
|
|
@@ -269,7 +272,7 @@ var TableBody = ({
|
|
|
269
272
|
`row-${group.key}-${globalIndex}`
|
|
270
273
|
);
|
|
271
274
|
}) : null;
|
|
272
|
-
return /* @__PURE__ */ jsxs3(
|
|
275
|
+
return /* @__PURE__ */ jsxs3(React.Fragment, { children: [
|
|
273
276
|
groupHeader,
|
|
274
277
|
rows
|
|
275
278
|
] }, `group-${group.key}`);
|
|
@@ -300,7 +303,7 @@ var TableBody = ({
|
|
|
300
303
|
};
|
|
301
304
|
return /* @__PURE__ */ jsx7("div", { className: `ndt-table-body${scrollable ? " ndt-table-body-scrollable" : ""}`, style: scrollable ? { height: scrollHeight } : {}, children: groupBy ? renderGroupedRows() : renderFlatRows() });
|
|
302
305
|
};
|
|
303
|
-
var TableBody_default = TableBody;
|
|
306
|
+
var TableBody_default = memo5(TableBody);
|
|
304
307
|
|
|
305
308
|
// components/data-table/img/NextIcon.tsx
|
|
306
309
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
@@ -541,32 +544,7 @@ var DataTable = forwardRef(({
|
|
|
541
544
|
const [paginationPage, setPaginationPage] = useState(0);
|
|
542
545
|
const [collapsedGroups, setCollapsedGroups] = useState({});
|
|
543
546
|
const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
|
|
544
|
-
const
|
|
545
|
-
setSelectedRows((prev) => {
|
|
546
|
-
const updated = new Set(prev);
|
|
547
|
-
if (updated.has(index)) {
|
|
548
|
-
updated.delete(index);
|
|
549
|
-
} else {
|
|
550
|
-
updated.add(index);
|
|
551
|
-
}
|
|
552
|
-
return updated;
|
|
553
|
-
});
|
|
554
|
-
};
|
|
555
|
-
const toggleAllSelection = () => {
|
|
556
|
-
if (selectedRows.size === processedData.length) {
|
|
557
|
-
setSelectedRows(/* @__PURE__ */ new Set());
|
|
558
|
-
} else {
|
|
559
|
-
const all = new Set(processedData.map((_, i) => i));
|
|
560
|
-
setSelectedRows(all);
|
|
561
|
-
}
|
|
562
|
-
};
|
|
563
|
-
const toggleGroup = (groupKey) => {
|
|
564
|
-
setCollapsedGroups((prev) => ({
|
|
565
|
-
...prev,
|
|
566
|
-
[groupKey]: !prev[groupKey]
|
|
567
|
-
}));
|
|
568
|
-
};
|
|
569
|
-
const widths = useMemo2(() => {
|
|
547
|
+
const widths = useMemo4(() => {
|
|
570
548
|
return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
|
|
571
549
|
}, [columns]);
|
|
572
550
|
const loadFromLocalStorage = useCallback(() => {
|
|
@@ -587,7 +565,7 @@ var DataTable = forwardRef(({
|
|
|
587
565
|
useEffect2(() => {
|
|
588
566
|
loadFromLocalStorage();
|
|
589
567
|
}, [loadFromLocalStorage]);
|
|
590
|
-
const processedData =
|
|
568
|
+
const processedData = useMemo4(() => {
|
|
591
569
|
let result = [...tableData];
|
|
592
570
|
const columnMap = new Map(columns.map((col) => [col.field, col]));
|
|
593
571
|
for (const field in filters) {
|
|
@@ -602,16 +580,40 @@ var DataTable = forwardRef(({
|
|
|
602
580
|
}
|
|
603
581
|
return result;
|
|
604
582
|
}, [tableData, filters, sortBy, columns]);
|
|
605
|
-
const displayData =
|
|
583
|
+
const displayData = useMemo4(() => {
|
|
606
584
|
if (paginationSize === 0) return processedData;
|
|
607
585
|
const start = paginationPage * paginationSize;
|
|
608
586
|
return processedData.slice(start, start + paginationSize);
|
|
609
587
|
}, [processedData, paginationPage, paginationSize]);
|
|
610
|
-
const rowIdMap =
|
|
588
|
+
const rowIdMap = useMemo4(() => {
|
|
611
589
|
const map = /* @__PURE__ */ new Map();
|
|
612
590
|
processedData.forEach((row, i) => map.set(row, i));
|
|
613
591
|
return map;
|
|
614
592
|
}, [processedData]);
|
|
593
|
+
const toggleRowSelection = (index) => {
|
|
594
|
+
setSelectedRows((prev) => {
|
|
595
|
+
const updated = new Set(prev);
|
|
596
|
+
if (updated.has(index)) {
|
|
597
|
+
updated.delete(index);
|
|
598
|
+
} else {
|
|
599
|
+
updated.add(index);
|
|
600
|
+
}
|
|
601
|
+
return updated;
|
|
602
|
+
});
|
|
603
|
+
};
|
|
604
|
+
const toggleAllSelection = useCallback(() => {
|
|
605
|
+
if (selectedRows.size === processedData.length) {
|
|
606
|
+
setSelectedRows(/* @__PURE__ */ new Set());
|
|
607
|
+
} else {
|
|
608
|
+
setSelectedRows(new Set(processedData.map((_, i) => i)));
|
|
609
|
+
}
|
|
610
|
+
}, [processedData, selectedRows]);
|
|
611
|
+
const toggleGroup = (groupKey) => {
|
|
612
|
+
setCollapsedGroups((prev) => ({
|
|
613
|
+
...prev,
|
|
614
|
+
[groupKey]: !prev[groupKey]
|
|
615
|
+
}));
|
|
616
|
+
};
|
|
615
617
|
useEffect2(() => {
|
|
616
618
|
if (Object.values(filters).some((value) => {
|
|
617
619
|
return value !== null && value !== void 0 && value !== "";
|
|
@@ -679,5 +681,7 @@ var DataTable = forwardRef(({
|
|
|
679
681
|
DataTable.displayName = "DataTable";
|
|
680
682
|
var DataTable_default = DataTable;
|
|
681
683
|
export {
|
|
682
|
-
DataTable_default as DataTable
|
|
684
|
+
DataTable_default as DataTable,
|
|
685
|
+
ExportExcel_default as ExportExcel,
|
|
686
|
+
ExportWord_default as WordExport
|
|
683
687
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nillud-data-table",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -12,16 +12,19 @@
|
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
14
|
"import": "./dist/index.js",
|
|
15
|
+
"require": "./dist/index.js",
|
|
15
16
|
"types": "./dist/index.d.ts"
|
|
16
17
|
},
|
|
17
18
|
"./types": "./dist/index.d.ts",
|
|
18
19
|
"./styles.css": "./dist/styles.css",
|
|
19
20
|
"./export-excel": {
|
|
20
21
|
"import": "./dist/export/export-excel/index.js",
|
|
22
|
+
"require": "./dist/export/export-excel/index.js",
|
|
21
23
|
"types": "./dist/export/export-excel/index.d.ts"
|
|
22
24
|
},
|
|
23
25
|
"./export-word": {
|
|
24
26
|
"import": "./dist/export/export-word/index.js",
|
|
27
|
+
"require": "./dist/export/export-word/index.js",
|
|
25
28
|
"types": "./dist/export/export-word/index.d.ts"
|
|
26
29
|
}
|
|
27
30
|
},
|