as children");
58 | }
59 | }).isRequired
60 | };
61 | exports.default = ExcelSheet;
--------------------------------------------------------------------------------
/dist/ExcelPlugin/utils/DataUtil.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.excelSheetFromDataSet = exports.excelSheetFromAoA = exports.dateToNumber = exports.strToArrBuffer = undefined;
7 |
8 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
9 |
10 | var _xlsx = require("xlsx");
11 |
12 | var _xlsx2 = _interopRequireDefault(_xlsx);
13 |
14 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15 |
16 | var strToArrBuffer = function strToArrBuffer(s) {
17 | var buf = new ArrayBuffer(s.length);
18 | var view = new Uint8Array(buf);
19 |
20 | for (var i = 0; i != s.length; ++i) {
21 | view[i] = s.charCodeAt(i) & 0xff;
22 | }
23 |
24 | return buf;
25 | };
26 |
27 | var dateToNumber = function dateToNumber(v, date1904) {
28 | if (date1904) {
29 | v += 1462;
30 | }
31 |
32 | var epoch = Date.parse(v);
33 |
34 | return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
35 | };
36 |
37 | var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet) {
38 | /*
39 | Assuming the structure of dataset
40 | {
41 | xSteps?: number; //How many cells to skips from left
42 | ySteps?: number; //How many rows to skips from last data
43 | columns: [array | string]
44 | data: [array_of_array | string|boolean|number | CellObject]
45 | fill, font, numFmt, alignment, and border
46 | }
47 | */
48 | if (dataSet === undefined || dataSet.length === 0) {
49 | return {};
50 | }
51 |
52 | var ws = {};
53 | var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
54 | var rowCount = 0;
55 |
56 | dataSet.forEach(function (dataSetItem) {
57 | var columns = dataSetItem.columns;
58 | var xSteps = typeof dataSetItem.xSteps === "number" ? dataSetItem.xSteps : 0;
59 | var ySteps = typeof dataSetItem.ySteps === "number" ? dataSetItem.ySteps : 0;
60 | var data = dataSetItem.data;
61 | if (dataSet === undefined || dataSet.length === 0) {
62 | return;
63 | }
64 |
65 | rowCount += ySteps;
66 |
67 | if (columns.length >= 0) {
68 | columns.forEach(function (col, index) {
69 | var cellRef = _xlsx2.default.utils.encode_cell({
70 | c: xSteps + index,
71 | r: rowCount
72 | });
73 | fixRange(range, 0, 0, rowCount, xSteps, ySteps);
74 | getCell(col, cellRef, ws);
75 | });
76 |
77 | rowCount += 1;
78 | }
79 |
80 | for (var R = 0; R != data.length; ++R, rowCount++) {
81 | for (var C = 0; C != data[R].length; ++C) {
82 | var cellRef = _xlsx2.default.utils.encode_cell({ c: C + xSteps, r: rowCount });
83 | fixRange(range, R, C, rowCount, xSteps, ySteps);
84 | getCell(data[R][C], cellRef, ws);
85 | }
86 | }
87 | });
88 |
89 | if (range.s.c < 10000000) {
90 | ws["!ref"] = _xlsx2.default.utils.encode_range(range);
91 | }
92 |
93 | // set column width
94 | ws["!cols"] = setColumnWidth(dataSet);
95 |
96 | return ws;
97 | };
98 |
99 | /**
100 | * set column width
101 | */
102 | function setColumnWidth(dataSet) {
103 | var columnWidths = [];
104 |
105 | // set colum width
106 | if (dataSet) {
107 | for (var i = 0; i < dataSet.length; i++) {
108 |
109 | var data = dataSet[i];
110 | var columns = data.columns;
111 |
112 | if (columns) {
113 | for (var j = 0; j < columns.length; j++) {
114 |
115 | var column = columns[j];
116 |
117 | if (column.widthPx) {
118 | columnWidths.push({
119 | wpx: column.widthPx
120 | });
121 | continue;
122 | }
123 |
124 | if (column.widthCh) {
125 | columnWidths.push({
126 | wpx: column.widthCh
127 | });
128 | continue;
129 | }
130 |
131 | columnWidths.push({
132 | wpx: 64 // 64px is default column width in excel
133 | });
134 | }
135 | }
136 | }
137 | }
138 |
139 | return columnWidths;
140 | }
141 |
142 | function getCell(v, cellRef, ws) {
143 | var cell = {};
144 | if (v === null) {
145 | return;
146 | }
147 | if (typeof v === "number") {
148 | cell.v = v;
149 | cell.t = "n";
150 | } else if (typeof v === "boolean") {
151 | cell.v = v;
152 | cell.t = "b";
153 | } else if (v instanceof Date) {
154 | cell.t = "n";
155 | cell.z = _xlsx2.default.SSF._table[14];
156 | cell.v = dateToNumber(cell.v);
157 | } else if ((typeof v === "undefined" ? "undefined" : _typeof(v)) === "object") {
158 | cell.v = v.value;
159 | cell.s = v.style;
160 | } else {
161 | cell.v = v;
162 | cell.t = "s";
163 | }
164 | ws[cellRef] = cell;
165 | }
166 |
167 | function fixRange(range, R, C, rowCount, xSteps, ySteps) {
168 | if (range.s.r > R + rowCount) {
169 | range.s.r = R + rowCount;
170 | }
171 |
172 | if (range.s.c > C + xSteps) {
173 | range.s.c = C + xSteps;
174 | }
175 |
176 | if (range.e.r < R + rowCount) {
177 | range.e.r = R + rowCount;
178 | }
179 |
180 | if (range.e.c < C + xSteps) {
181 | range.e.c = C + xSteps;
182 | }
183 | }
184 |
185 | var excelSheetFromAoA = function excelSheetFromAoA(data) {
186 | var ws = {};
187 | var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
188 |
189 | for (var R = 0; R != data.length; ++R) {
190 | for (var C = 0; C != data[R].length; ++C) {
191 | if (range.s.r > R) {
192 | range.s.r = R;
193 | }
194 |
195 | if (range.s.c > C) {
196 | range.s.c = C;
197 | }
198 |
199 | if (range.e.r < R) {
200 | range.e.r = R;
201 | }
202 |
203 | if (range.e.c < C) {
204 | range.e.c = C;
205 | }
206 |
207 | var cell = { v: data[R][C] };
208 | if (cell.v === null) {
209 | continue;
210 | }
211 |
212 | var cellRef = _xlsx2.default.utils.encode_cell({ c: C, r: R });
213 | if (typeof cell.v === "number") {
214 | cell.t = "n";
215 | } else if (typeof cell.v === "boolean") {
216 | cell.t = "b";
217 | } else if (cell.v instanceof Date) {
218 | cell.t = "n";
219 | cell.z = _xlsx2.default.SSF._table[14];
220 | cell.v = dateToNumber(cell.v);
221 | } else {
222 | cell.t = "s";
223 | }
224 |
225 | ws[cellRef] = cell;
226 | }
227 | }
228 |
229 | if (range.s.c < 10000000) {
230 | ws["!ref"] = _xlsx2.default.utils.encode_range(range);
231 | }
232 |
233 | return ws;
234 | };
235 |
236 | exports.strToArrBuffer = strToArrBuffer;
237 | exports.dateToNumber = dateToNumber;
238 | exports.excelSheetFromAoA = excelSheetFromAoA;
239 | exports.excelSheetFromDataSet = excelSheetFromDataSet;
--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _ExcelFile = require("./ExcelPlugin/components/ExcelFile");
8 |
9 | var _ExcelFile2 = _interopRequireDefault(_ExcelFile);
10 |
11 | var _ExcelSheet = require("./ExcelPlugin/elements/ExcelSheet");
12 |
13 | var _ExcelSheet2 = _interopRequireDefault(_ExcelSheet);
14 |
15 | var _ExcelColumn = require("./ExcelPlugin/elements/ExcelColumn");
16 |
17 | var _ExcelColumn2 = _interopRequireDefault(_ExcelColumn);
18 |
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 |
21 | _ExcelFile2.default.ExcelSheet = _ExcelSheet2.default;
22 | _ExcelFile2.default.ExcelColumn = _ExcelColumn2.default;
23 |
24 | var ReactExport = {
25 | ExcelFile: _ExcelFile2.default
26 | };
27 |
28 | exports.default = ReactExport;
29 |
30 | exports.modules = {
31 | ExcelFile: _ExcelFile2.default,
32 | ExcelSheet: _ExcelSheet2.default,
33 | ExcelColumn: _ExcelColumn2.default
34 | };
--------------------------------------------------------------------------------
/examples/simple_excel_export_01.md:
--------------------------------------------------------------------------------
1 | ## Simple Excel Export
2 |
3 | ```javascript
4 | import React from "react";
5 | import ReactExport from "react-export-excel";
6 |
7 | const ExcelFile = ReactExport.ExcelFile;
8 | const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
9 | const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;
10 |
11 | const dataSet1 = [
12 | {
13 | name: "Johson",
14 | amount: 30000,
15 | sex: 'M',
16 | is_married: true
17 | },
18 | {
19 | name: "Monika",
20 | amount: 355000,
21 | sex: 'F',
22 | is_married: false
23 | },
24 | {
25 | name: "John",
26 | amount: 250000,
27 | sex: 'M',
28 | is_married: false
29 | },
30 | {
31 | name: "Josef",
32 | amount: 450500,
33 | sex: 'M',
34 | is_married: true
35 | }
36 | ];
37 |
38 | const dataSet2 = [
39 | {
40 | name: "Johnson",
41 | total: 25,
42 | remainig: 16
43 | },
44 | {
45 | name: "Josef",
46 | total: 25,
47 | remainig: 7
48 | }
49 | ];
50 |
51 | class Download extends React.Component {
52 | render() {
53 | return (
54 |
55 |
56 |
57 |
58 |
59 | col.is_married ? "Married" : "Single"}/>
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | );
69 | }
70 | }
71 | ```
72 |
73 | ## Output
74 | 
75 |
--------------------------------------------------------------------------------
/examples/simple_excel_export_02.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React from "react";
3 | import {ExcelFile, ExcelSheet} from "react-export-excel";
4 |
5 | const multiDataSet = [
6 | {
7 | columns: [
8 | { value: "Name", widthPx: 50 }, // width in pixels
9 | { value: "Salary", widthCh: 20 }, // width in charachters
10 | { value: "Sex", widthPx: 60, widthCh: 20 }, // will check for width in pixels first
11 | ],
12 | data: [
13 | ["Johnson", 30000, "Male"],
14 | ["Monika", 355000, "Female"],
15 | ["Konstantina", 20000, "Female"],
16 | ["John", 250000, "Male"],
17 | ["Josef", 450500, "Male"],
18 | ],
19 | },
20 | {
21 | xSteps: 1, // Will start putting cell with 1 empty cell on left most
22 | ySteps: 5, //will put space of 5 rows,
23 | columns: ["Name", "Department"],
24 | data: [
25 | ["Johnson", "Finance"],
26 | ["Monika", "IT"],
27 | ["Konstantina", "IT Billing"],
28 | ["John", "HR"],
29 | ["Josef", "Testing"],
30 | ],
31 | },
32 | ];
33 |
34 | class Download extends React.Component {
35 | render() {
36 | return (
37 |
38 |
39 |
40 | );
41 | }
42 | }
43 | ```
44 |
45 | ## Output
46 | 
47 |
--------------------------------------------------------------------------------
/examples/styled_excel_sheet.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React, {Component} from 'react';
3 | import ReactExport from 'react-export-excel';
4 | import './App.css';
5 |
6 | const ExcelFile = ReactExport.ExcelFile;
7 | const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
8 |
9 | const styledMultiDataSet = [
10 | {
11 | columns: [
12 | {
13 | value: "Headings",
14 | widthPx: 160,
15 | style: { font: { sz: "24", bold: true } },
16 | },
17 | {
18 | value: "Text Style",
19 | widthPx: 180,
20 | style: { font: { sz: "24", bold: true } },
21 | },
22 | {
23 | value: "Colors",
24 | style: { font: { sz: "24", bold: true } }, // if no width set, default excel column width will be used ( 64px )
25 | },
26 | ],
27 | data: [
28 | [
29 | { value: "H1", style: { font: { sz: "24", bold: true } } },
30 | { value: "Bold", style: { font: { bold: true } } },
31 | {
32 | value: "Red",
33 | style: {
34 | fill: { patternType: "solid", fgColor: { rgb: "FFFF0000" } },
35 | },
36 | },
37 | ],
38 | [
39 | { value: "H2", style: { font: { sz: "18", bold: true } } },
40 | { value: "underline", style: { font: { underline: true } } },
41 | {
42 | value: "Blue",
43 | style: {
44 | fill: { patternType: "solid", fgColor: { rgb: "FF0000FF" } },
45 | },
46 | },
47 | ],
48 | [
49 | { value: "H3", style: { font: { sz: "14", bold: true } } },
50 | { value: "italic", style: { font: { italic: true } } },
51 | {
52 | value: "Green",
53 | style: {
54 | fill: { patternType: "solid", fgColor: { rgb: "FF00FF00" } },
55 | },
56 | },
57 | ],
58 | [
59 | { value: "H4", style: { font: { sz: "12", bold: true } } },
60 | { value: "strike", style: { font: { strike: true } } },
61 | {
62 | value: "Orange",
63 | style: {
64 | fill: { patternType: "solid", fgColor: { rgb: "FFF86B00" } },
65 | },
66 | },
67 | ],
68 | [
69 | { value: "H5", style: { font: { sz: "10.5", bold: true } } },
70 | { value: "outline", style: { font: { outline: true } } },
71 | {
72 | value: "Yellow",
73 | style: {
74 | fill: { patternType: "solid", fgColor: { rgb: "FFFFFF00" } },
75 | },
76 | },
77 | ],
78 | [
79 | { value: "H6", style: { font: { sz: "7.5", bold: true } } },
80 | { value: "shadow", style: { font: { shadow: true } } },
81 | {
82 | value: "Light Blue",
83 | style: {
84 | fill: { patternType: "solid", fgColor: { rgb: "FFCCEEFF" } },
85 | },
86 | },
87 | ],
88 | ],
89 | },
90 | ];
91 |
92 | class App extends Component {
93 | render() {
94 | return (
95 |
96 | Download Data With Styles}>
97 |
98 |
99 |
100 | );
101 | }
102 | }
103 | ```
104 |
105 | ## Output
106 | 
107 | 
108 |
--------------------------------------------------------------------------------
/examples/with_custom_download_element.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React from "react";
3 | import ReactExport from "react-export-excel";
4 |
5 | const ExcelFile = ReactExport.ExcelFile;
6 | const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
7 | const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;
8 |
9 | const dataSet1 = [
10 | {
11 | name: "Johson",
12 | amount: 30000,
13 | sex: 'M',
14 | is_married: true
15 | },
16 | {
17 | name: "Monika",
18 | amount: 355000,
19 | sex: 'F',
20 | is_married: false
21 | },
22 | {
23 | name: "John",
24 | amount: 250000,
25 | sex: 'M',
26 | is_married: false
27 | },
28 | {
29 | name: "Josef",
30 | amount: 450500,
31 | sex: 'M',
32 | is_married: true
33 | }
34 | ];
35 |
36 | var dataSet2 = [
37 | {
38 | name: "Johnson",
39 | total: 25,
40 | remainig: 16
41 | },
42 | {
43 | name: "Josef",
44 | total: 25,
45 | remainig: 7
46 | }
47 | ];
48 |
49 | class Download extends React.Component {
50 | render() {
51 | return (
52 | Download Data