zsusac · dqve · Jan 8, 2021 · Jan 8, 2021 · Sep 1, 2022 · Nov 9, 2022
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+#lock file
+*lock.json
+
 # Runtime data
 pids
 *.pid

diff --git a/README.md b/README.md
@@ -1,9 +1,10 @@
-# ReactHTMLTableToExcel
-Provides a client side generation of Excel (.xls) file from HTML table element.
+# ReactHTMLTableToExcel V3
+Provides a client side generation of Excel (.xls/.xlsx) file from HTML table element.
+
 
 [![Build Status](https://travis-ci.org/zsusac/ReactHTMLTableToExcel.svg?branch=master)](https://travis-ci.org/zsusac/ReactHTMLTableToExcel)
 
-[![NPM](https://nodei.co/npm/react-html-table-to-excel.png)](https://npmjs.org/package/react-html-table-to-excel)
+[![NPM](https://nodei.co/npm/react-html-table-to-excel-3.png)](https://npmjs.org/package/react-html-table-to-excel-3)
 
 ___
 No additional dependencies
@@ -12,7 +13,7 @@ ___
 ## Installation
 
 ```
-npm install --save react-html-table-to-excel
+npm install --save react-html-table-to-excel-3
 ```
 
 ## Features
@@ -31,11 +32,12 @@ Property | Type | Description
 ----- | ----- | -----
 **table** | *string* | ID attribute of HTML table element.
 **filename** | *string* | Name of Excel file.
+**filetype** | *string* | Name of File Extension for Excel file.
 **sheet** | *string* | Name of Excel sheet.
 **id** | *string* | ID attribute of button element.
 **className** | *string* | Class attribute of button element.
 **buttonText** | *string* | Button text.
-
+**children** | *element* | Child elements to render instead of the button text.
 
 ## Example
 
@@ -58,6 +60,7 @@ class Test extends Component {
                     className="download-table-xls-button"
                     table="table-to-xls"
                     filename="tablexls"
+                    filetype="xls"
                     sheet="tablexls"
                     buttonText="Download as XLS"/>
                 <table id="table-to-xls">
@@ -85,3 +88,7 @@ class Test extends Component {
 
 export default Test
 ```
+
+### NB: This repository is a super set of the original [ReactHTMLTableToExcel](https://npmjs.org/package/react-html-table-to-excel-3) package by [zsusac](https://github.com/zsusac) which is currently no longer maintained. This version adds some new features but maintains the original core.
+
+I do not retain the ownership or responsibility of this package.
diff --git a/index.js b/index.js
@@ -26,6 +26,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var propTypes = {
   table: _propTypes2.default.string.isRequired,
   filename: _propTypes2.default.string.isRequired,
+  filetype: _propTypes2.default.string,
   sheet: _propTypes2.default.string.isRequired,
   id: _propTypes2.default.string,
   className: _propTypes2.default.string,
@@ -71,7 +72,8 @@ var ReactHTMLTableToExcel = function (_Component) {
 
       var table = document.getElementById(this.props.table).outerHTML;
       var sheet = String(this.props.sheet);
-      var filename = String(this.props.filename) + '.xls';
+      var filetype = String(this.props.filetype ? this.props.filetype === 'xlsx' ? 'xlsx' : 'xls' : 'xls');
+      var filename = '' + (String(this.props.filename) + '.' + filetype);
 
       var uri = 'data:application/vnd.ms-excel;base64,';
       var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' + 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' + 'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' + 'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' + 'xml><![endif]--></head><body>{table}</body></html>';
@@ -112,7 +114,7 @@ var ReactHTMLTableToExcel = function (_Component) {
           type: 'button',
           onClick: this.handleDownload
         },
-        this.props.buttonText
+        this.props.children ? this.props.children : this.props.buttonText
       );
     }
   }], [{

diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
-    "name": "react-html-table-to-excel",
-    "version": "2.0.0",
+    "name": "react-html-table-to-excel-3",
+    "version": "3.0.1",
     "description": "Small react component for converting and downloading HTML table to Excel file",
     "main": "index.js",
     "scripts": {
         "build": "./node_modules/.bin/babel ./src/ReactHTMLTableToExcel.jsx -o index.js",
         "prepublish": "npm run build",
-        "client:test": "NODE_ENV=test jest",
-        "client:test:watch": "NODE_ENV=test jest --watch"
+        "client:test": "jest",
+        "client:test:watch": "jest --watch"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/zsusac/ReactHTMLTableToExcel.git"
+        "url": "git+https://github.com/dqve/ReactHTMLTableToExcel.git"
     },
     "keywords": [
         "react",
@@ -23,9 +23,9 @@
     "author": "Zvonimir Susac <[email protected]>",
     "license": "MIT",
     "bugs": {
-        "url": "https://github.com/zsusac/ReactHTMLTableToExcel/issues"
+        "url": "https://github.com/dqve/ReactHTMLTableToExcel/issues"
     },
-    "homepage": "https://github.com/zsusac/ReactHTMLTableToExcel#readme",
+    "homepage": "https://github.com/dqve/ReactHTMLTableToExcel#readme",
     "jest": {
         "rootDir": "./",
         "moduleNameMapper": {
@@ -39,7 +39,7 @@
         ]
     },
     "peerDependencies": {
-        "react": "^15.x.x"
+        "react": "^16.x.x"
     },
     "devDependencies": {
         "babel-cli": "^6.24.1",
@@ -48,20 +48,21 @@
         "babel-preset-react": "^6.24.1",
         "babel-preset-stage-0": "^6.24.1",
         "chai": "^3.5.0",
-        "chai-enzyme": "^0.6.1",
-        "enzyme": "^2.8.2",
-        "eslint": "^3.19.0",
-        "eslint-config-airbnb": "^14.1.0",
+        "chai-enzyme": "^1.0.0-beta.1",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.6",
+        "eslint": "^8.18.0",
+        "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.2.0",
-        "eslint-plugin-jsx-a11y": "^5.0.1",
-        "eslint-plugin-react": "^7.0.0",
-        "jest": "^20.0.1",
-        "react": "^15.5.4",
-        "react-dom": "^15.5.4",
-        "react-test-renderer": "^15.5.4",
+        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-react": "^7.30.1",
+        "jest": "^20.0.4",
+        "react": "^16.14.0",
+        "react-dom": "^16.14.0",
+        "react-test-renderer": "^16.14.0",
         "sinon": "^2.2.0"
     },
     "dependencies": {
-        "prop-types": "^15.5.10"
+        "prop-types": "^15.8.1"
     }
 }
diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 const propTypes = {
   table: PropTypes.string.isRequired,
   filename: PropTypes.string.isRequired,
+  filetype: PropTypes.string,
   sheet: PropTypes.string.isRequired,
   id: PropTypes.string,
   className: PropTypes.string,
@@ -50,7 +51,9 @@ class ReactHTMLTableToExcel extends Component {
 
     const table = document.getElementById(this.props.table).outerHTML;
     const sheet = String(this.props.sheet);
-    const filename = `${String(this.props.filename)}.xls`;
+    const filetype = String((this.props.filetype)?(this.props.filetype === 'xlsx'?'xlsx':'xls'):'xls')
+    const filename = `${String(this.props.filename) + '.' + filetype}`;
+
 
     const uri = 'data:application/vnd.ms-excel;base64,';
     const template =
@@ -101,7 +104,7 @@ class ReactHTMLTableToExcel extends Component {
         type="button"
         onClick={this.handleDownload}
       >
-        {this.props.buttonText}
+        {this.props.children ? this.props.children : this.props.buttonText}
       </button>
     );
   }

diff --git a/test/index.test.js b/test/index.test.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import ReactHTMLTableToExcel from '../src/ReactHTMLTableToExcel';
 
+configure({ adapter: new Adapter() });
+
 chai.use(chaiEnzyme());
 
 const props = {