From 6a5ac42dfa0838773df4ebd54f206b1e590504d5 Mon Sep 17 00:00:00 2001 From: David Ayoola Date: Fri, 8 Jan 2021 12:17:17 +0100 Subject: [PATCH 1/8] Add option for different extension name (xls or xlsx) The new option can be used by declaring & using the "filetype" prop when declaring the component, valid options are "xls" and "xlsx". --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 27bb0f1..5e5f2e9 100644 --- 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.isRequired, 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 = '{table}'; From 33643e15284842ed7074f8b4b7b6b4d2e96662a5 Mon Sep 17 00:00:00 2001 From: David Ayoola Date: Fri, 8 Jan 2021 12:23:59 +0100 Subject: [PATCH 2/8] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 79efdb2..d1921a5 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ 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. @@ -58,6 +59,7 @@ class Test extends Component { className="download-table-xls-button" table="table-to-xls" filename="tablexls" + filetype="xls" sheet="tablexls" buttonText="Download as XLS"/> From 4c779e8ed0c07848d3bec0f5b76e41a6f3ea32cc Mon Sep 17 00:00:00 2001 From: ibra7002 <85820636+ibra7002@users.noreply.github.com> Date: Thu, 1 Sep 2022 21:28:47 +0200 Subject: [PATCH 3/8] Update ReactHTMLTableToExcel.jsx ${String(this.props.filename)}.xls to ${String(this.props.filename)}.xlsx --- src/ReactHTMLTableToExcel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx index fd32011..4d66866 100644 --- a/src/ReactHTMLTableToExcel.jsx +++ b/src/ReactHTMLTableToExcel.jsx @@ -50,7 +50,7 @@ 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 filename = `${String(this.props.filename)}.xlsx`; const uri = 'data:application/vnd.ms-excel;base64,'; const template = From 9c6c1d19b62d5f826860c61b427f47d0b9b4850d Mon Sep 17 00:00:00 2001 From: David Ayoola Date: Wed, 9 Nov 2022 14:02:05 +0100 Subject: [PATCH 4/8] Make filetype prop none required (#2) --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 5e5f2e9..996271d 100644 --- a/index.js +++ b/index.js @@ -26,7 +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.isRequired, + filetype: _propTypes2.default.string, sheet: _propTypes2.default.string.isRequired, id: _propTypes2.default.string, className: _propTypes2.default.string, From f46019f09803cb14a2b87992118e3bd252b6e768 Mon Sep 17 00:00:00 2001 From: David Ayoola Date: Wed, 9 Nov 2022 14:12:51 +0100 Subject: [PATCH 5/8] Add Developments (#3) * Make filetype prop none required * Update file type. --- src/ReactHTMLTableToExcel.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx index 4d66866..15ebd72 100644 --- 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)}.xlsx`; + 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 = From 42be228c1946eb4ed11e3ab13ea6bea969b8caf5 Mon Sep 17 00:00:00 2001 From: David Ayoola Date: Wed, 9 Nov 2022 14:42:03 +0100 Subject: [PATCH 6/8] Add Developments (#4) * Make filetype prop none required * Update file type. * Updated dependencies to use react 16 and dded children to the button. --- README.md | 2 +- package.json | 31 ++++++++++++++++--------------- src/ReactHTMLTableToExcel.jsx | 2 +- test/index.test.js | 4 ++++ 4 files changed, 22 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index d1921a5..7a9dc73 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Property | Type | Description **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 diff --git a/package.json b/package.json index 3d6892f..1b42d3a 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "react-html-table-to-excel", - "version": "2.0.0", + "version": "3.0.0", "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", @@ -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" } } \ No newline at end of file diff --git a/src/ReactHTMLTableToExcel.jsx b/src/ReactHTMLTableToExcel.jsx index 15ebd72..271ef50 100644 --- a/src/ReactHTMLTableToExcel.jsx +++ b/src/ReactHTMLTableToExcel.jsx @@ -104,7 +104,7 @@ class ReactHTMLTableToExcel extends Component { type="button" onClick={this.handleDownload} > - {this.props.buttonText} + {this.props.children ? this.props.children : this.props.buttonText} ); } diff --git a/test/index.test.js b/test/index.test.js index 734604e..d1e4c97 100644 --- 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 = { From 22d4f816e7c759a1431c69ccadeb2cbacff5290e Mon Sep 17 00:00:00 2001 From: Ayoola David Date: Wed, 9 Nov 2022 15:04:38 +0100 Subject: [PATCH 7/8] Update ReadMe and run prepublish. --- .gitignore | 3 +++ README.md | 13 +++++++++---- index.js | 6 +++--- package.json | 8 ++++---- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/.gitignore b/.gitignore index 1db2414..8d5d019 100644 --- 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 index 7a9dc73..52a6d68 100644 --- 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 @@ -87,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. \ No newline at end of file diff --git a/index.js b/index.js index 996271d..68da4cc 100644 --- a/index.js +++ b/index.js @@ -72,8 +72,8 @@ var ReactHTMLTableToExcel = function (_Component) { var table = document.getElementById(this.props.table).outerHTML; var sheet = String(this.props.sheet); - var filetype = String((this.props.filetype)?(this.props.filetype == 'xlsx'?'xlsx':'xls'):'xls') - var filename = String(this.props.filename) + '.' + filetype; + 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 = '{table}'; @@ -114,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 index 1b42d3a..9a25d13 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-html-table-to-excel", + "name": "react-html-table-to-excel-3", "version": "3.0.0", "description": "Small react component for converting and downloading HTML table to Excel file", "main": "index.js", @@ -11,7 +11,7 @@ }, "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 ", "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": { From 1a30706764821425e19f32a8b79fc07bb1cd266c Mon Sep 17 00:00:00 2001 From: Ayoola David Date: Wed, 9 Nov 2022 15:05:37 +0100 Subject: [PATCH 8/8] Update Packages. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9a25d13..e5904a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-html-table-to-excel-3", - "version": "3.0.0", + "version": "3.0.1", "description": "Small react component for converting and downloading HTML table to Excel file", "main": "index.js", "scripts": {