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