nillud-data-table 1.1.3 → 1.2.0
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.d.ts +58 -0
- package/dist/export/index.js +254 -0
- package/dist/index.d.ts +3 -45
- package/dist/index.js +56 -330
- package/dist/styles.css +11 -10
- package/dist/styles.css.map +1 -1
- package/package.json +5 -1
|
@@ -0,0 +1,58 @@
|
|
|
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 ExportSectionTypes = {
|
|
26
|
+
wordBtn: boolean;
|
|
27
|
+
excelBtn: boolean;
|
|
28
|
+
downloadSectionLeftSideContent: ReactElement | null;
|
|
29
|
+
tableData: TableData;
|
|
30
|
+
columns: Array<Column>;
|
|
31
|
+
tableName: string;
|
|
32
|
+
exportCustomColumns?: Array<{
|
|
33
|
+
header: string;
|
|
34
|
+
key: string;
|
|
35
|
+
width: number;
|
|
36
|
+
}> | null;
|
|
37
|
+
wordOptions?: ExportOptions;
|
|
38
|
+
};
|
|
39
|
+
type ExcelExportTypes = {
|
|
40
|
+
columns: Array<Column>;
|
|
41
|
+
excelData: TableData;
|
|
42
|
+
title: string;
|
|
43
|
+
exportCustomColumns: ExportSectionTypes["exportCustomColumns"];
|
|
44
|
+
};
|
|
45
|
+
type ExportWordTypes = {
|
|
46
|
+
wordData: TableData;
|
|
47
|
+
columns: Array<Column>;
|
|
48
|
+
title: string;
|
|
49
|
+
options?: ExportOptions;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
declare const ExportExcel: ({ columns, excelData, title, exportCustomColumns }: ExcelExportTypes) => react_jsx_runtime.JSX.Element;
|
|
53
|
+
|
|
54
|
+
declare const WordExport: ({ wordData, columns, title, options }: ExportWordTypes) => react_jsx_runtime.JSX.Element;
|
|
55
|
+
|
|
56
|
+
declare const ExportSection: ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }: ExportSectionTypes) => react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
export { type ExcelExportTypes, ExportExcel, ExportSection, type ExportSectionTypes, type ExportWordTypes, WordExport };
|
|
@@ -0,0 +1,254 @@
|
|
|
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
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
3
2
|
|
|
4
3
|
type TableElement = {
|
|
5
4
|
[key: string]: string | number;
|
|
@@ -16,12 +15,6 @@ type Column = {
|
|
|
16
15
|
sortable?: boolean;
|
|
17
16
|
filterable?: boolean;
|
|
18
17
|
};
|
|
19
|
-
type ExportOptions = {
|
|
20
|
-
fontSize?: number;
|
|
21
|
-
boldHeaders?: boolean;
|
|
22
|
-
autoLandscape?: boolean;
|
|
23
|
-
maxColumnsBeforeLandscape?: number;
|
|
24
|
-
};
|
|
25
18
|
type TableProps = {
|
|
26
19
|
tableData: TableData;
|
|
27
20
|
columns: Array<Column>;
|
|
@@ -32,53 +25,18 @@ type TableProps = {
|
|
|
32
25
|
paginationCounts?: Array<number> | null;
|
|
33
26
|
scrollable?: boolean;
|
|
34
27
|
scrollHeight?: number;
|
|
35
|
-
exportCustomColumns?: Array<{
|
|
36
|
-
header: string;
|
|
37
|
-
key: string;
|
|
38
|
-
width: number;
|
|
39
|
-
}> | null;
|
|
40
|
-
excelBtn?: boolean;
|
|
41
|
-
wordBtn?: boolean;
|
|
42
|
-
downloadSectionLeftSideContent?: ReactElement | null;
|
|
43
28
|
headerGroup?: Array<{
|
|
44
29
|
title: string;
|
|
45
30
|
cols: number;
|
|
46
31
|
}> | null;
|
|
47
32
|
groupBy?: string | null;
|
|
48
33
|
isTitles?: boolean;
|
|
49
|
-
wordOptions?: ExportOptions;
|
|
50
|
-
ExportSectionComponent?: React.ComponentType<{
|
|
51
|
-
wordBtn: boolean;
|
|
52
|
-
excelBtn: boolean;
|
|
53
|
-
downloadSectionLeftSideContent: ReactElement | null;
|
|
54
|
-
tableData: TableData;
|
|
55
|
-
columns: Array<Column>;
|
|
56
|
-
tableName: string;
|
|
57
|
-
exportCustomColumns?: Array<{
|
|
58
|
-
header: string;
|
|
59
|
-
key: string;
|
|
60
|
-
width: number;
|
|
61
|
-
}> | null;
|
|
62
|
-
wordOptions?: any;
|
|
63
|
-
}> | null;
|
|
64
34
|
};
|
|
65
35
|
type DataTableRef = {
|
|
66
36
|
getData: () => TableData;
|
|
67
37
|
getCurrentData: () => TableData;
|
|
68
38
|
};
|
|
69
39
|
|
|
70
|
-
declare const DataTable: React
|
|
71
|
-
|
|
72
|
-
type Props = {
|
|
73
|
-
wordBtn: boolean;
|
|
74
|
-
excelBtn: boolean;
|
|
75
|
-
downloadSectionLeftSideContent: ReactElement | null;
|
|
76
|
-
tableData: TableData;
|
|
77
|
-
columns: Array<Column>;
|
|
78
|
-
tableName: string;
|
|
79
|
-
exportCustomColumns?: TableProps['exportCustomColumns'];
|
|
80
|
-
wordOptions?: ExportOptions;
|
|
81
|
-
};
|
|
82
|
-
declare const ExportSection: ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }: Props) => react_jsx_runtime.JSX.Element;
|
|
40
|
+
declare const DataTable: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<DataTableRef>>;
|
|
83
41
|
|
|
84
|
-
export { type Column, DataTable, type DataTableRef,
|
|
42
|
+
export { type Column, DataTable, type DataTableRef, type TableElement, type TableProps };
|
package/dist/index.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
// components/DataTable.tsx
|
|
1
|
+
// components/data-table/DataTable.tsx
|
|
2
2
|
import { useImperativeHandle, useEffect as useEffect2, useState, useCallback, useMemo as useMemo2, forwardRef } from "react";
|
|
3
3
|
|
|
4
|
-
// components/TableHeader.tsx
|
|
4
|
+
// components/data-table/TableHeader.tsx
|
|
5
5
|
import React from "react";
|
|
6
6
|
|
|
7
|
-
// components/Column.tsx
|
|
7
|
+
// components/data-table/Column.tsx
|
|
8
8
|
import { useMemo } from "react";
|
|
9
9
|
|
|
10
|
-
// components/img/SortDown.tsx
|
|
10
|
+
// components/data-table/img/SortDown.tsx
|
|
11
11
|
import { jsx } from "react/jsx-runtime";
|
|
12
12
|
var SortDown = () => {
|
|
13
13
|
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-caret-down-fill", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx("path", { d: "M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" }) });
|
|
14
14
|
};
|
|
15
15
|
var SortDown_default = SortDown;
|
|
16
16
|
|
|
17
|
-
// components/img/SortUp.tsx
|
|
17
|
+
// components/data-table/img/SortUp.tsx
|
|
18
18
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
19
19
|
var SortUp = () => {
|
|
20
20
|
return /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-caret-up-fill", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx2("path", { d: "m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z" }) });
|
|
21
21
|
};
|
|
22
22
|
var SortUp_default = SortUp;
|
|
23
23
|
|
|
24
|
-
// components/Column.tsx
|
|
24
|
+
// components/data-table/Column.tsx
|
|
25
25
|
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
26
26
|
var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
27
27
|
var _a;
|
|
@@ -53,7 +53,7 @@ var Column = ({ column, getSortField, sortBy, getFilters, filters }) => {
|
|
|
53
53
|
};
|
|
54
54
|
var Column_default = Column;
|
|
55
55
|
|
|
56
|
-
// components/TableHeader.tsx
|
|
56
|
+
// components/data-table/TableHeader.tsx
|
|
57
57
|
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
58
58
|
var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, headerGroup }) => {
|
|
59
59
|
const renderHeaderGroup = () => headerGroup && /* @__PURE__ */ jsx4("div", { className: "ndt-table-columns", style: { gridTemplateColumns: widths || "auto" }, children: headerGroup.map((col, id) => /* @__PURE__ */ jsx4("div", { className: "ndt-column", style: { gridColumn: `span ${col.cols || 1}` }, children: /* @__PURE__ */ jsx4("div", { className: "ndt-column-head", children: /* @__PURE__ */ jsx4("span", { children: col.title }) }) }, `header-group-${id}`)) });
|
|
@@ -75,10 +75,10 @@ var Header = ({ columns, getSortField, sortBy, getFilters, filters, widths, head
|
|
|
75
75
|
};
|
|
76
76
|
var TableHeader_default = React.memo(Header);
|
|
77
77
|
|
|
78
|
-
// components/TableBody.tsx
|
|
78
|
+
// components/data-table/TableBody.tsx
|
|
79
79
|
import React2 from "react";
|
|
80
80
|
|
|
81
|
-
// components/Cell.tsx
|
|
81
|
+
// components/data-table/Cell.tsx
|
|
82
82
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
83
83
|
var Cell = ({
|
|
84
84
|
row,
|
|
@@ -100,7 +100,7 @@ var Cell = ({
|
|
|
100
100
|
};
|
|
101
101
|
var Cell_default = Cell;
|
|
102
102
|
|
|
103
|
-
// components/Row.tsx
|
|
103
|
+
// components/data-table/Row.tsx
|
|
104
104
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
105
105
|
var Row = ({ rowId, columns, row, widths, isTitles }) => /* @__PURE__ */ jsx6("div", { className: "ndt-table-row", style: { gridTemplateColumns: widths }, children: columns.map((column, id) => /* @__PURE__ */ jsx6(
|
|
106
106
|
Cell_default,
|
|
@@ -114,7 +114,7 @@ var Row = ({ rowId, columns, row, widths, isTitles }) => /* @__PURE__ */ jsx6("d
|
|
|
114
114
|
)) });
|
|
115
115
|
var Row_default = Row;
|
|
116
116
|
|
|
117
|
-
// utils/groupDataBy.ts
|
|
117
|
+
// components/data-table/utils/groupDataBy.ts
|
|
118
118
|
var groupDataBy = (data, key) => {
|
|
119
119
|
const groups = /* @__PURE__ */ new Map();
|
|
120
120
|
data.forEach((item) => {
|
|
@@ -127,7 +127,7 @@ var groupDataBy = (data, key) => {
|
|
|
127
127
|
return Array.from(groups.entries()).map(([key2, items]) => ({ key: key2, items }));
|
|
128
128
|
};
|
|
129
129
|
|
|
130
|
-
// components/TableBody.tsx
|
|
130
|
+
// components/data-table/TableBody.tsx
|
|
131
131
|
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
132
132
|
var TableBody = ({
|
|
133
133
|
columns,
|
|
@@ -185,35 +185,35 @@ var TableBody = ({
|
|
|
185
185
|
};
|
|
186
186
|
var TableBody_default = TableBody;
|
|
187
187
|
|
|
188
|
-
// components/img/NextIcon.tsx
|
|
188
|
+
// components/data-table/img/NextIcon.tsx
|
|
189
189
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
190
190
|
var NextIcon = () => {
|
|
191
191
|
return /* @__PURE__ */ jsx8("svg", { width: "41", height: "65", viewBox: "0 0 41 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("path", { d: "M0.674316 57.2669L25.3872 32.5L0.674316 7.73312L8.28244 0.125L40.6574 32.5L8.28244 64.875L0.674316 57.2669Z", fill: "#666666" }) });
|
|
192
192
|
};
|
|
193
193
|
var NextIcon_default = NextIcon;
|
|
194
194
|
|
|
195
|
-
// components/img/LastIcon.tsx
|
|
195
|
+
// components/data-table/img/LastIcon.tsx
|
|
196
196
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
197
197
|
var LastIcon = () => {
|
|
198
198
|
return /* @__PURE__ */ jsx9("svg", { width: "68", height: "65", viewBox: "0 0 68 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx9("path", { d: "M0.185059 7.73312L24.9519 32.5L0.185059 57.2669L7.79318 64.875L40.1682 32.5L7.79318 0.125L0.185059 7.73312ZM56.3557 0.125H67.1474V64.875H56.3557V0.125Z", fill: "#666666" }) });
|
|
199
199
|
};
|
|
200
200
|
var LastIcon_default = LastIcon;
|
|
201
201
|
|
|
202
|
-
// components/img/PrevIcon.tsx
|
|
202
|
+
// components/data-table/img/PrevIcon.tsx
|
|
203
203
|
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
204
204
|
var PrevIcon = () => {
|
|
205
205
|
return /* @__PURE__ */ jsx10("svg", { width: "41", height: "65", viewBox: "0 0 41 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M40.6574 57.2669L15.9445 32.5L40.6574 7.73312L33.0493 0.125L0.674316 32.5L33.0493 64.875L40.6574 57.2669Z", fill: "#666666" }) });
|
|
206
206
|
};
|
|
207
207
|
var PrevIcon_default = PrevIcon;
|
|
208
208
|
|
|
209
|
-
// components/img/FirstIcon.tsx
|
|
209
|
+
// components/data-table/img/FirstIcon.tsx
|
|
210
210
|
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
211
211
|
var FirstIcon = () => {
|
|
212
212
|
return /* @__PURE__ */ jsx11("svg", { width: "68", height: "65", viewBox: "0 0 68 65", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx11("path", { d: "M67.1474 57.2669L42.3805 32.5L67.1474 7.73312L59.5392 0.125L27.1642 32.5L59.5392 64.875L67.1474 57.2669ZM0.185059 0.125H10.9767V64.875H0.185059V0.125Z", fill: "#666666" }) });
|
|
213
213
|
};
|
|
214
214
|
var FirstIcon_default = FirstIcon;
|
|
215
215
|
|
|
216
|
-
// components/TableFooter.tsx
|
|
216
|
+
// components/data-table/TableFooter.tsx
|
|
217
217
|
import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
218
218
|
var TableFooter = ({
|
|
219
219
|
tableData,
|
|
@@ -340,7 +340,7 @@ var TableFooter = ({
|
|
|
340
340
|
};
|
|
341
341
|
var TableFooter_default = TableFooter;
|
|
342
342
|
|
|
343
|
-
// components/
|
|
343
|
+
// components/data-table/utils/sort-data.ts
|
|
344
344
|
var sortByAsc = (data, column) => {
|
|
345
345
|
const sortedData = data.sort((a, b) => {
|
|
346
346
|
if (!isNaN(+a[column]) && !isNaN(+b[column])) {
|
|
@@ -384,7 +384,7 @@ var filterData = (data, filter, value) => {
|
|
|
384
384
|
return filteredData;
|
|
385
385
|
};
|
|
386
386
|
|
|
387
|
-
// utils/useDebouncedEffect.tsx
|
|
387
|
+
// components/data-table/utils/useDebouncedEffect.tsx
|
|
388
388
|
import { useEffect } from "react";
|
|
389
389
|
function useDebouncedEffect(callback, deps, delay) {
|
|
390
390
|
useEffect(() => {
|
|
@@ -393,7 +393,7 @@ function useDebouncedEffect(callback, deps, delay) {
|
|
|
393
393
|
}, [...deps, delay]);
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
// components/DataTable.tsx
|
|
396
|
+
// components/data-table/DataTable.tsx
|
|
397
397
|
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
398
398
|
var DataTable = forwardRef(({
|
|
399
399
|
tableData,
|
|
@@ -405,15 +405,9 @@ var DataTable = forwardRef(({
|
|
|
405
405
|
paginationCounts = null,
|
|
406
406
|
scrollable = false,
|
|
407
407
|
scrollHeight = 300,
|
|
408
|
-
exportCustomColumns = null,
|
|
409
|
-
excelBtn = false,
|
|
410
|
-
wordBtn = false,
|
|
411
|
-
downloadSectionLeftSideContent = null,
|
|
412
408
|
headerGroup = null,
|
|
413
409
|
groupBy = null,
|
|
414
|
-
isTitles = false
|
|
415
|
-
wordOptions,
|
|
416
|
-
ExportSectionComponent = null
|
|
410
|
+
isTitles = false
|
|
417
411
|
}, ref) => {
|
|
418
412
|
const [filters, setFilters] = useState({});
|
|
419
413
|
const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
|
|
@@ -489,316 +483,48 @@ var DataTable = forwardRef(({
|
|
|
489
483
|
getData: () => processedData,
|
|
490
484
|
getCurrentData: () => displayData
|
|
491
485
|
}), [processedData, displayData]);
|
|
492
|
-
return /* @__PURE__ */
|
|
493
|
-
|
|
494
|
-
|
|
486
|
+
return /* @__PURE__ */ jsx13("div", { className: "ndt-table-container", children: /* @__PURE__ */ jsxs5("div", { className: "ndt-table", children: [
|
|
487
|
+
/* @__PURE__ */ jsx13(
|
|
488
|
+
TableHeader_default,
|
|
489
|
+
{
|
|
490
|
+
columns,
|
|
491
|
+
sortBy,
|
|
492
|
+
getSortField: setSortBy,
|
|
493
|
+
filters,
|
|
494
|
+
getFilters: setFilters,
|
|
495
|
+
widths,
|
|
496
|
+
headerGroup
|
|
497
|
+
}
|
|
498
|
+
),
|
|
499
|
+
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(
|
|
500
|
+
TableBody_default,
|
|
495
501
|
{
|
|
496
|
-
wordBtn,
|
|
497
|
-
excelBtn,
|
|
498
|
-
downloadSectionLeftSideContent,
|
|
499
502
|
tableData: displayData,
|
|
500
503
|
columns,
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
+
scrollable,
|
|
505
|
+
scrollHeight,
|
|
506
|
+
widths,
|
|
507
|
+
groupBy,
|
|
508
|
+
collapsedGroups,
|
|
509
|
+
toggleGroup,
|
|
510
|
+
isTitles
|
|
504
511
|
}
|
|
505
512
|
),
|
|
506
|
-
/* @__PURE__ */
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
),
|
|
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(
|
|
520
|
-
TableBody_default,
|
|
521
|
-
{
|
|
522
|
-
tableData: displayData,
|
|
523
|
-
columns,
|
|
524
|
-
scrollable,
|
|
525
|
-
scrollHeight,
|
|
526
|
-
widths,
|
|
527
|
-
groupBy,
|
|
528
|
-
collapsedGroups,
|
|
529
|
-
toggleGroup,
|
|
530
|
-
isTitles
|
|
531
|
-
}
|
|
532
|
-
),
|
|
533
|
-
isFooter && /* @__PURE__ */ jsx13(
|
|
534
|
-
TableFooter_default,
|
|
535
|
-
{
|
|
536
|
-
paginationCounts,
|
|
537
|
-
tableData: processedData,
|
|
538
|
-
paginationSize,
|
|
539
|
-
getPaginationSize: setPaginationSize,
|
|
540
|
-
paginationPage,
|
|
541
|
-
getPaginationPage: setPaginationPage
|
|
542
|
-
}
|
|
543
|
-
)
|
|
544
|
-
] })
|
|
545
|
-
] });
|
|
513
|
+
isFooter && /* @__PURE__ */ jsx13(
|
|
514
|
+
TableFooter_default,
|
|
515
|
+
{
|
|
516
|
+
paginationCounts,
|
|
517
|
+
tableData: processedData,
|
|
518
|
+
paginationSize,
|
|
519
|
+
getPaginationSize: setPaginationSize,
|
|
520
|
+
paginationPage,
|
|
521
|
+
getPaginationPage: setPaginationPage
|
|
522
|
+
}
|
|
523
|
+
)
|
|
524
|
+
] }) });
|
|
546
525
|
});
|
|
547
526
|
DataTable.displayName = "DataTable";
|
|
548
527
|
var DataTable_default = DataTable;
|
|
549
|
-
|
|
550
|
-
// utils/exportUtils/ExportHelpers.ts
|
|
551
|
-
function prepareExportRows(columns, data) {
|
|
552
|
-
return data.map(
|
|
553
|
-
(row) => columns.map((col) => {
|
|
554
|
-
const value = row[col.field];
|
|
555
|
-
return typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), row) : String(value != null ? value : "");
|
|
556
|
-
})
|
|
557
|
-
);
|
|
558
|
-
}
|
|
559
|
-
function prepareExportHeaders(columns) {
|
|
560
|
-
return columns.map((col) => col.title);
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
// components/export/WordExport.tsx
|
|
564
|
-
import {
|
|
565
|
-
AlignmentType,
|
|
566
|
-
Document,
|
|
567
|
-
Packer,
|
|
568
|
-
PageOrientation,
|
|
569
|
-
Paragraph,
|
|
570
|
-
Table,
|
|
571
|
-
TableCell,
|
|
572
|
-
TableRow,
|
|
573
|
-
TextRun,
|
|
574
|
-
VerticalAlign,
|
|
575
|
-
WidthType
|
|
576
|
-
} from "docx";
|
|
577
|
-
import { saveAs } from "file-saver";
|
|
578
|
-
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
579
|
-
var WordExport = ({
|
|
580
|
-
wordData,
|
|
581
|
-
columns,
|
|
582
|
-
title,
|
|
583
|
-
options = {
|
|
584
|
-
fontSize: 20,
|
|
585
|
-
boldHeaders: false,
|
|
586
|
-
autoLandscape: false,
|
|
587
|
-
maxColumnsBeforeLandscape: 5
|
|
588
|
-
}
|
|
589
|
-
// exportCustomColumns
|
|
590
|
-
}) => {
|
|
591
|
-
const createNewWord = async () => {
|
|
592
|
-
const {
|
|
593
|
-
fontSize = 0,
|
|
594
|
-
boldHeaders = true,
|
|
595
|
-
autoLandscape = true,
|
|
596
|
-
maxColumnsBeforeLandscape = 5
|
|
597
|
-
} = options;
|
|
598
|
-
const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
|
|
599
|
-
const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
|
|
600
|
-
children: [new Paragraph({
|
|
601
|
-
children: [new TextRun({
|
|
602
|
-
text: header,
|
|
603
|
-
size: fontSize,
|
|
604
|
-
bold: boldHeaders
|
|
605
|
-
})],
|
|
606
|
-
alignment: AlignmentType.CENTER
|
|
607
|
-
})],
|
|
608
|
-
verticalAlign: VerticalAlign.CENTER
|
|
609
|
-
}));
|
|
610
|
-
const tableHeaderRow = new TableRow({ children: headerCells });
|
|
611
|
-
const rows = prepareExportRows(columns, wordData).map((cells) => {
|
|
612
|
-
const rowCells = cells.map(
|
|
613
|
-
(value) => new TableCell({
|
|
614
|
-
children: [new Paragraph({
|
|
615
|
-
children: [new TextRun({
|
|
616
|
-
text: value,
|
|
617
|
-
size: fontSize
|
|
618
|
-
})],
|
|
619
|
-
alignment: AlignmentType.CENTER
|
|
620
|
-
})],
|
|
621
|
-
verticalAlign: VerticalAlign.CENTER
|
|
622
|
-
})
|
|
623
|
-
);
|
|
624
|
-
return new TableRow({ children: rowCells });
|
|
625
|
-
});
|
|
626
|
-
const table = new Table({
|
|
627
|
-
rows: [tableHeaderRow, ...rows],
|
|
628
|
-
width: { size: 11e3, type: WidthType.DXA },
|
|
629
|
-
indent: { size: -1e3, type: WidthType.DXA }
|
|
630
|
-
});
|
|
631
|
-
const doc = new Document({
|
|
632
|
-
sections: [{
|
|
633
|
-
children: [table, new Paragraph({ text: "" })],
|
|
634
|
-
properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
|
|
635
|
-
}]
|
|
636
|
-
});
|
|
637
|
-
Packer.toBlob(doc).then((blob) => {
|
|
638
|
-
saveAs(blob, `${title}.docx`);
|
|
639
|
-
});
|
|
640
|
-
};
|
|
641
|
-
return /* @__PURE__ */ jsx14("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
|
|
642
|
-
};
|
|
643
|
-
var WordExport_default = WordExport;
|
|
644
|
-
|
|
645
|
-
// utils/exportUtils/exportUtils.ts
|
|
646
|
-
var generateExcelColumns = (columns, exportCustomColumns) => {
|
|
647
|
-
let excelColumns = columns.map((column) => ({
|
|
648
|
-
header: column.title,
|
|
649
|
-
key: column.field,
|
|
650
|
-
width: 20
|
|
651
|
-
}));
|
|
652
|
-
if (exportCustomColumns) {
|
|
653
|
-
exportCustomColumns.forEach((custom) => {
|
|
654
|
-
excelColumns = excelColumns.map(
|
|
655
|
-
(col) => col.key === custom.key ? { ...col, ...custom } : col
|
|
656
|
-
);
|
|
657
|
-
});
|
|
658
|
-
}
|
|
659
|
-
return excelColumns;
|
|
660
|
-
};
|
|
661
|
-
var applyHeaderStyles = (row, columnCount) => {
|
|
662
|
-
row.height = 40;
|
|
663
|
-
row.font = { size: 12, bold: true };
|
|
664
|
-
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
665
|
-
for (let i = 1; i <= columnCount; i++) {
|
|
666
|
-
const cell = row.getCell(i);
|
|
667
|
-
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
668
|
-
cell.border = {
|
|
669
|
-
top: { style: "thin" },
|
|
670
|
-
left: { style: "thin" },
|
|
671
|
-
bottom: { style: "thin" },
|
|
672
|
-
right: { style: "thin" }
|
|
673
|
-
};
|
|
674
|
-
}
|
|
675
|
-
};
|
|
676
|
-
var applyRowStyles = (row, columnCount) => {
|
|
677
|
-
row.height = 40;
|
|
678
|
-
row.font = { size: 12 };
|
|
679
|
-
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
680
|
-
for (let i = 1; i <= columnCount; i++) {
|
|
681
|
-
const cell = row.getCell(i);
|
|
682
|
-
cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
|
|
683
|
-
cell.border = {
|
|
684
|
-
top: { style: "thin" },
|
|
685
|
-
left: { style: "thin" },
|
|
686
|
-
bottom: { style: "thin" },
|
|
687
|
-
right: { style: "thin" }
|
|
688
|
-
};
|
|
689
|
-
}
|
|
690
|
-
};
|
|
691
|
-
var generateExcelDataRows = (columns, data) => {
|
|
692
|
-
return data.map((element) => {
|
|
693
|
-
const rowData = {};
|
|
694
|
-
columns.forEach((col) => {
|
|
695
|
-
const value = element[col.field];
|
|
696
|
-
rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
|
|
697
|
-
});
|
|
698
|
-
return rowData;
|
|
699
|
-
});
|
|
700
|
-
};
|
|
701
|
-
var setColumnAutoWidths = (sheet) => {
|
|
702
|
-
var _a;
|
|
703
|
-
(_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
|
|
704
|
-
var _a2;
|
|
705
|
-
let maxLength = 10;
|
|
706
|
-
(_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
|
|
707
|
-
const cellValue = cell.value ? String(cell.value) : "";
|
|
708
|
-
maxLength = Math.max(maxLength, cellValue.length + 5);
|
|
709
|
-
});
|
|
710
|
-
column.width = maxLength;
|
|
711
|
-
});
|
|
712
|
-
};
|
|
713
|
-
|
|
714
|
-
// components/export/ExportExcel.tsx
|
|
715
|
-
import ExcelJS from "exceljs";
|
|
716
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
717
|
-
var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
|
|
718
|
-
const exportExcel = async () => {
|
|
719
|
-
const workbook = new ExcelJS.Workbook();
|
|
720
|
-
const sheet = workbook.addWorksheet(title, {
|
|
721
|
-
pageSetup: {
|
|
722
|
-
fitToPage: true,
|
|
723
|
-
fitToHeight: 2,
|
|
724
|
-
fitToWidth: 1,
|
|
725
|
-
orientation: "landscape"
|
|
726
|
-
},
|
|
727
|
-
headerFooter: {
|
|
728
|
-
oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
|
|
729
|
-
evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
|
|
730
|
-
}
|
|
731
|
-
});
|
|
732
|
-
const excelColumns = generateExcelColumns(columns, exportCustomColumns);
|
|
733
|
-
sheet.columns = excelColumns;
|
|
734
|
-
const headerRow = sheet.getRow(1);
|
|
735
|
-
applyHeaderStyles(headerRow, sheet.columns.length);
|
|
736
|
-
const dataRows = generateExcelDataRows(columns, excelData);
|
|
737
|
-
dataRows.forEach((data) => {
|
|
738
|
-
const row = sheet.addRow(data);
|
|
739
|
-
applyRowStyles(row, sheet.columns.length);
|
|
740
|
-
});
|
|
741
|
-
setColumnAutoWidths(sheet);
|
|
742
|
-
if (excelData.length > 15) {
|
|
743
|
-
sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
|
|
744
|
-
} else {
|
|
745
|
-
sheet.pageSetup.fitToHeight = 1;
|
|
746
|
-
}
|
|
747
|
-
workbook.xlsx.writeBuffer().then((data) => {
|
|
748
|
-
const blob = new Blob([data], {
|
|
749
|
-
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
750
|
-
});
|
|
751
|
-
const url = window.URL.createObjectURL(blob);
|
|
752
|
-
const anchor = document.createElement("a");
|
|
753
|
-
anchor.href = url;
|
|
754
|
-
anchor.download = `${title}.xlsx`;
|
|
755
|
-
anchor.click();
|
|
756
|
-
window.URL.revokeObjectURL(url);
|
|
757
|
-
});
|
|
758
|
-
};
|
|
759
|
-
return /* @__PURE__ */ jsx15("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
|
|
760
|
-
};
|
|
761
|
-
var ExportExcel_default = ExportExcel;
|
|
762
|
-
|
|
763
|
-
// components/ExportSection.tsx
|
|
764
|
-
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
765
|
-
var ExportSection = ({
|
|
766
|
-
wordBtn,
|
|
767
|
-
excelBtn,
|
|
768
|
-
downloadSectionLeftSideContent,
|
|
769
|
-
tableData,
|
|
770
|
-
columns,
|
|
771
|
-
tableName,
|
|
772
|
-
exportCustomColumns,
|
|
773
|
-
wordOptions
|
|
774
|
-
}) => {
|
|
775
|
-
return /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsxs6("div", { className: "ndt-download-section", children: [
|
|
776
|
-
/* @__PURE__ */ jsx16("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
|
|
777
|
-
/* @__PURE__ */ jsxs6("div", { className: "ndt-download-buttons", children: [
|
|
778
|
-
wordBtn && /* @__PURE__ */ jsx16(
|
|
779
|
-
WordExport_default,
|
|
780
|
-
{
|
|
781
|
-
wordData: tableData,
|
|
782
|
-
columns,
|
|
783
|
-
title: tableName,
|
|
784
|
-
exportCustomColumns,
|
|
785
|
-
options: wordOptions
|
|
786
|
-
}
|
|
787
|
-
),
|
|
788
|
-
excelBtn && /* @__PURE__ */ jsx16(
|
|
789
|
-
ExportExcel_default,
|
|
790
|
-
{
|
|
791
|
-
excelData: tableData,
|
|
792
|
-
columns,
|
|
793
|
-
title: tableName,
|
|
794
|
-
exportCustomColumns
|
|
795
|
-
}
|
|
796
|
-
)
|
|
797
|
-
] })
|
|
798
|
-
] }) });
|
|
799
|
-
};
|
|
800
|
-
var ExportSection_default = ExportSection;
|
|
801
528
|
export {
|
|
802
|
-
DataTable_default as DataTable
|
|
803
|
-
ExportSection_default as ExportSection
|
|
529
|
+
DataTable_default as DataTable
|
|
804
530
|
};
|
package/dist/styles.css
CHANGED
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
.ndt-table-container .ndt-download-section {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: row;
|
|
5
|
-
justify-content: space-between;
|
|
6
|
-
align-items: center;
|
|
7
|
-
margin-bottom: 16px;
|
|
8
|
-
}
|
|
9
|
-
.ndt-table-container .ndt-download-section button:not(:last-child) {
|
|
10
|
-
margin-right: 10px;
|
|
11
|
-
}
|
|
12
2
|
.ndt-table-container .ndt-table {
|
|
13
3
|
border-radius: 4px;
|
|
14
4
|
border: 1px solid #ddd;
|
|
@@ -200,4 +190,15 @@
|
|
|
200
190
|
color: #48ae78;
|
|
201
191
|
}
|
|
202
192
|
|
|
193
|
+
.ndt-download-section {
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-direction: row;
|
|
196
|
+
justify-content: space-between;
|
|
197
|
+
align-items: center;
|
|
198
|
+
margin-bottom: 16px;
|
|
199
|
+
}
|
|
200
|
+
.ndt-download-section button:not(:last-child) {
|
|
201
|
+
margin-right: 10px;
|
|
202
|
+
}
|
|
203
|
+
|
|
203
204
|
/*# sourceMappingURL=styles.css.map */
|
package/dist/styles.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../styles/data-table.scss"],"names":[],"mappings":";AACI;EACI;EACA
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../components/data-table/styles/data-table.scss"],"names":[],"mappings":";AACI;EACI;EACA;;AAEA;AAAA;EAEI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMR;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;;AAGA;EACI;AACA;;AAGJ;EACI;AACA;EACA;AACA;;AAGJ;EACI;AACA;EACA;AACA;;AAGJ;EACI;AACA;;AAKJ;EACI;;AAGJ;EACI;;AAIA;EACI;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAIA;EACI;;AAGI;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EAGI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EAGI;EACA;EACA;;AAIR;EACI;;AAEA;EAGI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAIA;EACI","file":"styles.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nillud-data-table",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -14,6 +14,10 @@
|
|
|
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
|
+
},
|
|
17
21
|
"./types": "./dist/index.d.ts",
|
|
18
22
|
"./styles.css": "./dist/styles.css"
|
|
19
23
|
},
|